What are the hex codes in the Cool Pistachio & Emerald palette?

The Cool Pistachio & Emerald color palette consists of Pistachio #AAB755, Emerald #70B874, Pine #00707A, Evergreen #004336.

How should I use the Cool Pistachio & Emerald palette on a website?

Use Pistachio #AAB755 as the background, Evergreen #004336 for text, Pine #00707A for buttons and links, and Emerald #70B874 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Pistachio on Evergreen at 5.18:1.

Which colors in Cool Pistachio & Emerald have enough contrast for text?

The highest-contrast pair is #AAB755 on #004336 with a ratio of 5.18:1, which passes WCAG AA for normal text.

#AAB755Pistachio

#70B874Emerald

#00707APine

#004336Evergreen

Cool Pistachio & Emerald color palette

Cold Green Teal

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Pistachio	`#AAB755`	`rgb(170, 183, 85)`	`hsl(68, 40%, 53%)`	`oklch(74.9% 0.124 116)`
Emerald	`#70B874`	`rgb(112, 184, 116)`	`hsl(123, 34%, 58%)`	`oklch(71.8% 0.121 145)`
Pine	`#00707A`	`rgb(0, 112, 122)`	`hsl(185, 100%, 24%)`	`oklch(49.8% 0.085 206)`
Evergreen	`#004336`	`rgb(0, 67, 54)`	`hsl(168, 100%, 13%)`	`oklch(34.2% 0.065 174)`

Why it works and how to use it

Cool Pistachio & Emerald is a vivid dark, split color palette tagged cold, green, teal. A split scheme: Pistachio plays against Evergreen across roughly 117° of hue. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Pine takes the lead while the rest support. Lightness runs from 13% to 58%. Well suited to dark-mode interfaces and gaming.

Background: Pistachio (#AAB755) is the lightest color, so it belongs on large surfaces.
Text: Evergreen (#004336) on #AAB755 gives 5.18:1, passing WCAG AA.
Primary: Pine (#00707A) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Emerald (#70B874) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Pistachio on Evergreen at 5.18:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Cool Pistachio & Emerald

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#AAB755

#70B874

#00707A

#004336

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#AAB755` on `#004336`	Aa	5.18:1	AA
`#70B874` on `#004336`	Aa	4.74:1	AA
`#AAB755` on `#00707A`	Aa	2.67:1	Fail
`#70B874` on `#00707A`	Aa	2.44:1	Fail
`#00707A` on `#004336`	Aa	1.94:1	Fail
`#AAB755` on `#70B874`	Aa	1.09:1	Fail

:root {
  --pistachio: #AAB755;
  --emerald: #70B874;
  --pine: #00707A;
  --evergreen: #004336;
}

$pistachio: #AAB755;
$emerald: #70B874;
$pine: #00707A;
$evergreen: #004336;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'pistachio': '#AAB755',
        'emerald': '#70B874',
        'pine': '#00707A',
        'evergreen': '#004336',
      },
    },
  },
};

{
  "name": "Cool Pistachio & Emerald",
  "colors": [
    "#AAB755",
    "#70B874",
    "#00707A",
    "#004336"
  ]
}

background: linear-gradient(135deg, #AAB755, #70B874, #00707A, #004336);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2024-10-27 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood