#d2e3f0

#c1d9e9

#aed0e2

#9ab7d9

#889eb7

Mist

Actions

Explore the gradient in different formats, and actions.

Colors overview

Grey

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#d2e3f0	rgb(210, 227, 240)	hsl(210 50% 88%)	hwb(210 82% 5.9%)	lch(89.2 9.28 245)	lab(89.2 -3.95 -8.39)	cmyk 13%, 5%, 0%, 6%
	#c1d9e9	rgb(193, 217, 233)	hsl(200 48% 84%)	hwb(200 76% 8.6%)	lch(85.3 12.2 242)	lab(85.3 -5.82 -10.7)	cmyk 17%, 7%, 0%, 9%
	#aed0e2	rgb(174, 208, 226)	hsl(200 47% 78%)	hwb(200 68% 11%)	lch(81.4 15.6 236)	lab(81.4 -8.75 -12.9)	cmyk 23%, 8%, 0%, 11%
	#9ab7d9	rgb(154, 183, 217)	hsl(210 45% 73%)	hwb(210 60% 15%)	lch(73.1 21.1 258)	lab(73.1 -4.34 -20.6)	cmyk 29%, 16%, 0%, 15%
	#889eb7	rgb(136, 158, 183)	hsl(210 25% 63%)	hwb(210 53% 28%)	lch(64 16.2 257)	lab(64 -3.69 -15.7)	cmyk 26%, 14%, 0%, 28%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#d2e3f0

AA - 1.31



#c1d9e9

AA - 1.46



#aed0e2

AA - 1.62



#9ab7d9

AA - 2.06



#889eb7

AA - 2.75



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.7% -0.012 -0.022), oklab(87.2% -0.018 -0.028), oklab(83.9% -0.028 -0.034), oklab(77% -0.017 -0.056), oklab(69.1% -0.014 -0.042))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #d2e3f0, #c1d9e9, #aed0e2, #9ab7d9, #889eb7)

Colors



<!-- Primary Colors -->
<color name="mist_color_10">#d2e3f0</color>
<color name="mist_color_20">#c1d9e9</color>
<color name="mist_color_30">#aed0e2</color>
<color name="mist_color_40">#9ab7d9</color>
<color name="mist_color_50">#889eb7</color>

Gradient PRO

Pro feature only

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

PWA prompt