Christmas Day

#57001b

#a60024

#ffffff

#017805

#004f03

Actions

Explore the palette in different formats, and actions.

Colors overview

Red

Green

White

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#57001b	rgb(87, 0, 27)	hsl(340 100% 17%)	oklab(29% 0.11 0.03)	oklch(29% 0.12 13)	color(display-p3 0.31 0.04 0.11)
	#a60024	rgb(166, 0, 36)	hsl(350 100% 33%)	oklab(46% 0.17 0.07)	oklch(46% 0.18 22)	color(display-p3 0.6 0.12 0.16)
	#ffffff	rgb(255, 255, 255)	hsl(none 0% 100%)	oklab(100% 0 0)	oklch(100% 0 none)	color(display-p3 1 1 1)
	#017805	rgb(1, 120, 5)	hsl(120 98% 24%)	oklab(50% -0.13 0.1)	oklch(50% 0.17 140)	color(display-p3 0.2 0.46 0.13)
	#004f03	rgb(0, 79, 3)	hsl(120 100% 15%)	oklab(37% -0.1 0.07)	oklch(37% 0.12 140)	color(display-p3 0.12 0.3 0.07)

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

#57001b

AAA - 14.77



#a60024

AAA - 7.93



#ffffff

AA - 1



#017805

AA - 5.69



#004f03

AAA - 9.9



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(29.1% 0.114 0.025), oklab(45.8% 0.171 0.068), oklab(100% 0 0), oklab(49.6% -0.133 0.101), oklab(37.1% -0.099 0.075))

Fallback colors



background: linear-gradient(45deg, #57001b, #a60024, #ffffff, #017805, #004f03)

Colors



<!-- Primary Colors -->
<color name="christmas_day_color_10">#57001b</color>
<color name="christmas_day_color_20">#a60024</color>
<color name="christmas_day_color_30">#ffffff</color>
<color name="christmas_day_color_40">#017805</color>
<color name="christmas_day_color_50">#004f03</color>

PWA prompt