Pumpkin

#772f1a

#f58549

#f2a65a

#eec170

#585123

Actions

Explore the palette in different formats, and actions.

Colors overview

Red

Orange

Yellow

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#772f1a	rgb(119, 47, 26)	hsl(14 64% 28%)	oklab(40% 0.09 0.06)	oklch(40% 0.11 37)	color(display-p3 0.43 0.2 0.13)
	#f58549	rgb(245, 133, 73)	hsl(21 90% 62%)	oklab(73% 0.11 0.11)	oklch(73% 0.16 47)	color(display-p3 0.9 0.54 0.34)
	#f2a65a	rgb(242, 166, 90)	hsl(30 85% 65%)	oklab(78% 0.06 0.12)	oklch(78% 0.13 64)	color(display-p3 0.91 0.66 0.4)
	#eec170	rgb(238, 193, 112)	hsl(39 79% 69%)	oklab(83% 0.02 0.11)	oklch(83% 0.11 81)	color(display-p3 0.91 0.76 0.49)
	#585123	rgb(88, 81, 35)	hsl(52 43% 24%)	oklab(43% -0.01 0.06)	oklch(43% 0.07 100)	color(display-p3 0.34 0.32 0.16)

 Click on a color value to copy it to your clipboard.

Contrast ratios checker

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

#772f1a

AAA - 9.51



#f58549

AA - 2.51



#f2a65a

AA - 2.02



#eec170

AA - 1.68



#585123

AAA - 8.02



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.

HDR color space

HDR oklab colors



background: linear-gradient(45deg, oklab(40.4% 0.085 0.064), oklab(73% 0.106 0.114), oklab(78.5% 0.057 0.116), oklab(83.4% 0.018 0.111), oklab(43.1% -0.012 0.065))

Fallback colors



background: linear-gradient(45deg, #772f1a, #f58549, #f2a65a, #eec170, #585123)

Colors



<!-- Primary Colors -->
<color name="pumpkin_color_10">#772f1a</color>
<color name="pumpkin_color_20">#f58549</color>
<color name="pumpkin_color_30">#f2a65a</color>
<color name="pumpkin_color_40">#eec170</color>
<color name="pumpkin_color_50">#585123</color>

PWA prompt