#4B0082

#6A00A0

#8000BF

#9400D8

Indigo

Actions

Explore the gradient in different formats, and actions.

Colors overview

Purple

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#4b0082	rgb(75, 0, 130)	hsl(270 100% 25%)	hwb(270 0% 49%)	lch(19.7 71.8 311)	lab(19.7 47 -54.3)	cmyk 42%, 100%, 0%, 49%
	#6a00a0	rgb(106, 0, 160)	hsl(280 100% 31%)	hwb(280 0% 37%)	lch(27.7 82.1 313)	lab(27.7 56.5 -59.6)	cmyk 34%, 100%, 0%, 37%
	#8000bf	rgb(128, 0, 191)	hsl(280 100% 37%)	hwb(280 0% 25%)	lch(33.9 93.6 314)	lab(33.9 64.5 -67.7)	cmyk 33%, 100%, 0%, 25%
	#9400d8	rgb(148, 0, 216)	hsl(280 100% 42%)	hwb(280 0% 15%)	lch(39.2 102 314)	lab(39.2 71.1 -73.5)	cmyk 31%, 100%, 0%, 15%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#4B0082

AAA - 12.95



#6A00A0

AAA - 9.9



#8000BF

AAA - 7.86



#9400D8

AA - 6.46



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(33.9% 0.094 -0.153), oklab(41.2% 0.128 -0.167), oklab(47% 0.147 -0.19), oklab(51.9% 0.165 -0.207))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #4B0082, #6A00A0, #8000BF, #9400D8)

Colors



<!-- Primary Colors -->
<color name="indigo_color_10">#4B0082</color>
<color name="indigo_color_20">#6A00A0</color>
<color name="indigo_color_30">#8000BF</color>
<color name="indigo_color_40">#9400D8</color>

Gradient PRO

Pro feature only

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

PWA prompt