Pikka Logo Pikka
Chrome App
Subtle Soft Editorial Off-White Category: Neutral

Vanilla Cream (#FDFBF7) — Color Codes, Meaning & UI Palettes

Vanilla Cream (#FDFBF7) is a luminous, high-lightness off-white tinted with delicate warm cream. It replaces sterile, harsh pure white with soft tactile elegance that eliminates screen glare.

Quick Answer (Vanilla Cream Color Code): The exact HEX code for Vanilla Cream is #FDFBF7. In RGB, it is rgb(253, 251, 247). In HSL, it is hsl(40deg, 60%, 98%), and its print CMYK formulation is cmyk(0%, 1%, 2%, 1%). It has a relative luminance of 0.966 and pairs best in UI design with Charcoal Slate (#1E293B) and Warm Terracotta (#CC5500).
Click to Copy HEX
Vanilla Cream
#FDFBF7
HEX
#FDFBF7
RGB
rgb(253, 251, 247)
HSL
hsl(40deg, 60%, 98%)
CMYK (Print)
cmyk(0%, 1%, 2%, 1%)
Apple Display P3
color(display-p3 0.992 0.984 0.969)

WCAG 2.1 Accessibility & Contrast Rating

White Text (#FFFFFF) 1.03:1 (Fail)
Black Text (#000000) 20.32:1 (AAA)

11-Step Tints & Shades Scale (Tailwind 50–950)

Mathematically balanced luminance scale for design tokens and CSS color palettes. Click any shade to copy hex code:

50
#FBF7EF
100
#F7EFDE
200
#EFDEBE
300
#E4CA95
400
#D8B164
500
#FDFBF7
600
#EBD7AF
700
#DAB56B
800
#C09030
900
#806020
950
#483612

Color Harmonies & Palette Schemes

Complementary

#F7F9FD
Opposite 180° Contrast

Analogous -30°

#FDF8F7
Natural Harmony

Analogous +30°

#FCFDF7
Natural Harmony

Triadic +120°

#F7FDFB
120° Balanced Triad

Triadic +240°

#FBF7FD
120° Balanced Triad

Curated UI Design Pairings for Vanilla Cream

Top-tier root background for luxury editorial sites, architectural portfolios, boutique hospitality, and modern typography cards.

Charcoal Slate
#1E293B
Sharp Legible Body Text
Warm Terracotta
#CC5500
Artisanal Accent Pop
Muted Gold
#D97706
Refined Subtle Border
Soft Sage
#84A98C
Organic Surface Tint

Export Vanilla Cream Code Snippets

CSS Variable --color-vanilla-cream: #FDFBF7;
Tailwind Config 'vanilla-cream': '#FDFBF7'
Swift / SwiftUI Color(hex: "#FDFBF7")
JSON Design Token {"name": "Vanilla Cream", "hex": "#FDFBF7"}

Frequently Asked Questions About Vanilla Cream (#FDFBF7)

What is the exact HEX code for Vanilla Cream?

The exact HEX code for Vanilla Cream is #FDFBF7. In 8-digit hexadecimal (with 100% opacity), it is #FDFBF7FF. Its RGB decimal equivalent is rgb(253, 251, 247) and its HSL value is hsl(40deg, 60%, 98%).

What colors go best with Vanilla Cream in UI and web design?

Vanilla Cream pairs exceptionally well with Charcoal Slate (#1E293B), Warm Terracotta (#CC5500), Muted Gold (#D97706), and Soft Sage (#84A98C).

How do I use Vanilla Cream in CSS and Tailwind CSS?

In standard CSS, apply it directly via color: #FDFBF7; or background-color: #FDFBF7;. In Tailwind CSS, use arbitrary value syntax like bg-[#fdfbf7] or text-[#fdfbf7], or define it in your Tailwind v4 @theme block as --color-vanilla-cream: #FDFBF7;.

Is Vanilla Cream WCAG accessible for readable text?

Against a pure white background (#FFFFFF), Vanilla Cream achieves a contrast ratio of 1.03:1 (Fail). Against a pure black background (#000000), it achieves 20.32:1 (AAA). Check custom contrast pairings on Pikka's WCAG Contrast Checker.

Explore More Colors in the Dictionary

Browse our complete catalog of curated named colors, harmonic palettes, and accessible UI combinations.

Named Color Dictionary Interactive Color Wheel Tint & Shade Generator