#e0531b

#d34015

#c72a12

#b90710

Leaves



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

Red

Orange

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#e0531b	rgb(224, 83, 27)	hsl(17 78% 49%)	hwb(17 11% 12%)	lch(54.9 79.9 47.2)	lab(54.9 54.3 58.6)	cmyk 0%, 63%, 88%, 12%
	#d34015	rgb(211, 64, 21)	hsl(14 82% 45%)	hwb(14 8.2% 17%)	lch(49.8 80.1 44.4)	lab(49.8 57.2 56.1)	cmyk 0%, 70%, 90%, 17%
	#c72a12	rgb(199, 42, 18)	hsl(8 83% 43%)	hwb(8 7.1% 22%)	lch(44.8 80.3 41.2)	lab(44.8 60.4 52.8)	cmyk 0%, 79%, 91%, 22%
	#b90710	rgb(185, 7, 16)	hsl(360 93% 38%)	hwb(360 2.7% 27%)	lch(39.5 79.6 37.8)	lab(39.5 62.9 48.8)	cmyk 0%, 96%, 91%, 27%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#e0531b

AA - 3.87



#d34015

AA - 4.65



#c72a12

AA - 5.57



#b90710

AA - 6.77



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(62.5% 0.145 0.118), oklab(58.1% 0.155 0.11), oklab(54% 0.167 0.102), oklab(49.6% 0.177 0.093))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #e0531b, #d34015, #c72a12, #b90710)

Colors



<!-- Primary Colors -->
<color name="leaves_color_10">#e0531b</color>
<color name="leaves_color_20">#d34015</color>
<color name="leaves_color_30">#c72a12</color>
<color name="leaves_color_40">#b90710</color>

Gradient PRO

Pro feature only

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

PWA prompt