#a193d9

#7a6aa9

#56437c

#331f51

#140029

Twilight

Actions

Explore the gradient in different formats, and actions.

Colors overview

Purple

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#a193d9	rgb(161, 147, 217)	hsl(250 48% 71%)	hwb(250 58% 15%)	lch(64.2 38 296)	lab(64.2 16.7 -34.2)	cmyk 26%, 32%, 0%, 15%
	#7a6aa9	rgb(122, 106, 169)	hsl(260 27% 54%)	hwb(260 42% 34%)	lch(48.3 36.2 298)	lab(48.3 17.2 -31.8)	cmyk 28%, 37%, 0%, 34%
	#56437c	rgb(86, 67, 124)	hsl(260 30% 37%)	hwb(260 26% 51%)	lch(32.5 35.1 302)	lab(32.5 18.5 -29.8)	cmyk 31%, 46%, 0%, 51%
	#331f51	rgb(51, 31, 81)	hsl(260 45% 22%)	hwb(260 12% 68%)	lch(16.6 33.7 305)	lab(16.6 19.3 -27.5)	cmyk 37%, 62%, 0%, 68%
	#140029	rgb(20, 0, 41)	hsl(270 100% 8%)	hwb(270 0% 84%)	lch(2.62 25.6 303)	lab(2.62 13.8 -21.6)	cmyk 51%, 100%, 0%, 84%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#a193d9

AA - 2.73



#7a6aa9

AA - 4.7



#56437c

AAA - 8.43



#331f51

AAA - 14.42



#140029

AAA - 19.77



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(70.2% 0.039 -0.094), oklab(56.5% 0.041 -0.088), oklab(42.9% 0.043 -0.083), oklab(29.3% 0.043 -0.077), oklab(15.7% 0.044 -0.071))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #a193d9, #7a6aa9, #56437c, #331f51, #140029)

Colors



<!-- Primary Colors -->
<color name="twilight_color_10">#a193d9</color>
<color name="twilight_color_20">#7a6aa9</color>
<color name="twilight_color_30">#56437c</color>
<color name="twilight_color_40">#331f51</color>
<color name="twilight_color_50">#140029</color>

Gradient PRO

Pro feature only

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

PWA prompt