Happy Color Palette

#0D004D

#006699

#FFD366

#800000

#0D004D

#006699

#FFD366

#800000

Colors overview

Blue

Red

Yellow

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#0d004d	rgb(13, 0, 77)	hsl(250 100% 15%)	hwb(250 0% 70%)	lch(4.87 51.8 302)	lab(4.87 27.1 -44.1)	cmyk 83%, 100%, 0%, 70%
	#006699	rgb(0, 102, 153)	hsl(200 100% 30%)	hwb(200 0% 40%)	lch(40.3 37 253)	lab(40.3 -10.5 -35.4)	cmyk 100%, 33%, 0%, 40%
	#ffd366	rgb(255, 211, 102)	hsl(43 100% 70%)	hwb(43 40% 0%)	lch(86.9 59.2 83)	lab(86.9 7.21 58.8)	cmyk 0%, 17%, 60%, 0%
	#800000	rgb(128, 0, 0)	hsl(0 100% 25%)	hwb(0 0% 50%)	lch(26.2 62.5 39.1)	lab(26.2 48.5 39.4)	cmyk 0%, 100%, 100%, 50%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#0D004D

AAA - 18.67



#006699

AA - 6.24



#FFD366

AA - 1.42



#800000

AAA - 10.94



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 space

HDR oklab colors New



background: linear-gradient(45deg, oklab(20% 0.01 -0.126), oklab(48.7% -0.055 -0.099), oklab(88.4% 0.006 0.136), oklab(37.7% 0.135 0.075))

Fallback colors New



background: linear-gradient(45deg, #0D004D, #006699, #FFD366, #800000)

Colors



<resources>
    <color name="happy_100">#0D004D</color>
    <color name="happy_200">#006699</color>
    <color name="happy_300">#FFD366</color>
    <color name="happy_400">#800000</color>
</resources>

PWA prompt