Vintage

#997616

#dec266

#ebe1bf

#71b4d6

#447996

Actions

Explore the palette in different formats, and actions.

Colors overview

Brown

Blue

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#997616	rgb(153, 118, 22)	hsl(44 75% 34%)	oklab(58% 0.01 0.11)	oklch(58% 0.11 86)	color(display-p3 0.58 0.47 0.18)
	#dec266	rgb(222, 194, 102)	hsl(46 65% 64%)	oklab(82% -0.01 0.12)	oklch(82% 0.12 93)	color(display-p3 0.85 0.76 0.45)
	#ebe1bf	rgb(235, 225, 191)	hsl(46 52% 84%)	oklab(91% 0 0.05)	oklch(91% 0.05 94)	color(display-p3 0.91 0.88 0.76)
	#71b4d6	rgb(113, 180, 214)	hsl(200 55% 64%)	oklab(74% -0.05 -0.07)	oklch(74% 0.08 230)	color(display-p3 0.5 0.7 0.83)
	#447996	rgb(68, 121, 150)	hsl(200 38% 43%)	oklab(55% -0.04 -0.06)	oklch(55% 0.07 230)	color(display-p3 0.32 0.47 0.58)

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

#997616

AA - 4.23



#dec266

AA - 1.74



#ebe1bf

AA - 1.3



#71b4d6

AA - 2.28



#447996

AA - 4.74



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(58.5% 0.007 0.113), oklab(81.9% -0.006 0.116), oklab(90.9% -0.003 0.046), oklab(73.8% -0.052 -0.066), oklab(55.1% -0.042 -0.059))

Fallback colors



background: linear-gradient(45deg, #997616, #dec266, #ebe1bf, #71b4d6, #447996)

Colors



<!-- Primary Colors -->
<color name="vintage_color_10">#997616</color>
<color name="vintage_color_20">#dec266</color>
<color name="vintage_color_30">#ebe1bf</color>
<color name="vintage_color_40">#71b4d6</color>
<color name="vintage_color_50">#447996</color>

PWA prompt