Christmas

#008000

#DC143C

#FFD700

#8B4513

Actions

Explore the palette in different formats, and actions.

Colors overview

Green

Red

Yellow

Brown

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#008000	rgb(0, 128, 0)	hsl(120 100% 25%)	oklab(52% -0.14 0.11)	oklch(52% 0.18 140)	color(display-p3 0.22 0.49 0.13)
	#dc143c	rgb(220, 20, 60)	hsl(350 83% 47%)	oklab(57% 0.21 0.08)	oklch(57% 0.22 20)	color(display-p3 0.79 0.19 0.26)
	#ffd700	rgb(255, 215, 0)	hsl(51 100% 50%)	oklab(89% -0.02 0.18)	oklch(89% 0.18 95)	color(display-p3 0.97 0.85 0.29)
	#8b4513	rgb(139, 69, 19)	hsl(25 76% 31%)	oklab(47% 0.07 0.09)	oklch(47% 0.11 51)	color(display-p3 0.51 0.29 0.13)

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

#008000

AA - 5.13



#DC143C

AA - 4.98



#FFD700

AA - 1.4



#8B4513

AAA - 7.09



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% -0.14 0.108), oklab(57.1% 0.208 0.076), oklab(88.7% -0.017 0.181), oklab(47.1% 0.071 0.087))

Fallback colors



background: linear-gradient(45deg, #008000, #DC143C, #FFD700, #8B4513)

Colors



<!-- Primary Colors -->
<color name="christmas_color_10">#008000</color>
<color name="christmas_color_20">#DC143C</color>
<color name="christmas_color_30">#FFD700</color>
<color name="christmas_color_40">#8B4513</color>

PWA prompt