#812f19

#943921

#9f4229

#ad4a32

#bb543b

#c85d44

Orangered

Actions

Explore the gradient in different formats, and actions.

Colors overview

Orange

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#812f19	rgb(129, 47, 25)	hsl(13 68% 30%)	hwb(13 9.8% 49%)	lch(31.8 47.9 42.8)	lab(31.8 35.2 32.5)	cmyk 0%, 64%, 81%, 49%
	#943921	rgb(148, 57, 33)	hsl(13 64% 35%)	hwb(13 13% 42%)	lch(37.1 51.6 42.4)	lab(37.1 38.1 34.8)	cmyk 0%, 61%, 78%, 42%
	#9f4229	rgb(159, 66, 41)	hsl(13 59% 39%)	hwb(13 16% 38%)	lch(40.8 51.8 42.3)	lab(40.8 38.3 34.8)	cmyk 0%, 58%, 74%, 38%
	#ad4a32	rgb(173, 74, 50)	hsl(12 55% 44%)	hwb(12 20% 32%)	lch(44.8 53.3 40.9)	lab(44.8 40.2 34.9)	cmyk 0%, 57%, 71%, 32%
	#bb543b	rgb(187, 84, 59)	hsl(12 52% 48%)	hwb(12 23% 27%)	lch(49.1 54.3 40.7)	lab(49.1 41.2 35.4)	cmyk 0%, 55%, 68%, 27%
	#c85d44	rgb(200, 93, 68)	hsl(11 55% 53%)	hwb(11 27% 22%)	lch(53 55.2 40.1)	lab(53 42.2 35.5)	cmyk 0%, 53%, 66%, 22%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#812f19

AAA - 8.92



#943921

AAA - 7.32



#9f4229

AA - 6.39



#ad4a32

AA - 5.52



#bb543b

AA - 4.72



#c85d44

AA - 4.11



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(42.1% 0.096 0.069), oklab(46.8% 0.104 0.075), oklab(49.9% 0.105 0.076), oklab(53.4% 0.111 0.078), oklab(57.1% 0.114 0.08), oklab(60.5% 0.117 0.081))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #812f19, #943921, #9f4229, #ad4a32, #bb543b, #c85d44)

Colors



<!-- Primary Colors -->
<color name="orangered_color_10">#812f19</color>
<color name="orangered_color_20">#943921</color>
<color name="orangered_color_30">#9f4229</color>
<color name="orangered_color_40">#ad4a32</color>
<color name="orangered_color_50">#bb543b</color>
<color name="orangered_color_60">#c85d44</color>

Gradient PRO

Pro feature only

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

PWA prompt