#FF00FF

#C700C7

#990099

#660066

Fuchsia

Actions

Explore the gradient in different formats, and actions.

Colors overview

Purple

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#ff00ff	rgb(255, 0, 255)	hsl(300 100% 50%)	hwb(300 0% 0%)	lch(60.2 111 327)	lab(60.2 93.5 -60.5)	cmyk 0%, 100%, 0%, 0%
	#c700c7	rgb(199, 0, 199)	hsl(300 100% 39%)	hwb(300 0% 22%)	lch(47.2 92.4 327)	lab(47.2 77.6 -50.2)	cmyk 0%, 100%, 0%, 22%
	#990099	rgb(153, 0, 153)	hsl(300 100% 30%)	hwb(300 0% 40%)	lch(36 76.1 327)	lab(36 63.9 -41.3)	cmyk 0%, 100%, 0%, 40%
	#660066	rgb(102, 0, 102)	hsl(300 100% 20%)	hwb(300 0% 60%)	lch(22.9 56.8 327)	lab(22.9 47.7 -30.9)	cmyk 0%, 100%, 0%, 60%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#FF00FF

AA - 3.13



#C700C7

AA - 4.93



#990099

AAA - 7.46



#660066

AAA - 11.95



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.275 -0.169), oklab(58.2% 0.228 -0.14), oklab(47.9% 0.188 -0.116), oklab(35.8% 0.14 -0.086))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #FF00FF, #C700C7, #990099, #660066)

Colors



<!-- Primary Colors -->
<color name="fuchsia_color_10">#FF00FF</color>
<color name="fuchsia_color_20">#C700C7</color>
<color name="fuchsia_color_30">#990099</color>
<color name="fuchsia_color_40">#660066</color>

Gradient PRO

Pro feature only

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

PWA prompt