French Vanilla

#663b17

#99653a

#ab784e

#f3e4cd

#dec9ab

Actions

Explore the palette in different formats, and actions.

Colors overview

White

Brown

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#663b17	rgb(102, 59, 23)	hsl(27 63% 25%)	oklab(40% 0.04 0.07)	oklch(40% 0.08 57)	color(display-p3 0.38 0.24 0.12)
	#99653a	rgb(153, 101, 58)	hsl(27 45% 41%)	oklab(55% 0.05 0.08)	oklch(55% 0.09 59)	color(display-p3 0.57 0.4 0.26)
	#ab784e	rgb(171, 120, 78)	hsl(27 37% 49%)	oklab(62% 0.04 0.07)	oklch(62% 0.09 60)	color(display-p3 0.64 0.48 0.33)
	#f3e4cd	rgb(243, 228, 205)	hsl(36 61% 88%)	oklab(92% 0.01 0.03)	oklch(92% 0.03 79)	color(display-p3 0.94 0.9 0.81)
	#dec9ab	rgb(222, 201, 171)	hsl(35 44% 77%)	oklab(85% 0.01 0.05)	oklch(85% 0.05 77)	color(display-p3 0.86 0.79 0.68)

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

#663b17

AAA - 9.53



#99653a

AA - 4.9



#ab784e

AA - 3.79



#f3e4cd

AA - 1.25



#dec9ab

AA - 1.6



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(39.8% 0.042 0.066), oklab(55.3% 0.046 0.076), oklab(61.5% 0.043 0.074), oklab(92.5% 0.007 0.034), oklab(84.6% 0.011 0.045))

Fallback colors



background: linear-gradient(45deg, #663b17, #99653a, #ab784e, #f3e4cd, #dec9ab)

Colors



<!-- Primary Colors -->
<color name="french_vanilla_color_10">#663b17</color>
<color name="french_vanilla_color_20">#99653a</color>
<color name="french_vanilla_color_30">#ab784e</color>
<color name="french_vanilla_color_40">#f3e4cd</color>
<color name="french_vanilla_color_50">#dec9ab</color>

PWA prompt