Violet

Actions

Explore the gradient in different formats, and actions.

Purple

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK	Color schemes
	#b073fa	rgb(176, 115, 250)	hsl(270 93% 72%)	hwb(270 45% 2%)	lch(59.7 74.1 307)	lab(59.7 44.3 -59.4)	cmyk 30%, 54%, 0%, 2%
	#6f42f5	rgb(111, 66, 245)	hsl(260 90% 61%)	hwb(260 26% 3.9%)	lch(42.7 99.5 302)	lab(42.7 52.8 -84.4)	cmyk 55%, 73%, 0%, 4%

 Click a color format to copy to your clipboard.

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

#b073fa

AA - 3.14



#6f42f5

AA - 5.56



The simulation of color blindness may not be 100% accurate sometimes.

Colors preview as gradient with protanopia

Colors preview as palette with protanopia

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(67.8% 0.105 -0.166), oklab(54.5% 0.07 -0.238))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #b073fa, #6f42f5)

Colors



<!-- Primary Colors -->
<color name="violet_color_10">#b073fa</color>
<color name="violet_color_20">#6f42f5</color>

Gradient PRO

Pro feature only

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

PWA prompt