Happiness

#013ff9

#ff426c

#ffb100

#ffbdbd

#e6f1ff

Actions

Explore the palette in different formats, and actions.

Colors overview

Blue

Red

Yellow

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#013ff9	rgb(1, 63, 249)	hsl(230 99% 49%)	oklab(49% -0.03 -0.27)	oklch(49% 0.27 260)	color(display-p3 0.09 0.24 0.94)
	#ff426c	rgb(255, 66, 108)	hsl(350 100% 63%)	oklab(67% 0.22 0.05)	oklch(67% 0.22 13)	color(display-p3 0.92 0.32 0.43)
	#ffb100	rgb(255, 177, 0)	hsl(42 100% 50%)	oklab(81% 0.04 0.17)	oklch(81% 0.17 77)	color(display-p3 0.95 0.71 0.25)
	#ffbdbd	rgb(255, 189, 189)	hsl(0 100% 87%)	oklab(86% 0.07 0.02)	oklch(86% 0.08 19)	color(display-p3 0.96 0.75 0.75)
	#e6f1ff	rgb(230, 241, 255)	hsl(210 100% 95%)	oklab(95% -0.01 -0.02)	oklch(95% 0.02 250)	color(display-p3 0.91 0.94 0.99)

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

#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