Material Color Gradient

 #d8dabf

 #aa17f1

 #3a0091

Colors overview

Purple

White

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#d8dabf	rgb(216, 218, 191)	hsl(64 27% 80%)	hwb(64 75% 15%)	lch(86.4 13.7 107)	lab(86.4 -4.13 13.1)	cmyk 1%, 0%, 12%, 15%
	#aa17f1	rgb(170, 23, 241)	hsl(280 89% 52%)	hwb(280 9% 5.5%)	lch(45.5 108 314)	lab(45.5 75.4 -77.2)	cmyk 29%, 90%, 0%, 5%
	#3a0091	rgb(58, 0, 145)	hsl(260 100% 28%)	hwb(260 0% 43%)	lch(18.6 81.1 306)	lab(18.6 47.8 -65.6)	cmyk 60%, 100%, 0%, 43%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#d8dabf

AA - 1.42



#aa17f1

AA - 5.11



#3a0091

AAA - 13.21



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(88% -0.013 0.034), oklab(57.5% 0.179 -0.217), oklab(33.5% 0.057 -0.184))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #d8dabf, #aa17f1, #3a0091)

Colors



<!-- Primary Colors -->
<color name="material_color_10">#d8dabf</color>
<color name="material_color_20">#aa17f1</color>
<color name="material_color_30">#3a0091</color>

Gradient PRO

Pro feature only

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

PWA prompt