Happiness

#013ff9

#ff426c

#ffb100

#ffbdbd

#e6f1ff

Actions

Explore the palette in different formats, and actions.

Colors overview

Blue

Red

Yellow

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#013ff9	rgb(1, 63, 249)	hsl(230 99% 49%)	hwb(230 0.39% 2.4%)	lch(36.6 107 295)	lab(36.6 45.1 -97)	cmyk 100%, 75%, 0%, 2%
	#ff426c	rgb(255, 66, 108)	hsl(350 100% 63%)	hwb(350 26% 0%)	lch(59 75.8 17.2)	lab(59 72.4 22.4)	cmyk 0%, 74%, 58%, 0%
	#ffb100	rgb(255, 177, 0)	hsl(42 100% 50%)	hwb(42 0% 0%)	lch(78.3 83.6 75.1)	lab(78.3 21.6 80.8)	cmyk 0%, 31%, 100%, 0%
	#ffbdbd	rgb(255, 189, 189)	hsl(0 100% 87%)	hwb(0 74% 0%)	lch(82.8 26.4 21.9)	lab(82.8 24.5 9.83)	cmyk 0%, 26%, 26%, 0%
	#e6f1ff	rgb(230, 241, 255)	hsl(210 100% 95%)	hwb(210 90% 0%)	lch(94.6 8.28 258)	lab(94.6 -1.79 -8.09)	cmyk 10%, 5%, 0%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#013ff9

AA - 6.81



#ff426c

AA - 3.36



#ffb100

AA - 1.81



#ffbdbd

AA - 1.58



#e6f1ff

AA - 1.14



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(49.3% -0.029 -0.273), oklab(66.9% 0.217 0.051), oklab(81.4% 0.039 0.166), oklab(85.9% 0.072 0.025), oklab(95.4% -0.006 -0.021))

Fallback colors



background: linear-gradient(45deg, #013ff9, #ff426c, #ffb100, #ffbdbd, #e6f1ff)

Colors



<!-- Primary Colors -->
<color name="happiness_color_10">#013ff9</color>
<color name="happiness_color_20">#ff426c</color>
<color name="happiness_color_30">#ffb100</color>
<color name="happiness_color_40">#ffbdbd</color>
<color name="happiness_color_50">#e6f1ff</color>

PWA prompt