Overcast

Actions

Explore the gradient in different formats, and actions.

Blue

Grey

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK	Color schemes
	#c3eafa	rgb(195, 234, 250)	hsl(200 85% 87%)	hwb(200 76% 2%)	lch(90.3 16.1 229)	lab(90.3 -10.6 -12.2)	cmyk 22%, 6%, 0%, 2%
	#cacbcc	rgb(202, 203, 204)	hsl(210 1.9% 80%)	hwb(210 79% 20%)	lch(81.6 0.664 251)	lab(81.6 -0.219 -0.627)	cmyk 1%, 0%, 0%, 20%

 Click a color format to copy to your clipboard.

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

#c3eafa

AA - 1.27



#cacbcc

AA - 1.62



The simulation of color blindness may not be 100% accurate sometimes.

Colors preview as gradient with protanopia

Colors preview as palette with protanopia

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(91.4% -0.033 -0.032), oklab(84.2% -0.001 -0.002))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #c3eafa, #cacbcc)

Colors



<!-- Primary Colors -->
<color name="overcast_color_10">#c3eafa</color>
<color name="overcast_color_20">#cacbcc</color>

Gradient PRO

Pro feature only

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

PWA prompt