Colorfulness

#ff1d55

#f75999

#fff686

#00ddf2

#0049b6

Actions

Explore the palette in different formats, and actions.

Colors overview

Red

Blue

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#ff1d55	rgb(255, 29, 85)	hsl(350 100% 56%)	oklab(64% 0.24 0.07)	oklch(64% 0.25 17)	color(display-p3 0.92 0.23 0.35)
	#f75999	rgb(247, 89, 153)	hsl(340 91% 66%)	oklab(69% 0.2 0)	oklch(69% 0.2 360)	color(display-p3 0.9 0.39 0.6)
	#fff686	rgb(255, 246, 134)	hsl(56 100% 76%)	oklab(96% -0.03 0.13)	oklch(96% 0.13 100)	color(display-p3 0.99 0.97 0.58)
	#00ddf2	rgb(0, 221, 242)	hsl(190 100% 47%)	oklab(82% -0.13 -0.06)	oklch(82% 0.14 210)	color(display-p3 0.39 0.85 0.94)
	#0049b6	rgb(0, 73, 182)	hsl(220 100% 36%)	oklab(44% -0.03 -0.18)	oklch(44% 0.18 260)	color(display-p3 0.11 0.28 0.69)

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

#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