Colorfulness

#ff1d55

#f75999

#fff686

#00ddf2

#0049b6

Actions

Explore the palette in different formats, and actions.

Colors overview

Red

Blue

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#ff1d55	rgb(255, 29, 85)	hsl(350 100% 56%)	hwb(350 11% 0%)	lch(55.8 85.7 21.8)	lab(55.8 79.6 31.9)	cmyk 0%, 89%, 67%, 0%
	#f75999	rgb(247, 89, 153)	hsl(340 91% 66%)	hwb(340 35% 3.1%)	lch(61.5 65 359)	lab(61.5 65 -0.783)	cmyk 0%, 64%, 38%, 3%
	#fff686	rgb(255, 246, 134)	hsl(56 100% 76%)	hwb(56 53% 0%)	lch(95.9 55 98)	lab(95.9 -7.63 54.5)	cmyk 0%, 4%, 47%, 0%
	#00ddf2	rgb(0, 221, 242)	hsl(190 100% 47%)	hwb(190 0% 5.1%)	lch(80.3 46.9 210)	lab(80.3 -40.5 -23.7)	cmyk 100%, 9%, 0%, 5%
	#0049b6	rgb(0, 73, 182)	hsl(220 100% 36%)	hwb(220 0% 29%)	lch(33.2 66.4 285)	lab(33.2 17.1 -64.1)	cmyk 100%, 60%, 0%, 29%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#ff1d55

AA - 3.77



#f75999

AA - 3.06



#fff686

AA - 1.11



#00ddf2

AA - 1.66



#0049b6

AAA - 7.98



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(64.2% 0.236 0.07), oklab(69% 0.2 -0.004), oklab(95.7% -0.034 0.13), oklab(82% -0.125 -0.064), oklab(44.2% -0.031 -0.181))

Fallback colors



background: linear-gradient(45deg, #ff1d55, #f75999, #fff686, #00ddf2, #0049b6)

Colors



<!-- Primary Colors -->
<color name="colorfulness_color_10">#ff1d55</color>
<color name="colorfulness_color_20">#f75999</color>
<color name="colorfulness_color_30">#fff686</color>
<color name="colorfulness_color_40">#00ddf2</color>
<color name="colorfulness_color_50">#0049b6</color>

PWA prompt