Storm Color Gradient

 #FF00FF

 #E000FF

 #C500FF

 #AA00FF

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%
	#e000ff	rgb(224, 0, 255)	hsl(290 100% 50%)	hwb(290 0% 0%)	lch(54.7 112 322)	lab(54.7 88.2 -69.6)	cmyk 12%, 100%, 0%, 0%
	#c500ff	rgb(197, 0, 255)	hsl(290 100% 50%)	hwb(290 0% 0%)	lch(50.1 114 317)	lab(50.1 83.8 -77.4)	cmyk 23%, 100%, 0%, 0%
	#aa00ff	rgb(170, 0, 255)	hsl(280 100% 50%)	hwb(280 0% 0%)	lch(45.6 117 313)	lab(45.6 79.9 -84.8)	cmyk 33%, 100%, 0%, 0%

 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



#E000FF

AA - 3.74



#C500FF

AA - 4.35



#AA00FF

AA - 5.05



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 space

HDR oklab colors New



--angle: 45deg; 
 background: linear-gradient(var(--angle), oklab(70.2% 0.275 -0.169), oklab(65.6% 0.244 -0.195), oklab(61.8% 0.214 -0.217), oklab(58.1% 0.18 -0.238))

Fallback colors New



--angle: 45deg; 
 background: linear-gradient(var(--angle), #FF00FF, #E000FF, #C500FF, #AA00FF)

Colors



<resources>
    <color name="storm_100">#FF00FF</color>
    <color name="storm_200">#E000FF</color>
    <color name="storm_300">#C500FF</color>
    <color name="storm_400">#AA00FF</color>
</resources>

Gradient PRO

Pro feature only

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

PWA prompt