#f97281

#7b589e

#171f85

Twilight

Actions

Explore the gradient in different formats, and actions.

Colors overview

Pink

Purple

Blue

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#f97281	rgb(249, 114, 129)	hsl(350 92% 71%)	hwb(350 45% 2.4%)	lch(65.3 56.7 19)	lab(65.3 53.6 18.4)	cmyk 0%, 54%, 48%, 2%
	#7b589e	rgb(123, 88, 158)	hsl(270 28% 48%)	hwb(270 35% 38%)	lch(43.5 41.7 308)	lab(43.5 25.6 -32.9)	cmyk 22%, 44%, 0%, 38%
	#171f85	rgb(23, 31, 133)	hsl(240 71% 31%)	hwb(240 9% 48%)	lch(18.3 65.3 296)	lab(18.3 28.7 -58.7)	cmyk 83%, 77%, 0%, 48%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#f97281

AA - 2.7



#7b589e

AA - 5.62



#171f85

AAA - 13.36



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(71.7% 0.159 0.044), oklab(52.7% 0.066 -0.091), oklab(32% -0.002 -0.165))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #f97281, #7b589e, #171f85)

Colors



<!-- Primary Colors -->
<color name="twilight_color_10">#f97281</color>
<color name="twilight_color_20">#7b589e</color>
<color name="twilight_color_30">#171f85</color>

Gradient PRO

Pro feature only

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

PWA prompt