La Catrina

#000000

#800000

#C8102E

#F4A460

#b383f2

Actions

Explore the palette in different formats, and actions.

Colors overview

Black

Red

Orange

Purple

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)
	#800000	rgb(128, 0, 0)	hsl(0 100% 25%)	oklab(38% 0.13 0.08)	oklch(38% 0.15 29)	color(display-p3 0.46 0.08 0.05)
	#c8102e	rgb(200, 16, 46)	hsl(350 85% 42%)	oklab(53% 0.19 0.08)	oklch(53% 0.21 22)	color(display-p3 0.72 0.17 0.21)
	#f4a460	rgb(244, 164, 96)	hsl(28 87% 67%)	oklab(78% 0.06 0.11)	oklch(78% 0.13 60)	color(display-p3 0.91 0.66 0.42)
	#b383f2	rgb(179, 131, 242)	hsl(270 81% 73%)	oklab(70% 0.09 -0.14)	oklch(70% 0.16 300)	color(display-p3 0.67 0.52 0.92)

 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



#800000

AAA - 10.94



#C8102E

AA - 5.88



#F4A460

AA - 2.03



#b383f2

AA - 2.82



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(37.7% 0.135 0.075), oklab(53% 0.192 0.079), oklab(78.4% 0.064 0.11), oklab(70.2% 0.087 -0.138))

Fallback colors



background: linear-gradient(45deg, #000000, #800000, #C8102E, #F4A460, #b383f2)

Colors



<!-- Primary Colors -->
<color name="la_catrina_color_10">#000000</color>
<color name="la_catrina_color_20">#800000</color>
<color name="la_catrina_color_30">#C8102E</color>
<color name="la_catrina_color_40">#F4A460</color>
<color name="la_catrina_color_50">#b383f2</color>

PWA prompt