Pumpkin Color Gradient

 #FFD800

 #FFA000

 #E77F00

 #DE6B00

Colors overview

Orange

Yellow

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#ffd800	rgb(255, 216, 0)	hsl(51 100% 50%)	hwb(51 0% 0%)	lch(87.7 86.7 88.4)	lab(87.7 2.43 86.7)	cmyk 0%, 15%, 100%, 0%
	#ffa000	rgb(255, 160, 0)	hsl(38 100% 50%)	hwb(38 0% 0%)	lch(74.5 84 69.1)	lab(74.5 30 78.5)	cmyk 0%, 37%, 100%, 0%
	#e77f00	rgb(231, 127, 0)	hsl(33 100% 45%)	hwb(33 0% 9.4%)	lch(64.2 79.6 62.7)	lab(64.2 36.6 70.7)	cmyk 0%, 45%, 100%, 9%
	#de6b00	rgb(222, 107, 0)	hsl(29 100% 44%)	hwb(29 0% 13%)	lch(58.8 79.5 57.5)	lab(58.8 42.7 67)	cmyk 0%, 52%, 100%, 13%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#FFD800

AA - 1.39



#FFA000

AA - 2.04



#E77F00

AA - 2.82



#DE6B00

AA - 3.38



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(88.9% -0.018 0.182), oklab(78.4% 0.064 0.16), oklab(69.8% 0.086 0.142), oklab(65.4% 0.106 0.132))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #FFD800, #FFA000, #E77F00, #DE6B00)

Colors



<!-- Primary Colors -->
<color name="pumpkin_color_10">#FFD800</color>
<color name="pumpkin_color_20">#FFA000</color>
<color name="pumpkin_color_30">#E77F00</color>
<color name="pumpkin_color_40">#DE6B00</color>

Gradient PRO

Pro feature only

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

PWA prompt