#4D3424Taupe
#88604ACocoa
#BBE9CDCeladon
#F6FCF8Snow

Emerald Cocoa & Celadon color palette

Open in generator
Ask AI about this palette: ChatGPTClaudePerplexity

Emerald Cocoa & Celadon is a split color palette tagged food, muted, earthy. A split scheme: Taupe plays against Celadon across roughly 122° of hue. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

Color codes click any value to copy

SwatchNameHEXRGBHSLOKLCH
Taupe#4D3424rgb(77, 52, 36)hsl(23, 36%, 22%)oklch(35.0% 0.045 53)
Cocoa#88604Argb(136, 96, 74)hsl(21, 30%, 41%)oklch(52.5% 0.062 50)
Celadon#BBE9CDrgb(187, 233, 205)hsl(143, 51%, 82%)oklch(89.4% 0.061 158)
Snow#F6FCF8rgb(246, 252, 248)hsl(140, 50%, 98%)oklch(98.5% 0.008 157)

Why it works and how to use it

The palette holds together thanks to its split hue relationship and a strong light-to-dark ladder (98% down to 22% lightness). A natural fit for menus and packaging.

  • Background: Snow (#F6FCF8) is the lightest color, so it belongs on large surfaces.
  • Text: Taupe (#4D3424) on #F6FCF8 gives 11.02:1, passing WCAG AAA.
  • Primary: Celadon (#BBE9CD) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
  • Accent: Cocoa (#88604A) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Taupe on Snow at 11.02:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Emerald Cocoa & Celadon

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
Card title
Card title
Roles are assigned by lightness.

Color blindness simulation

#4D3424
#88604A
#BBE9CD
#F6FCF8

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

Contrast check WCAG ratios between palette colors

PairSampleRatioLevel
#4D3424 on #F6FCF8Aa11.02:1AAA
#4D3424 on #BBE9CDAa8.54:1AAA
#88604A on #F6FCF8Aa5.29:1AA
#88604A on #BBE9CDAa4.1:1AA large only
#4D3424 on #88604AAa2.08:1Fail
#BBE9CD on #F6FCF8Aa1.29:1Fail

Similar palettes 24 more in this mood