#F2D7EE

#D1A9C2

#B68299

#9B5B70

Bloom

Actions

Explore the gradient in different formats, and actions.

Colors overview

Pink

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#f2d7ee	rgb(242, 215, 238)	hsl(310 51% 90%)	hwb(310 84% 5.1%)	lch(88.8 14.7 328)	lab(88.8 12.6 -7.71)	cmyk 0%, 11%, 2%, 5%
	#d1a9c2	rgb(209, 169, 194)	hsl(320 30% 74%)	hwb(320 66% 18%)	lch(73.5 19.4 339)	lab(73.5 18.1 -7)	cmyk 0%, 19%, 7%, 18%
	#b68299	rgb(182, 130, 153)	hsl(330 26% 61%)	hwb(330 51% 29%)	lch(60.2 23.6 350)	lab(60.2 23.2 -3.96)	cmyk 0%, 29%, 16%, 29%
	#9b5b70	rgb(155, 91, 112)	hsl(340 26% 48%)	hwb(340 36% 39%)	lch(46.7 28.9 360)	lab(46.7 28.9 -0.074)	cmyk 0%, 41%, 28%, 39%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#F2D7EE

AA - 1.33



#D1A9C2

AA - 2.06



#B68299

AA - 3.16



#9B5B70

AA - 5.09



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.8% 0.037 -0.021), oklab(77.8% 0.054 -0.019), oklab(66.5% 0.07 -0.011), oklab(55% 0.088 -0.001))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #F2D7EE, #D1A9C2, #B68299, #9B5B70)

Colors



<!-- Primary Colors -->
<color name="bloom_color_10">#F2D7EE</color>
<color name="bloom_color_20">#D1A9C2</color>
<color name="bloom_color_30">#B68299</color>
<color name="bloom_color_40">#9B5B70</color>

Gradient PRO

Pro feature only

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

PWA prompt