#c0540b

#fe8802

#f5daaf

Golden



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



HDR gradient

Switch to HDR to enhance the gradient



Quick view

Inspect colors in multiple color spaces

Colors overview

Yellow

Orange

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#c0540b	rgb(192, 84, 11)	hsl(24 89% 40%)	hwb(24 4.3% 25%)	lch(49.6 70.7 53.6)	lab(49.6 42 56.9)	cmyk 0%, 56%, 94%, 25%
	#fe8802	rgb(254, 136, 2)	hsl(32 99% 50%)	hwb(32 0.78% 0.39%)	lch(69.3 85.8 61.2)	lab(69.3 41.3 75.2)	cmyk 0%, 46%, 99%, 0%
	#f5daaf	rgb(245, 218, 175)	hsl(37 78% 82%)	hwb(37 69% 3.9%)	lch(88.5 25.4 78.6)	lab(88.5 5.03 24.8)	cmyk 0%, 11%, 29%, 4%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#c0540b

AA - 4.65



#fe8802

AA - 2.4



#f5daaf

AA - 1.35



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(57.5% 0.108 0.113), oklab(74.3% 0.099 0.15), oklab(90% 0.012 0.062))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #c0540b, #fe8802, #f5daaf)

Colors



<!-- Primary Colors -->
<color name="golden_color_10">#c0540b</color>
<color name="golden_color_20">#fe8802</color>
<color name="golden_color_30">#f5daaf</color>

Gradient PRO

Pro feature only

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

PWA prompt