#fafafa

#f0f8ff

#d1e9f6

#b3d3ed

#95c4e5

Rain

Actions

Explore the gradient in different formats, and actions.

Colors overview

Blue

White

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#fafafa	rgb(250, 250, 250)	hsl(none 0% 98%)	hwb(none 98% 2%)	lch(98.3 0 none)	lab(98.3 0 0)	cmyk 0%, 0%, 0%, 2%
	#f0f8ff	rgb(240, 248, 255)	hsl(210 100% 97%)	hwb(210 94% 0%)	lch(97.1 4.68 248)	lab(97.1 -1.77 -4.33)	cmyk 6%, 3%, 0%, 0%
	#d1e9f6	rgb(209, 233, 246)	hsl(200 67% 89%)	hwb(200 82% 3.5%)	lch(90.9 11.1 236)	lab(90.9 -6.24 -9.15)	cmyk 15%, 5%, 0%, 4%
	#b3d3ed	rgb(179, 211, 237)	hsl(210 62% 82%)	hwb(210 70% 7.1%)	lch(82.8 17.9 248)	lab(82.8 -6.75 -16.6)	cmyk 24%, 11%, 0%, 7%
	#95c4e5	rgb(149, 196, 229)	hsl(200 61% 74%)	hwb(200 58% 10%)	lch(76.7 24 245)	lab(76.7 -10 -21.8)	cmyk 35%, 14%, 0%, 10%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#fafafa

AA - 1.04



#f0f8ff

AA - 1.07



#d1e9f6

AA - 1.25



#b3d3ed

AA - 1.56



#95c4e5

AA - 1.85



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: 135deg; 
background: linear-gradient(var(--angle), oklab(98.5% 0 0), oklab(97.5% -0.006 -0.011), oklab(92% -0.019 -0.024), oklab(85.2% -0.023 -0.044), oklab(79.9% -0.035 -0.059))

Fallback colors



--angle: 135deg; 
background: linear-gradient(var(--angle), #fafafa, #f0f8ff, #d1e9f6, #b3d3ed, #95c4e5)

Colors



<!-- Primary Colors -->
<color name="rain_color_10">#fafafa</color>
<color name="rain_color_20">#f0f8ff</color>
<color name="rain_color_30">#d1e9f6</color>
<color name="rain_color_40">#b3d3ed</color>
<color name="rain_color_50">#95c4e5</color>

Gradient PRO

Pro feature only

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

PWA prompt