#E7D9FF

#D5C3FF

#C3ADFF

#B196FF

Twilight

Actions

Explore the gradient in different formats, and actions.

Colors overview

Purple

White

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#e7d9ff	rgb(231, 217, 255)	hsl(260 100% 93%)	hwb(260 85% 0%)	lch(88.7 19.6 301)	lab(88.7 10.2 -16.8)	cmyk 9%, 15%, 0%, 0%
	#d5c3ff	rgb(213, 195, 255)	hsl(260 100% 88%)	hwb(260 76% 0%)	lch(81.8 31.3 299)	lab(81.8 15.2 -27.3)	cmyk 16%, 24%, 0%, 0%
	#c3adff	rgb(195, 173, 255)	hsl(260 100% 84%)	hwb(260 68% 0%)	lch(74.9 43.3 299)	lab(74.9 20.7 -38)	cmyk 24%, 32%, 0%, 0%
	#b196ff	rgb(177, 150, 255)	hsl(260 100% 79%)	hwb(260 59% 0%)	lch(67.8 56.3 299)	lab(67.8 27.2 -49.2)	cmyk 31%, 41%, 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.

#E7D9FF

AA - 1.33



#D5C3FF

AA - 1.6



#C3ADFF

AA - 1.95



#B196FF

AA - 2.42



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(90.8% 0.028 -0.045), oklab(85.2% 0.04 -0.074), oklab(79.6% 0.051 -0.104), oklab(74% 0.062 -0.137))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #E7D9FF, #D5C3FF, #C3ADFF, #B196FF)

Colors



<!-- Primary Colors -->
<color name="twilight_color_10">#E7D9FF</color>
<color name="twilight_color_20">#D5C3FF</color>
<color name="twilight_color_30">#C3ADFF</color>
<color name="twilight_color_40">#B196FF</color>

Gradient PRO

Pro feature only

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

PWA prompt