#e3fdff

#bdfcff

#85f7ff

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

White

Cyan

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#e3fdff	rgb(227, 253, 255)	hsl(180 100% 95%)	hwb(180 89% 0%)	lch(97.5 9.33 205)	lab(97.5 -8.44 -3.98)	cmyk 11%, 1%, 0%, 0%
	#bdfcff	rgb(189, 252, 255)	hsl(180 100% 87%)	hwb(180 74% 0%)	lch(94.8 21.5 202)	lab(94.8 -19.9 -8.18)	cmyk 26%, 1%, 0%, 0%
	#85f7ff	rgb(133, 247, 255)	hsl(180 100% 76%)	hwb(180 52% 0%)	lch(90.8 35.6 204)	lab(90.8 -32.5 -14.5)	cmyk 48%, 3%, 0%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#e3fdff

AA - 1.06



#bdfcff

AA - 1.13



#85f7ff

AA - 1.25



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(97.6% -0.025 -0.01), oklab(95% -0.059 -0.021), oklab(91.2% -0.097 -0.038))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #e3fdff, #bdfcff, #85f7ff)

Colors



<!-- Primary Colors -->
<color name="winter_color_10">#e3fdff</color>
<color name="winter_color_20">#bdfcff</color>
<color name="winter_color_30">#85f7ff</color>

Gradient PRO

Pro feature only

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

PWA prompt