#EDEEF0Frost
#C9CCD1Fog
#006699Lapis
#05141ELicorice

Lapis & Licorice Story color palette

Open in generator
Ask AI about this palette: ChatGPTClaudePerplexity

Lapis & Licorice Story is a neutral-based color palette tagged modern, dark, minimal. Lapis 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. The overall temperature is cool.

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)
Lapis#006699rgb(0, 102, 153)hsl(200, 100%, 30%)oklch(48.7% 0.113 241)
Licorice#05141Ergb(5, 20, 30)hsl(204, 71%, 7%)oklch(18.3% 0.030 239)

Why it works and how to use it

Two of the four colors are near-neutral, which leaves room for Lapis to lead. Lightness runs from 7% to 94%. Well suited to websites, presentations and branding.

  • Background: Frost (#EDEEF0) is the lightest color, so it belongs on large surfaces.
  • Text: Licorice (#05141E) on #EDEEF0 gives 16.08:1, passing WCAG AAA.
  • Primary: Lapis (#006699) is the most saturated mid-tone; use it for buttons and links (5.38: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.08:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Lapis & Licorice Story

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
#006699
#05141E

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

Contrast check WCAG ratios between palette colors

PairSampleRatioLevel
#EDEEF0 on #05141EAa16.08:1AAA
#C9CCD1 on #05141EAa11.59:1AAA
#EDEEF0 on #006699Aa5.38:1AA
#C9CCD1 on #006699Aa3.88:1AA large only
#006699 on #05141EAa2.99:1Fail
#EDEEF0 on #C9CCD1Aa1.39:1Fail

Similar palettes 24 more in this mood