#4D4D4D

#8B8B93

#ffffff

#DAE5FF

#9EA5FF

Winter

#4D4D4D

#8B8B93

#ffffff

#DAE5FF

#9EA5FF



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



Quick view

Inspect colors in multiple color spaces

Colors overview

White

Blue

Grey

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#4d4d4d	rgb(77, 77, 77)	hsl(none 0% 30%)	hwb(none 30% 70%)	lch(32.7 0 none)	lab(32.7 0 0)	cmyk 0%, 0%, 0%, 70%
	#8b8b93	rgb(139, 139, 147)	hsl(240 3.6% 56%)	hwb(240 55% 42%)	lch(58.1 4.44 286)	lab(58.1 1.2 -4.28)	cmyk 5%, 5%, 0%, 42%
	#ffffff	rgb(255, 255, 255)	hsl(none 0% 100%)	hwb(none 100% 0%)	lch(100 0 none)	lab(100 0 0)	cmyk 0%, 0%, 0%, 0%
	#dae5ff	rgb(218, 229, 255)	hsl(220 100% 93%)	hwb(220 85% 0%)	lch(90.7 14 270)	lab(90.7 0.012 -14)	cmyk 15%, 10%, 0%, 0%
	#9ea5ff	rgb(158, 165, 255)	hsl(240 100% 81%)	hwb(240 62% 0%)	lch(69.9 48.1 287)	lab(69.9 13.7 -46.1)	cmyk 38%, 35%, 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.

#4D4D4D

AAA - 8.45



#8B8B93

AA - 3.38



#ffffff

AA - 1



#DAE5FF

AA - 1.26



#9EA5FF

AA - 2.26



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.

HDR color space

HDR oklab colors



background: linear-gradient(45deg, oklab(42% 0 0), oklab(63.9% 0.003 -0.011), oklab(100% 0 0), oklab(92.2% -0.002 -0.037), oklab(75.2% 0.021 -0.127))

Fallback colors



background: linear-gradient(45deg, #4D4D4D, #8B8B93, #ffffff, #DAE5FF, #9EA5FF)

Colors



<!-- Primary Colors -->
<color name="winter_color_10">#4D4D4D</color>
<color name="winter_color_20">#8B8B93</color>
<color name="winter_color_30">#ffffff</color>
<color name="winter_color_40">#DAE5FF</color>
<color name="winter_color_50">#9EA5FF</color>

PWA prompt