Canvas

#2e2e2e

#737373

#eddcbb

#e6a627

#ad3e1c

Actions

Explore the palette in different formats, and actions.

Colors overview

Grey

Yellow

Orange

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#2e2e2e	rgb(46, 46, 46)	hsl(none 0% 18%)	oklab(30% 0 0)	oklch(30% 0 none)	color(display-p3 0.18 0.18 0.18)
	#737373	rgb(115, 115, 115)	hsl(none 0% 45%)	oklab(56% 0 0)	oklch(56% 0 none)	color(display-p3 0.45 0.45 0.45)
	#eddcbb	rgb(237, 220, 187)	hsl(40 58% 83%)	oklab(90% 0.01 0.05)	oklch(90% 0.05 84)	color(display-p3 0.92 0.87 0.75)
	#e6a627	rgb(230, 166, 39)	hsl(40 79% 53%)	oklab(77% 0.03 0.15)	oklch(77% 0.15 79)	color(display-p3 0.86 0.66 0.27)
	#ad3e1c	rgb(173, 62, 28)	hsl(14 72% 39%)	oklab(52% 0.12 0.09)	oklch(52% 0.15 37)	color(display-p3 0.63 0.27 0.16)

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

#2e2e2e

AAA - 13.57



#737373

AA - 4.74



#eddcbb

AA - 1.34



#e6a627

AA - 2.13



#ad3e1c

AA - 6.02



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(30.1% 0 0), oklab(55.6% 0 0), oklab(90% 0.005 0.047), oklab(76.7% 0.029 0.147), oklab(51.5% 0.122 0.091))

Fallback colors



background: linear-gradient(45deg, #2e2e2e, #737373, #eddcbb, #e6a627, #ad3e1c)

Colors



<!-- Primary Colors -->
<color name="canvas_color_10">#2e2e2e</color>
<color name="canvas_color_20">#737373</color>
<color name="canvas_color_30">#eddcbb</color>
<color name="canvas_color_40">#e6a627</color>
<color name="canvas_color_50">#ad3e1c</color>

PWA prompt