#f87818

#f26c12

#eb600e

#e5540c

#dd480c

#d63a0e

Fall



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

Orange

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#f87818	rgb(248, 120, 24)	hsl(26 94% 53%)	hwb(26 9.4% 2.7%)	lch(65.3 83 55.7)	lab(65.3 46.7 68.6)	cmyk 0%, 52%, 90%, 3%
	#f26c12	rgb(242, 108, 18)	hsl(24 90% 51%)	hwb(24 7.1% 5.1%)	lch(62.1 84 53.5)	lab(62.1 49.9 67.5)	cmyk 0%, 55%, 93%, 5%
	#eb600e	rgb(235, 96, 14)	hsl(22 89% 49%)	hwb(22 5.5% 7.8%)	lch(58.9 84.3 51.4)	lab(58.9 52.6 65.9)	cmyk 0%, 59%, 94%, 8%
	#e5540c	rgb(229, 84, 12)	hsl(20 90% 47%)	hwb(20 4.7% 10%)	lch(55.9 84.8 49.1)	lab(55.9 55.5 64.1)	cmyk 0%, 63%, 95%, 10%
	#dd480c	rgb(221, 72, 12)	hsl(17 90% 46%)	hwb(17 4.7% 13%)	lch(52.7 84.2 47)	lab(52.7 57.5 61.5)	cmyk 0%, 67%, 95%, 13%
	#d63a0e	rgb(214, 58, 14)	hsl(13 88% 45%)	hwb(13 5.5% 16%)	lch(49.5 84 44.2)	lab(49.5 60.2 58.6)	cmyk 0%, 73%, 93%, 16%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#f87818

AA - 2.73



#f26c12

AA - 3.03



#eb600e

AA - 3.38



#e5540c

AA - 3.74



#dd480c

AA - 4.19



#d63a0e

AA - 4.69



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(71.1% 0.118 0.139), oklab(68.5% 0.128 0.135), oklab(65.8% 0.137 0.13), oklab(63.3% 0.147 0.125), oklab(60.6% 0.154 0.119), oklab(58% 0.164 0.113))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #f87818, #f26c12, #eb600e, #e5540c, #dd480c, #d63a0e)

Colors



<!-- Primary Colors -->
<color name="fall_color_10">#f87818</color>
<color name="fall_color_20">#f26c12</color>
<color name="fall_color_30">#eb600e</color>
<color name="fall_color_40">#e5540c</color>
<color name="fall_color_50">#dd480c</color>
<color name="fall_color_60">#d63a0e</color>

Gradient PRO

Pro feature only

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

PWA prompt