#D5D1CE

#B6B1AE

#8A8785

#5A5553

Cloudy

Actions

Explore the gradient in different formats, and actions.

Colors overview

Grey

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#d5d1ce	rgb(213, 209, 206)	hsl(26 7.7% 82%)	hwb(26 81% 16%)	lch(84.1 2.25 62.9)	lab(84.1 1.03 2)	cmyk 0%, 2%, 3%, 16%
	#b6b1ae	rgb(182, 177, 174)	hsl(22 5.2% 70%)	hwb(22 68% 29%)	lch(72.6 2.63 57)	lab(72.6 1.43 2.2)	cmyk 0%, 3%, 4%, 29%
	#8a8785	rgb(138, 135, 133)	hsl(24 2.1% 53%)	hwb(24 52% 46%)	lch(56.5 1.73 59.8)	lab(56.5 0.871 1.49)	cmyk 0%, 2%, 4%, 46%
	#5a5553	rgb(90, 85, 83)	hsl(17 4% 34%)	hwb(17 33% 65%)	lch(36.6 2.64 47.1)	lab(36.6 1.8 1.94)	cmyk 0%, 6%, 8%, 65%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#D5D1CE

AA - 1.51



#B6B1AE

AA - 2.12



#8A8785

AA - 3.56



#5A5553

AAA - 7.34



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(86.3% 0.003 0.005), oklab(76.4% 0.004 0.006), oklab(62.5% 0.003 0.004), oklab(45.4% 0.005 0.005))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #D5D1CE, #B6B1AE, #8A8785, #5A5553)

Colors



<!-- Primary Colors -->
<color name="cloudy_color_10">#D5D1CE</color>
<color name="cloudy_color_20">#B6B1AE</color>
<color name="cloudy_color_30">#8A8785</color>
<color name="cloudy_color_40">#5A5553</color>

Gradient PRO

Pro feature only

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

PWA prompt