Essential Haze

minimal palette with a balanced five-color hierarchy for design use.

#Minimal#Neutral#Clean

Open in Generator

COLOR 1

#22211D

Stone 800

COLOR 2

#5F6440

Rosemary

COLOR 3

#8E9683

Artichoke

COLOR 4

#F3F2F6

Slate 100

COLOR 5

#DCDCD8

Gainsboro

Color Values & Codes

HEX · RGB · HSL

Stone 800

#22211D

rgb(34, 33, 29)hsl(48, 8%, 12%)Color details →

Rosemary

#5F6440

rgb(95, 100, 64)hsl(68, 22%, 32%)Color details →

Artichoke

#8E9683

rgb(142, 150, 131)hsl(85, 8%, 55%)Color details →

Slate 100

#F3F2F6

rgb(243, 242, 246)hsl(255, 18%, 96%)Color details →

Gainsboro

#DCDCD8

rgb(220, 220, 216)hsl(60, 5%, 85%)Color details →

Open In Design Tools

Palette Generator

Lock & shuffle colors

Explore category schemes

CSS Variables

Copy & paste directly into your stylesheet

:root {
  --color-1: #22211D;
  --color-2: #5F6440;
  --color-3: #8E9683;
  --color-4: #F3F2F6;
  --color-5: #DCDCD8;
}

Role-Based WCAG Contrast Audit

Accessibility contrast depends on assigned UI roles. Here are the contrast ratios and WCAG compliance ratings when pairing palette colors as Foreground Text against Background surfaces:

Sample Text

#22211D on #F3F2F614.46:1

Normal Text AA Pass

Sample Text

#22211D on #DCDCD811.72:1

Normal Text AA Pass

Sample Text

#5F6440 on #F3F2F65.57:1

Normal Text AA Pass

Sample Text

#5F6440 on #DCDCD84.51:1

Normal Text AA Pass

Sample Text

#8E9683 on #F3F2F62.75:1

Large Text Only (Fail)

Sample Text

#8E9683 on #DCDCD82.23:1

Large Text Only (Fail)

Related Palettes in Minimal

cp-featured-07Minimal

Swiss Editorial Clean

MinimalCreativeBold

cp-featured-10Interior Design

Japandi Sanctuary

Interior DesignNeutralCalm

cp-featured-15Fashion

Milan Runway Neutral

FashionNeutralCreative

cp-featured-18Food

FoodCleanFresh