Vanilla is a soft, calming cream color positioned between white and yellow on the color wheel. It exudes warmth and coziness. Related shades include ivory and beige. Ideal for minimalist designs, it creates a serene and inviting atmosphere.
Vanilla is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #F3E5AB
- RGB value: 95.3% red, 89.8% green, 67.1% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines
For variations within the same spectrum as Vanilla, consider:
- Ivory (#ffffe3): Shares a light, creamy hue reminiscent of classic vanilla, offering a soft and gentle tint.
- Off-White (#f2f0ef): Delivers a neutral, bright undertone comparable to vanilla’s subtle brightness.
- Champagne (#f7e6ca): Exhibits a light and warm shade, echoing vanilla's soft elegance with a hint of gold.
- Cream (#fdfbd4): Reflects the rich, creamy essence found in vanilla, with a comforting brightness.
To complement Vanilla, consider pairing it with:
- Forest Green (#2e6f40): The earthy richness of forest green balances Vanilla’s lightness, creating a harmonious and natural palette.
- Crimson Red (#b22222): This deep, bold tone adds a striking contrast to Vanilla’s softness, making for a dramatic and elegant combination.
- Sky Blue (#82c8e5): The refreshing tone of sky blue enhances Vanilla’s gentle warmth, resulting in a serene and airy color scheme.
- Saffron (#f1c338): Saffron’s warm, golden hue complements Vanilla by adding depth and richness, creating a sunny and inviting effect.
- Mauve (#e0afff): This soft, muted purple offers a subtle contrast to Vanilla’s lightness, providing a sophisticated and soothing pairing.
While Vanilla is a subtle and neutral shade, it may clash with:
- Blood Red (#780606): The intense depth of blood red can overshadow vanilla's soft neutrality, creating an imbalanced pairing.
- Dark Yellow (#ba8e23): The murkiness of dark yellow can make vanilla appear dull and lifeless, lacking vibrancy.
- Forest Green (#2e6f40): This rich green can overpower vanilla’s lightness, making it difficult for vanilla to hold its own in color schemes.
- Jet Black (#252525): The stark contrast between jet black and vanilla can be too harsh, leading to visual tension rather than harmony.
- Chocolate (#713600): Chocolate’s deep richness can conflict with vanilla’s light warmth, resulting in a combination that feels heavy and unbalanced.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Opal Retreat
Lush Mist
Amber Blossom
Contrast checker
Contrast 1.26
- Large Text
#F3E5AB
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Contrast 16.61
- Large Text
#F3E5AB
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #F3E5AB, known as Vanilla, has RGB values of R:243, G:229, B:171 and CMYK values of C:0, M:6, Y:30, K:5.
| VALUE | CSS | |
|---|---|---|
| HEX | #F3E5AB | #F3E5AB |
| RGB DECIMAL | 243, 229, 171 | RGB(243,229,171) |
| RGB PERCENTAGE | 95.3, 89.8, 67.1 | RGB(95.3%,89.8%,67.1%) |
| CMYK | 0, 6, 30, 5 | |
| HSL | HSL(48.3, 75.0%, 81.2%) | HSL(48.3, 75.0%, 81.2%) |
| HSV (OR HSB) | 48.3°, 29.6, 95.3 | |
| WEB SAFE | #255204153 | #255204153 |
| BINARY | 11110011, 11100101, 10101011 | |
| iOS - SwiftUI | Color(red: 0.953, green: 0.898, blue: 0.671) | |
| iOS - UIKit | UIColor(red: 0.953, green: 0.898, blue: 0.671, alpha: 1) | |
| Android - Compose | Color(0xFFF3E5AB) |
