Harmony

#514646

#dad3c7

#fff5f1

#e5f7ec

#fff2cd

Actions

Explore the palette in different formats, and actions.

Colors overview

Brown

Cyan

Yellow

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#514646	rgb(81, 70, 70)	hsl(0 7.3% 30%)	oklab(41% 0.01 0)	oklch(41% 0.01 18)	color(display-p3 0.31 0.28 0.28)
	#dad3c7	rgb(218, 211, 199)	hsl(38 20% 82%)	oklab(87% 0 0.02)	oklch(87% 0.02 81)	color(display-p3 0.85 0.83 0.79)
	#fff5f1	rgb(255, 245, 241)	hsl(17 100% 97%)	oklab(98% 0.01 0.01)	oklch(98% 0.01 43)	color(display-p3 0.99 0.96 0.95)
	#e5f7ec	rgb(229, 247, 236)	hsl(140 53% 93%)	oklab(96% -0.02 0.01)	oklch(96% 0.02 160)	color(display-p3 0.91 0.97 0.93)
	#fff2cd	rgb(255, 242, 205)	hsl(44 100% 90%)	oklab(96% 0 0.05)	oklch(96% 0.05 91)	color(display-p3 0.99 0.95 0.82)

 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.

#514646

AAA - 9.07



#dad3c7

AA - 1.48



#fff5f1

AA - 1.07



#e5f7ec

AA - 1.11



#fff2cd

AA - 1.11



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(40.5% 0.014 0.005), oklab(86.9% 0.003 0.018), oklab(97.7% 0.009 0.008), oklab(96% -0.022 0.008), oklab(96.2% -0.001 0.05))

Fallback colors



background: linear-gradient(45deg, #514646, #dad3c7, #fff5f1, #e5f7ec, #fff2cd)

Colors



<!-- Primary Colors -->
<color name="harmony_color_10">#514646</color>
<color name="harmony_color_20">#dad3c7</color>
<color name="harmony_color_30">#fff5f1</color>
<color name="harmony_color_40">#e5f7ec</color>
<color name="harmony_color_50">#fff2cd</color>

PWA prompt