Cempasuchil

#F4C66C

#F3A454

#E55945

#BC4B39

#873E2A

Actions

Explore the palette in different formats, and actions.

Colors overview

Orange

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#f4c66c	rgb(244, 198, 108)	hsl(40 86% 69%)	oklab(85% 0.02 0.12)	oklch(85% 0.12 83)	color(display-p3 0.93 0.78 0.48)
	#f3a454	rgb(243, 164, 84)	hsl(30 87% 64%)	oklab(78% 0.06 0.12)	oklch(78% 0.13 64)	color(display-p3 0.91 0.66 0.39)
	#e55945	rgb(229, 89, 69)	hsl(7.5 75% 58%)	oklab(64% 0.15 0.09)	oklch(64% 0.18 31)	color(display-p3 0.83 0.38 0.3)
	#bc4b39	rgb(188, 75, 57)	hsl(8.2 53% 48%)	oklab(56% 0.13 0.08)	oklch(56% 0.15 31)	color(display-p3 0.68 0.32 0.25)
	#873e2a	rgb(135, 62, 42)	hsl(13 53% 35%)	oklab(46% 0.08 0.06)	oklch(46% 0.11 36)	color(display-p3 0.49 0.26 0.19)

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

#F4C66C

AA - 1.59



#F3A454

AA - 2.04



#E55945

AA - 3.59



#BC4B39

AA - 4.99



#873E2A

AAA - 7.62



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(84.9% 0.015 0.119), oklab(78.1% 0.059 0.12), oklab(64.4% 0.153 0.091), oklab(56% 0.128 0.078), oklab(45.5% 0.085 0.062))

Fallback colors



background: linear-gradient(45deg, #F4C66C, #F3A454, #E55945, #BC4B39, #873E2A)

Colors



<!-- Primary Colors -->
<color name="cempasuchil_color_10">#F4C66C</color>
<color name="cempasuchil_color_20">#F3A454</color>
<color name="cempasuchil_color_30">#E55945</color>
<color name="cempasuchil_color_40">#BC4B39</color>
<color name="cempasuchil_color_50">#873E2A</color>

PWA prompt