#ffdfce

#fde1d1

#fcd4c9

#fac6be

Pastel



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



HDR gradient

Switch to HDR to enhance the gradient



Quick view

Inspect colors in multiple color spaces

Colors overview

Pink

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#ffdfce	rgb(255, 223, 206)	hsl(21 100% 90%)	hwb(21 81% 0%)	lch(91.2 15.8 53.1)	lab(91.2 9.49 12.6)	cmyk 0%, 13%, 19%, 0%
	#fde1d1	rgb(253, 225, 209)	hsl(22 92% 91%)	hwb(22 82% 0.78%)	lch(91.5 14.1 55)	lab(91.5 8.11 11.6)	cmyk 0%, 11%, 17%, 1%
	#fcd4c9	rgb(252, 212, 201)	hsl(13 89% 89%)	hwb(13 79% 1.2%)	lch(88.2 17.2 39.6)	lab(88.2 13.2 11)	cmyk 0%, 16%, 20%, 1%
	#fac6be	rgb(250, 198, 190)	hsl(8 86% 86%)	hwb(8 75% 2%)	lch(84.4 21.5 32.2)	lab(84.4 18.2 11.5)	cmyk 0%, 21%, 24%, 2%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#ffdfce

AA - 1.25



#fde1d1

AA - 1.24



#fcd4c9

AA - 1.36



#fac6be

AA - 1.51



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(92.6% 0.027 0.032), oklab(92.8% 0.023 0.03), oklab(90.1% 0.039 0.028), oklab(87% 0.053 0.029))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #ffdfce, #fde1d1, #fcd4c9, #fac6be)

Colors



<!-- Primary Colors -->
<color name="pastel_color_10">#ffdfce</color>
<color name="pastel_color_20">#fde1d1</color>
<color name="pastel_color_30">#fcd4c9</color>
<color name="pastel_color_40">#fac6be</color>

Gradient PRO

Pro feature only

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

PWA prompt