Pumpkin

#ffdbb8

#ffbe7d

#ff9f40

#cf6f0e

#874400

Actions

Explore the palette in different formats, and actions.

Colors overview

Orange

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#ffdbb8	rgb(255, 219, 184)	hsl(30 100% 86%)	oklab(91% 0.02 0.06)	oklch(91% 0.06 66)	color(display-p3 0.98 0.86 0.74)
	#ffbe7d	rgb(255, 190, 125)	hsl(30 100% 75%)	oklab(85% 0.05 0.1)	oklch(85% 0.11 65)	color(display-p3 0.96 0.76 0.53)
	#ff9f40	rgb(255, 159, 64)	hsl(30 100% 63%)	oklab(78% 0.07 0.14)	oklch(78% 0.16 61)	color(display-p3 0.95 0.64 0.33)
	#cf6f0e	rgb(207, 111, 14)	hsl(30 87% 43%)	oklab(64% 0.08 0.13)	oklch(64% 0.15 56)	color(display-p3 0.76 0.45 0.18)
	#874400	rgb(135, 68, 0)	hsl(30 100% 26%)	oklab(46% 0.06 0.09)	oklch(46% 0.11 56)	color(display-p3 0.5 0.28 0.09)

 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.

#ffdbb8

AA - 1.3



#ffbe7d

AA - 1.62



#ff9f40

AA - 2.04



#cf6f0e

AA - 3.53



#874400

AAA - 7.35



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(91.3% 0.025 0.056), oklab(84.7% 0.046 0.101), oklab(78.5% 0.075 0.136), oklab(63.9% 0.084 0.127), oklab(46.2% 0.064 0.094))

Fallback colors



background: linear-gradient(45deg, #ffdbb8, #ffbe7d, #ff9f40, #cf6f0e, #874400)

Colors



<!-- Primary Colors -->
<color name="pumpkin_color_10">#ffdbb8</color>
<color name="pumpkin_color_20">#ffbe7d</color>
<color name="pumpkin_color_30">#ff9f40</color>
<color name="pumpkin_color_40">#cf6f0e</color>
<color name="pumpkin_color_50">#874400</color>

PWA prompt