Golden

Actions

Explore the gradient in different formats, and actions.

Orange

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK	Color schemes
	#f0bf43	rgb(240, 191, 67)	hsl(43 85% 60%)	hwb(43 26% 5.9%)	lch(80.2 66.7 81.9)	lab(80.2 9.4 66)	cmyk 0%, 20%, 72%, 6%
	#daa520	rgb(218, 165, 32)	hsl(43 74% 49%)	hwb(43 13% 15%)	lch(71.3 69.8 79.9)	lab(71.3 12.2 68.7)	cmyk 0%, 24%, 85%, 15%

 Click a color format to copy to your clipboard.

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

#f0bf43

AA - 1.71



#daa520

AA - 2.23



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(82.7% 0.009 0.146), oklab(75.2% 0.015 0.146))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #f0bf43, #daa520)

Colors



<!-- Primary Colors -->
<color name="golden_color_10">#f0bf43</color>
<color name="golden_color_20">#daa520</color>

Gradient PRO

Pro feature only

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

PWA prompt