#D7E4F4

#B4D1E7

#91BEDA

Winter



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



HDR gradient

Switch to HDR to enhance the gradient



Quick view

Inspect colors in multiple color spaces

Colors overview

Cyan

White

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#d7e4f4	rgb(215, 228, 244)	hsl(210 57% 90%)	hwb(210 84% 4.3%)	lch(90 9.62 257)	lab(90 -2.17 -9.38)	cmyk 12%, 7%, 0%, 4%
	#b4d1e7	rgb(180, 209, 231)	hsl(210 52% 81%)	hwb(210 71% 9.4%)	lch(82.2 15.7 246)	lab(82.2 -6.48 -14.3)	cmyk 22%, 10%, 0%, 9%
	#91beda	rgb(145, 190, 218)	hsl(200 50% 71%)	hwb(200 57% 15%)	lch(74.5 21.8 242)	lab(74.5 -10.4 -19.2)	cmyk 33%, 13%, 0%, 15%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#D7E4F4

AA - 1.28



#B4D1E7

AA - 1.58



#91BEDA

AA - 1.98



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(91.4% -0.007 -0.025), oklab(84.6% -0.021 -0.038), oklab(77.9% -0.035 -0.052))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #D7E4F4, #B4D1E7, #91BEDA)

Colors



<!-- Primary Colors -->
<color name="winter_color_10">#D7E4F4</color>
<color name="winter_color_20">#B4D1E7</color>
<color name="winter_color_30">#91BEDA</color>

Gradient PRO

Pro feature only

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

PWA prompt