Vanilla

#F3E5AB

What color is Vanilla?

Vanilla is a pale, creamy yellow with a soft warm tone, hex #F3E5AB, close to the color of unbleached linen. It is lighter and less saturated than butter, with a gentle golden hue that keeps it from looking purely white.

What is the meaning of the color Vanilla?

Named after the vanilla orchid, cultivated first in Mexico by the Totonac people before Spanish traders brought it to Europe in the early 1500s. By the 17th century, vanilla was among the most expensive imported flavoring goods in Europe, and its pale cream color became associated with luxury and refinement. The color name entered English usage in the 19th century as vanilla became a common flavoring in confectionery and ice cream. Häagen-Dazs used vanilla as a signature flavor at its 1960 launch, anchoring the color’s long association with classic, understated quality.

RGB
243, 229, 171
HSL
48°, 75%, 81%
CMYK
0, 6, 30, 5
HSV
48°, 30%, 95%
Vanilla color

What colors go with Vanilla?

Colors that pair well with Vanilla include:
Sage Green: soft, natural balance
Dusty Rose: gentle, warm harmony
Charcoal: grounding contrast
Camel: tonal warmth
Sky Blue: light, fresh contrast

Similar Colors

Conversions & Codes

Format Value CSS
HEX #F3E5AB color: #F3E5AB;
RGB 243, 229, 171 color: rgb(243, 229, 171);
RGB Percentage 95%, 90%, 67% color: rgb(95%, 90%, 67%);
CMYK 0%, 6%, 30%, 5% Not supported in CSS
HSL 48°, 75%, 81% color: hsl(48, 75%, 81%);
HSV 48°, 30%, 95% Not supported in CSS
CIE-LAB 65, 3, 19 color: lab(65% 3 19);
Decimal 15984043 Not supported in CSS

Color Variations

Shades

#F3E4AA
#EED986
#E9CE62
#E3C23E
#D9B41F
#B5961A
#917815
#6C5A0F

Tints

#FBF7E6
#FAF4DD
#F9F2D5
#F8EFCC
#F7ECC4
#F5EABB
#F4E7B3
#F3E4AA

Tones

#F3E4AA
#EFE2AE
#ECE0B1
#E8DEB5
#E4DCB9
#E1D9BC
#DDD7C0
#D9D5C4

Hues

#F3E4AA
#CBF3AA
#AAF3C0
#AAEFF3
#AAB9F3
#D2AAF3
#F3AADD
#F3AEAA

Color Harmonies

Analogous

#F3C0AA
Click to copy
#F3E5AB
Click to copy
#DDF3AA
Click to copy

Complementary

#F3E5AB
Click to copy
#AAB9F3
Click to copy

Split Complementary

#F3E5AB
Click to copy
#AADDF3
Click to copy
#C0AAF3
Click to copy

Triadic

#F3E5AB
Click to copy
#AAF3E4
Click to copy
#E4AAF3
Click to copy

Tetradic

#F3E5AB
Click to copy
#AAF3C0
Click to copy
#AAB9F3
Click to copy
#F3AADD
Click to copy

Square

#F3E5AB
Click to copy
#AAF3C0
Click to copy
#AAB9F3
Click to copy
#F3AADD
Click to copy

CSS & Dev Snippets

CSS
.vanilla {
  color: #F3E5AB;
}
SCSS
$vanilla: #F3E5AB;
RGB
rgb(243, 229, 171)

Accessibility & Contrast

White background

1.26:1
1.26
contrast ratio on a white background
Element
AA
AAA
Small text
Large text
UI element

Black background

16.61:1
16.61
contrast ratio on a black background
Element
AA
AAA
Small text
Large text
UI element

Popular Tags