Santa Claus

#800000

#c02900

#ffffff

#ffd686

Actions

Explore the palette in different formats, and actions.

Colors overview

Red

Yellow

White

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#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)
	#c02900	rgb(192, 41, 0)	hsl(13 100% 38%)	oklab(53% 0.16 0.11)	oklch(53% 0.19 34)	color(display-p3 0.69 0.22 0.1)
	#ffffff	rgb(255, 255, 255)	hsl(none 0% 100%)	oklab(100% 0 0)	oklch(100% 0 none)	color(display-p3 1 1 1)
	#ffd686	rgb(255, 214, 134)	hsl(40 100% 76%)	oklab(89% 0.01 0.11)	oklch(89% 0.11 83)	color(display-p3 0.97 0.85 0.57)

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

#800000

AAA - 10.94



#c02900

AA - 5.9



#ffffff

AA - 1



#ffd686

AA - 1.38



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(37.7% 0.135 0.075), oklab(52.6% 0.159 0.106), oklab(100% 0 0), oklab(89.4% 0.013 0.108))

Fallback colors



background: linear-gradient(45deg, #800000, #c02900, #ffffff, #ffd686)

Colors



<!-- Primary Colors -->
<color name="santa_claus_color_10">#800000</color>
<color name="santa_claus_color_20">#c02900</color>
<color name="santa_claus_color_30">#ffffff</color>
<color name="santa_claus_color_40">#ffd686</color>

PWA prompt