#c6c2ff

#8664e3

#4718c7

#100442

Winter Night

Actions

Explore the gradient in different formats, and actions.

Colors overview

White

Purple

Blue

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#c6c2ff	rgb(198, 194, 255)	hsl(240 100% 88%)	hwb(240 76% 0%)	lch(80.3 31.6 290)	lab(80.3 10.9 -29.7)	cmyk 22%, 24%, 0%, 0%
	#8664e3	rgb(134, 100, 227)	hsl(260 69% 64%)	hwb(260 39% 11%)	lch(50.8 71 301)	lab(50.8 36.3 -61)	cmyk 41%, 56%, 0%, 11%
	#4718c7	rgb(71, 24, 199)	hsl(260 78% 44%)	hwb(260 9.4% 22%)	lch(28.2 98.4 303)	lab(28.2 54.1 -82.2)	cmyk 64%, 88%, 0%, 22%
	#100442	rgb(16, 4, 66)	hsl(250 89% 14%)	hwb(250 1.6% 74%)	lch(4.81 42.2 300)	lab(4.81 21.2 -36.5)	cmyk 76%, 94%, 0%, 74%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#c6c2ff

AA - 1.67



#8664e3

AA - 4.24



#4718c7

AAA - 9.44



#100442

AAA - 18.78



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(83.8% 0.025 -0.081), oklab(60% 0.07 -0.171), oklab(42.3% 0.048 -0.231), oklab(19.3% 0.017 -0.105))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #c6c2ff, #8664e3, #4718c7, #100442)

Colors



<!-- Primary Colors -->
<color name="winter_night_color_10">#c6c2ff</color>
<color name="winter_night_color_20">#8664e3</color>
<color name="winter_night_color_30">#4718c7</color>
<color name="winter_night_color_40">#100442</color>

Gradient PRO

Pro feature only

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

PWA prompt