What are the hex codes in the Lapis & Hazelnut Dream palette?

The Lapis & Hazelnut Dream color palette consists of Espresso #4A1F14, Lapis #005D91, Hazelnut #C9856A, Eggshell #F3E6DD.

How should I use the Lapis & Hazelnut Dream palette on a website?

Use Eggshell #F3E6DD as the background, Espresso #4A1F14 for text, Lapis #005D91 for buttons and links, and Hazelnut #C9856A for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Espresso on Eggshell at 11.47:1.

Which colors in Lapis & Hazelnut Dream have enough contrast for text?

The highest-contrast pair is #4A1F14 on #F3E6DD with a ratio of 11.47:1, which passes WCAG AA for normal text.

#4A1F14Espresso

#005D91Lapis

#C9856AHazelnut

#F3E6DDEggshell

Lapis & Hazelnut Dream color palette

Dark Blue

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Espresso	`#4A1F14`	`rgb(74, 31, 20)`	`hsl(12, 57%, 18%)`	`oklch(29.9% 0.069 35)`
Lapis	`#005D91`	`rgb(0, 93, 145)`	`hsl(202, 100%, 28%)`	`oklch(46.0% 0.112 243)`
Hazelnut	`#C9856A`	`rgb(201, 133, 106)`	`hsl(17, 47%, 60%)`	`oklch(68.0% 0.093 42)`
Eggshell	`#F3E6DD`	`rgb(243, 230, 221)`	`hsl(25, 48%, 91%)`	`oklch(93.3% 0.019 57)`

Why it works and how to use it

Lapis & Hazelnut Dream is a vivid complementary color palette tagged dark, blue. Near-complementary hues (about 177° apart) make this a high-contrast, attention-grabbing combination. 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, Lapis takes the lead while the rest support. Lightness runs from 18% to 91%. Well suited to websites, presentations and branding.

Background: Eggshell (#F3E6DD) is the lightest color, so it belongs on large surfaces.
Text: Espresso (#4A1F14) on #F3E6DD gives 11.47:1, passing WCAG AAA.
Primary: Lapis (#005D91) is the most saturated mid-tone; use it for buttons and links (5.77:1 against the background, fine for UI elements).
Accent: Hazelnut (#C9856A) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Espresso on Eggshell at 11.47:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Lapis & Hazelnut Dream

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

#4A1F14

#005D91

#C9856A

#F3E6DD

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
`#4A1F14` on `#F3E6DD`	Aa	11.47:1	AAA
`#005D91` on `#F3E6DD`	Aa	5.77:1	AA
`#4A1F14` on `#C9856A`	Aa	4.71:1	AA
`#C9856A` on `#F3E6DD`	Aa	2.44:1	Fail
`#005D91` on `#C9856A`	Aa	2.37:1	Fail
`#4A1F14` on `#005D91`	Aa	1.99:1	Fail

:root {
  --espresso: #4A1F14;
  --lapis: #005D91;
  --hazelnut: #C9856A;
  --eggshell: #F3E6DD;
}

$espresso: #4A1F14;
$lapis: #005D91;
$hazelnut: #C9856A;
$eggshell: #F3E6DD;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'espresso': '#4A1F14',
        'lapis': '#005D91',
        'hazelnut': '#C9856A',
        'eggshell': '#F3E6DD',
      },
    },
  },
};

{
  "name": "Lapis & Hazelnut Dream",
  "colors": [
    "#4A1F14",
    "#005D91",
    "#C9856A",
    "#F3E6DD"
  ]
}

background: linear-gradient(135deg, #4A1F14, #005D91, #C9856A, #F3E6DD);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2026-01-21 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood