Old

Actions

Explore the gradient in different formats, and actions.

Brown

Blue

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK	Color schemes
	#667b91	rgb(102, 123, 145)	hsl(210 17% 48%)	hwb(210 40% 43%)	lch(50.5 15.1 255)	lab(50.5 -3.86 -14.6)	cmyk 30%, 15%, 0%, 43%
	#d4965a	rgb(212, 150, 90)	hsl(30 59% 59%)	hwb(30 35% 17%)	lch(67.4 45.4 64.7)	lab(67.4 19.4 41)	cmyk 0%, 29%, 58%, 17%

 Click a color format to copy to your clipboard.

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

#667b91

AA - 4.36



#d4965a

AA - 2.52



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(57.4% -0.015 -0.039), oklab(72.1% 0.047 0.096))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #667b91, #d4965a)

Colors



<!-- Primary Colors -->
<color name="old_color_10">#667b91</color>
<color name="old_color_20">#d4965a</color>

Gradient PRO

Pro feature only

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

PWA prompt