Build Color Gradient

 #f9cfc9

 #ddffc8

 #e3fdf7

Colors overview

 Green

 Cyan

 Pink

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#f9cfc9	rgb(249, 207, 201)	hsl(7.5 80% 88%)	hwb(7.5 79% 2.4%)	lch(86.7 17 31.2)	lab(86.7 14.6 8.82)	cmyk 0%, 17%, 19%, 2%
	#ddffc8	rgb(221, 255, 200)	hsl(97 100% 89%)	hwb(97 78% 0%)	lch(96.5 29.2 129)	lab(96.5 -18.5 22.6)	cmyk 13%, 0%, 22%, 0%
	#e3fdf7	rgb(227, 253, 247)	hsl(170 87% 94%)	hwb(170 89% 0.78%)	lch(97.3 9.58 181)	lab(97.3 -9.58 -0.144)	cmyk 10%, 0%, 2%, 1%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#f9cfc9

AA - 1.41



#ddffc8

AA - 1.09



#e3fdf7

AA - 1.06



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.



32°

CPU



48°

GPU



100%

Usage



11°

Rain



70%

Storage

HDR space

HDR oklab colors New



--angle: 45deg; 
 background: linear-gradient(var(--angle), oklab(88.9% 0.043 0.022), oklab(96.2% -0.055 0.058), oklab(97.4% -0.028 0))

Fallback colors New



--angle: 45deg; 
 background: linear-gradient(var(--angle), #f9cfc9, #ddffc8, #e3fdf7)

Colors



<resources>
    <color name="build_100">#f9cfc9</color>
    <color name="build_200">#ddffc8</color>
    <color name="build_300">#e3fdf7</color>
</resources>

Gradient PRO

Pro feature only

Get access to all app tokens, export files, and more.

PWA prompt