#F7B7A3

#EBBAB9

#F2D8D8

#F0EAD6

Blossom

Actions

Explore the gradient in different formats, and actions.

Colors overview

Pink

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#f7b7a3	rgb(247, 183, 163)	hsl(14 84% 80%)	hwb(14 64% 3.1%)	lch(80.1 29.6 42)	lab(80.1 22 19.8)	cmyk 0%, 26%, 34%, 3%
	#ebbab9	rgb(235, 186, 185)	hsl(1.2 56% 82%)	hwb(1.2 73% 7.8%)	lch(80 19.6 22.8)	lab(80 18.1 7.61)	cmyk 0%, 21%, 21%, 8%
	#f2d8d8	rgb(242, 216, 216)	hsl(0 50% 90%)	hwb(0 85% 5.1%)	lch(88.5 9.92 20.4)	lab(88.5 9.3 3.46)	cmyk 0%, 11%, 11%, 5%
	#f0ead6	rgb(240, 234, 214)	hsl(46 46% 89%)	hwb(46 84% 5.9%)	lch(92.8 10.5 92.1)	lab(92.8 -0.386 10.5)	cmyk 0%, 3%, 11%, 6%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#F7B7A3

AA - 1.71



#EBBAB9

AA - 1.71



#F2D8D8

AA - 1.34



#F0EAD6

AA - 1.2



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(83.3% 0.063 0.049), oklab(83.2% 0.053 0.019), oklab(90.4% 0.028 0.009), oklab(93.6% -0.001 0.027))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #F7B7A3, #EBBAB9, #F2D8D8, #F0EAD6)

Colors



<!-- Primary Colors -->
<color name="blossom_color_10">#F7B7A3</color>
<color name="blossom_color_20">#EBBAB9</color>
<color name="blossom_color_30">#F2D8D8</color>
<color name="blossom_color_40">#F0EAD6</color>

Gradient PRO

Pro feature only

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

PWA prompt