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

The Emerald & Pistachio Mist color palette consists of Emerald #00C184, Baby Blue #64D2FC, Pistachio #A9D875, Aqua #3DEEEC.

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

Use Aqua #3DEEEC as the background, Emerald #00C184 for text, Baby Blue #64D2FC for buttons and links, and Pistachio #A9D875 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

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

The highest-contrast pair is #00C184 on #3DEEEC with a ratio of 1.63:1, which does not meet WCAG AA; add a darker or lighter neutral for body text.

#00C184Emerald

#64D2FCBaby Blue

#A9D875Pistachio

#3DEEECAqua

Emerald & Pistachio Mist color palette

Summer Cold Green Blue Teal

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Emerald	`#00C184`	`rgb(0, 193, 132)`	`hsl(161, 100%, 38%)`	`oklch(71.7% 0.158 162)`
Baby Blue	`#64D2FC`	`rgb(100, 210, 252)`	`hsl(197, 96%, 69%)`	`oklch(81.5% 0.116 226)`
Pistachio	`#A9D875`	`rgb(169, 216, 117)`	`hsl(88, 56%, 65%)`	`oklch(82.7% 0.137 130)`
Aqua	`#3DEEEC`	`rgb(61, 238, 236)`	`hsl(179, 84%, 59%)`	`oklch(86.4% 0.136 194)`

Why it works and how to use it

Emerald & Pistachio Mist is a vivid split color palette tagged summer, cold, green. A split scheme: Emerald plays against Aqua across roughly 109° of hue. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. The overall temperature is cool.

With 4 chromatic colors, Baby Blue takes the lead while the rest support. Lightness runs from 38% to 69%. Well suited to websites, presentations and branding.

Background: Aqua (#3DEEEC) is the lightest color, so it belongs on large surfaces.
Text: Emerald (#00C184) on #3DEEEC gives 1.63:1, so pair it with a darker neutral for body copy.
Primary: Baby Blue (#64D2FC) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Pistachio (#A9D875) for highlights, badges and hover states.

No pair inside the palette reaches 4.5:1, so add black or white for body text.

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

BrandFeaturesPricingBlogGet started

Design faster with Emerald & Pistachio Mist

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

#00C184

#64D2FC

#A9D875

#3DEEEC

Color-blind check: under deuteranopia and tritanopia, Baby Blue and Aqua become hard to tell apart, so do not rely on that pair alone to carry meaning.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#00C184` on `#3DEEEC`	Aa	1.63:1	Fail
`#00C184` on `#A9D875`	Aa	1.42:1	Fail
`#00C184` on `#64D2FC`	Aa	1.36:1	Fail
`#64D2FC` on `#3DEEEC`	Aa	1.2:1	Fail
`#A9D875` on `#3DEEEC`	Aa	1.15:1	Fail
`#64D2FC` on `#A9D875`	Aa	1.05:1	Fail

:root {
  --emerald: #00C184;
  --baby-blue: #64D2FC;
  --pistachio: #A9D875;
  --aqua: #3DEEEC;
}

$emerald: #00C184;
$baby-blue: #64D2FC;
$pistachio: #A9D875;
$aqua: #3DEEEC;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'emerald': '#00C184',
        'baby-blue': '#64D2FC',
        'pistachio': '#A9D875',
        'aqua': '#3DEEEC',
      },
    },
  },
};

{
  "name": "Emerald & Pistachio Mist",
  "colors": [
    "#00C184",
    "#64D2FC",
    "#A9D875",
    "#3DEEEC"
  ]
}

background: linear-gradient(135deg, #00C184, #64D2FC, #A9D875, #3DEEEC);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-02-13 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood