Open

Actions

Explore the gradient in different formats, and actions.

Purple

Green

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK	Color schemes
	#561cd8	rgb(86, 28, 216)	hsl(260 77% 48%)	hwb(260 11% 15%)	lch(32 104 304)	lab(32 58.1 -85.7)	cmyk 60%, 87%, 0%, 15%
	#09db6e	rgb(9, 219, 110)	hsl(150 92% 45%)	hwb(150 3.5% 14%)	lch(77.2 75.7 148)	lab(77.2 -64.1 40.2)	cmyk 96%, 0%, 50%, 14%

 Click a color format to copy to your clipboard.

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

#561cd8

AAA - 8.22



#09db6e

AA - 1.84



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(45.8% 0.063 -0.241), oklab(78.1% -0.182 0.1))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #561cd8, #09db6e)

Colors



<!-- Primary Colors -->
<color name="open_color_10">#561cd8</color>
<color name="open_color_20">#09db6e</color>

Gradient PRO

Pro feature only

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

PWA prompt