Holiday

#ffc4c4

#fc7272

#5c0000

#330101



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



Quick view

Inspect colors in multiple color spaces

Colors overview

Red

Pink

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#ffc4c4	rgb(255, 196, 196)	hsl(0 100% 88%)	hwb(0 77% 0%)	lch(84.6 23.3 21.6)	lab(84.6 21.7 8.59)	cmyk 0%, 23%, 23%, 0%
	#fc7272	rgb(252, 114, 114)	hsl(0 96% 72%)	hwb(0 45% 1.2%)	lch(65.5 60.3 26.9)	lab(65.5 53.7 27.3)	cmyk 0%, 55%, 55%, 1%
	#5c0000	rgb(92, 0, 0)	hsl(0 100% 18%)	hwb(0 0% 64%)	lch(17.4 47 35.3)	lab(17.4 38.4 27.1)	cmyk 0%, 100%, 100%, 64%
	#330101	rgb(51, 1, 1)	hsl(0 96% 10%)	hwb(0 0.39% 80%)	lch(6.87 27.2 22.7)	lab(6.87 25.1 10.5)	cmyk 0%, 98%, 98%, 80%

 Click a color format to copy to your clipboard.

Contrast ratios checker

Click one color card to view the complete contrast checker tests.

#ffc4c4

AA - 1.5



#fc7272

AA - 2.69



#5c0000

AAA - 14.43



#330101

AAA - 18.33



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(87.3% 0.064 0.022), oklab(71.8% 0.157 0.064), oklab(29.8% 0.107 0.06), oklab(20.4% 0.071 0.039))

Fallback colors



background: linear-gradient(45deg, #ffc4c4, #fc7272, #5c0000, #330101)

Colors



<!-- Primary Colors -->
<color name="holiday_color_10">#ffc4c4</color>
<color name="holiday_color_20">#fc7272</color>
<color name="holiday_color_30">#5c0000</color>
<color name="holiday_color_40">#330101</color>

PWA prompt