#dbb2d6

#d9bfb2

#b9f0e1

Watermelon

Actions

Explore the gradient in different formats, and actions.

Colors overview

Red

Orange

Green

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#dbb2d6	rgb(219, 178, 214)	hsl(310 36% 78%)	hwb(310 70% 14%)	lch(77.1 23.3 328)	lab(77.1 19.8 -12.3)	cmyk 0%, 19%, 2%, 14%
	#d9bfb2	rgb(217, 191, 178)	hsl(20 34% 77%)	hwb(20 70% 15%)	lch(79.3 12.9 51.7)	lab(79.3 8 10.1)	cmyk 0%, 12%, 18%, 15%
	#b9f0e1	rgb(185, 240, 225)	hsl(160 65% 83%)	hwb(160 73% 5.9%)	lch(90.7 20.5 176)	lab(90.7 -20.4 1.26)	cmyk 23%, 0%, 6%, 6%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#dbb2d6

AA - 1.85



#d9bfb2

AA - 1.74



#b9f0e1

AA - 1.26



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(81.1% 0.058 -0.033), oklab(82.3% 0.023 0.026), oklab(91.3% -0.059 0.004))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #dbb2d6, #d9bfb2, #b9f0e1)

Colors



<!-- Primary Colors -->
<color name="watermelon_color_10">#dbb2d6</color>
<color name="watermelon_color_20">#d9bfb2</color>
<color name="watermelon_color_30">#b9f0e1</color>

Gradient PRO

Pro feature only

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

PWA prompt