#EDEEF0Frost
#C9CCD1Fog
#7A5A00Cocoa
#0B1220Licorice

Cocoa & Licorice Sky color palette

Open in generator
Ask AI about this palette: ChatGPTClaudePerplexity

Cocoa & Licorice Sky is a neutral-based color palette tagged modern, dark, minimal. Cocoa is the only saturated color here, so it does all the talking against a neutral base. Neither washed out nor loud, it adapts to most contexts. Warm and cool hues are mixed, which adds depth.

Color codes click any value to copy

SwatchNameHEXRGBHSLOKLCH
Frost#EDEEF0rgb(237, 238, 240)hsl(220, 9%, 94%)oklch(94.9% 0.003 265)
Fog#C9CCD1rgb(201, 204, 209)hsl(217, 8%, 80%)oklch(84.4% 0.008 261)
Cocoa#7A5A00rgb(122, 90, 0)hsl(44, 100%, 24%)oklch(48.8% 0.100 84)
Licorice#0B1220rgb(11, 18, 32)hsl(220, 49%, 8%)oklch(18.3% 0.031 263)

Why it works and how to use it

The palette holds together thanks to its neutral backbone and a strong light-to-dark ladder (94% down to 8% lightness). A natural fit for websites, presentations and branding.

  • Background: Frost (#EDEEF0) is the lightest color, so it belongs on large surfaces.
  • Text: Licorice (#0B1220) on #EDEEF0 gives 16.13:1, passing WCAG AAA.
  • Primary: Cocoa (#7A5A00) is the most saturated mid-tone; use it for buttons and links (5.5:1 against the background, fine for UI elements).
  • Accent: Fog (#C9CCD1) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Frost on Licorice at 16.13:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Cocoa & Licorice Sky

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

#EDEEF0
#C9CCD1
#7A5A00
#0B1220

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

Contrast check WCAG ratios between palette colors

PairSampleRatioLevel
#EDEEF0 on #0B1220Aa16.13:1AAA
#C9CCD1 on #0B1220Aa11.63:1AAA
#EDEEF0 on #7A5A00Aa5.5:1AA
#C9CCD1 on #7A5A00Aa3.96:1AA large only
#7A5A00 on #0B1220Aa2.93:1Fail
#EDEEF0 on #C9CCD1Aa1.39:1Fail

Similar palettes 24 more in this mood