Explore

#876423

#D6AD60

#f1f7e3

#cabbec

#9c80db

Actions

Explore the palette in different formats, and actions.

Colors overview

Yellow

Purple

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#876423	rgb(135, 100, 35)	hsl(39 59% 33%)	oklab(53% 0.02 0.09)	oklch(53% 0.09 79)	color(display-p3 0.51 0.4 0.19)
	#d6ad60	rgb(214, 173, 96)	hsl(39 59% 61%)	oklab(77% 0.02 0.11)	oklch(77% 0.11 82)	color(display-p3 0.81 0.68 0.42)
	#f1f7e3	rgb(241, 247, 227)	hsl(78 56% 93%)	oklab(97% -0.01 0.02)	oklch(97% 0.03 120)	color(display-p3 0.95 0.97 0.9)
	#cabbec	rgb(202, 187, 236)	hsl(260 56% 83%)	oklab(82% 0.03 -0.06)	oklch(82% 0.07 300)	color(display-p3 0.78 0.74 0.91)
	#9c80db	rgb(156, 128, 219)	hsl(260 56% 68%)	oklab(66% 0.06 -0.12)	oklch(66% 0.13 300)	color(display-p3 0.59 0.51 0.84)

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

#876423

AA - 5.41



#D6AD60

AA - 2.09



#f1f7e3

AA - 1.09



#cabbec

AA - 1.77



#9c80db

AA - 3.21



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(52.7% 0.017 0.091), oklab(76.9% 0.015 0.106), oklab(96.6% -0.014 0.023), oklab(82.1% 0.034 -0.061), oklab(66.3% 0.06 -0.12))

Fallback colors



background: linear-gradient(45deg, #876423, #D6AD60, #f1f7e3, #cabbec, #9c80db)

Colors



<!-- Primary Colors -->
<color name="explore_color_10">#876423</color>
<color name="explore_color_20">#D6AD60</color>
<color name="explore_color_30">#f1f7e3</color>
<color name="explore_color_40">#cabbec</color>
<color name="explore_color_50">#9c80db</color>

PWA prompt