Fade Color Gradient

 #FFD1DC

 #FFB6C1

 #FF99A2

 #FF7F87

Colors overview

Red

Pink

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#ffd1dc	rgb(255, 209, 220)	hsl(350 100% 91%)	hwb(350 82% 0%)	lch(88.1 17.9 3.1)	lab(88.1 17.9 0.97)	cmyk 0%, 18%, 14%, 0%
	#ffb6c1	rgb(255, 182, 193)	hsl(350 100% 86%)	hwb(350 71% 0%)	lch(81.3 28.9 11.1)	lab(81.3 28.4 5.56)	cmyk 0%, 29%, 24%, 0%
	#ff99a2	rgb(255, 153, 162)	hsl(350 100% 80%)	hwb(350 60% 0%)	lch(74.4 41.8 17.6)	lab(74.4 39.8 12.6)	cmyk 0%, 40%, 36%, 0%
	#ff7f87	rgb(255, 127, 135)	hsl(360 100% 75%)	hwb(360 50% 0%)	lch(68.7 53.9 21.5)	lab(68.7 50.2 19.8)	cmyk 0%, 50%, 47%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#FFD1DC

AA - 1.36



#FFB6C1

AA - 1.65



#FF99A2

AA - 2.03



#FF7F87

AA - 2.43



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 color space

HDR oklab colors



--angle: 45deg; 
background: linear-gradient(var(--angle), oklab(90.3% 0.053 0.002), oklab(84.7% 0.085 0.014), oklab(79.1% 0.118 0.031), oklab(74.5% 0.148 0.047))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #FFD1DC, #FFB6C1, #FF99A2, #FF7F87)

Colors



<!-- Primary Colors -->
<color name="fade_color_10">#FFD1DC</color>
<color name="fade_color_20">#FFB6C1</color>
<color name="fade_color_30">#FF99A2</color>
<color name="fade_color_40">#FF7F87</color>

Gradient PRO

Pro feature only

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

PWA prompt