Complement

#f78e9a

#fcd5da

#f8fade

#d5e9fc

#8ec4f7

#f78e9a

#fcd5da

#f8fade

#d5e9fc

#8ec4f7

Colors overview

Blue

Red

Yellow

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#f78e9a	rgb(247, 142, 154)	hsl(350 87% 76%)	hwb(350 56% 3.1%)	lch(70.9 43.3 16.1)	lab(70.9 41.6 12)	cmyk 0%, 43%, 38%, 3%
	#fcd5da	rgb(252, 213, 218)	hsl(350 87% 91%)	hwb(350 84% 1.2%)	lch(88.7 14.9 11.1)	lab(88.7 14.6 2.87)	cmyk 0%, 15%, 13%, 1%
	#f8fade	rgb(248, 250, 222)	hsl(64 74% 93%)	hwb(64 87% 2%)	lch(97.6 13.9 107)	lab(97.6 -4.17 13.3)	cmyk 1%, 0%, 11%, 2%
	#d5e9fc	rgb(213, 233, 252)	hsl(210 87% 91%)	hwb(210 84% 1.2%)	lch(91.3 12.3 251)	lab(91.3 -4.01 -11.6)	cmyk 15%, 8%, 0%, 1%
	#8ec4f7	rgb(142, 196, 247)	hsl(210 87% 76%)	hwb(210 56% 3.1%)	lch(76.8 32.3 255)	lab(76.8 -8.37 -31.2)	cmyk 43%, 21%, 0%, 3%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#f78e9a

AA - 2.26



#fcd5da

AA - 1.34



#f8fade

AA - 1.06



#d5e9fc

AA - 1.24



#8ec4f7

AA - 1.84



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(76.1% 0.124 0.029), oklab(90.7% 0.043 0.007), oklab(97.6% -0.013 0.034), oklab(92.5% -0.013 -0.031), oklab(80.2% -0.035 -0.085))

Fallback colors New



background: linear-gradient(45deg, #f78e9a, #fcd5da, #f8fade, #d5e9fc, #8ec4f7)

Colors



<resources>
    <color name="complement_100">#f78e9a</color>
    <color name="complement_200">#fcd5da</color>
    <color name="complement_300">#f8fade</color>
    <color name="complement_400">#d5e9fc</color>
    <color name="complement_500">#8ec4f7</color>
</resources>

PWA prompt