Guardians

Actions

Explore the gradient in different formats, and actions.

Colors overview

Blue

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#4e9de6	rgb(78, 157, 230)	hsl(210 75% 60%)	hwb(210 31% 9.8%)	lch(62.2 45.5 260)	lab(62.2 -7.53 -44.9)	cmyk 66%, 32%, 0%, 10%
	#417eb2	rgb(65, 126, 178)	hsl(210 47% 48%)	hwb(210 25% 30%)	lch(50.5 34.9 257)	lab(50.5 -7.83 -34)	cmyk 63%, 29%, 0%, 30%
	#34639d	rgb(52, 99, 157)	hsl(210 50% 41%)	hwb(210 20% 38%)	lch(40.8 37 268)	lab(40.8 -1.49 -37)	cmyk 67%, 37%, 0%, 38%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#4E9DE6

AA - 2.88



#417EB2

AA - 4.32



#34639D

AA - 6.14



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(67.8% -0.048 -0.124), oklab(57.5% -0.041 -0.094), oklab(49.5% -0.028 -0.103))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #4E9DE6, #417EB2, #34639D)

Colors



<!-- Primary Colors -->
<color name="guardians_color_10">#4E9DE6</color>
<color name="guardians_color_20">#417EB2</color>
<color name="guardians_color_30">#34639D</color>

Gradient PRO

Pro feature only

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

PWA prompt