Chocolate

#000000

#412728

#7F4D3E

#B87C4C

#E2B659

Actions

Explore the palette in different formats, and actions.

Colors overview

Black

Brown

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#000000	rgb(0, 0, 0)	hsl(none 0% 0%)	oklab(0% 0 0)	oklch(0% 0 none)	color(display-p3 0 0 0)
	#412728	rgb(65, 39, 40)	hsl(360 25% 20%)	oklab(31% 0.04 0.01)	oklch(31% 0.04 17)	color(display-p3 0.24 0.16 0.16)
	#7f4d3e	rgb(127, 77, 62)	hsl(14 34% 37%)	oklab(47% 0.06 0.04)	oklch(47% 0.07 37)	color(display-p3 0.47 0.31 0.25)
	#b87c4c	rgb(184, 124, 76)	hsl(27 43% 51%)	oklab(64% 0.05 0.08)	oklch(64% 0.1 58)	color(display-p3 0.69 0.5 0.33)
	#e2b659	rgb(226, 182, 89)	hsl(41 70% 62%)	oklab(80% 0.01 0.12)	oklch(80% 0.12 84)	color(display-p3 0.86 0.72 0.41)

 Click on a color value to copy it to your clipboard.

Contrast ratios checker

Click one color card to view the complete contrast checker tests.

#000000

AAA - 21



#412728

AAA - 13.58



#7F4D3E

AA - 6.92



#B87C4C

AA - 3.48



#E2B659

AA - 1.89



Color blindness

The simulation of color blindness may not be 100% accurate sometimes.

Colors preview as gradient with protanopia

Colors preview as palette with protanopia

UI components preview

Preview the gradient in different UI components.

HDR color space

HDR oklab colors



background: linear-gradient(45deg, oklab(0% 0 0), oklab(30.6% 0.038 0.012), oklab(47.4% 0.057 0.044), oklab(63.8% 0.052 0.084), oklab(79.8% 0.013 0.121))

Fallback colors



background: linear-gradient(45deg, #000000, #412728, #7F4D3E, #B87C4C, #E2B659)

Colors



<!-- Primary Colors -->
<color name="chocolate_color_10">#000000</color>
<color name="chocolate_color_20">#412728</color>
<color name="chocolate_color_30">#7F4D3E</color>
<color name="chocolate_color_40">#B87C4C</color>
<color name="chocolate_color_50">#E2B659</color>

PWA prompt