#F5F198Vanilla
#ECD589Vanilla
#E1AD78Tan
#FDFDFDWhite

Vanilla & Tan Whisper color palette

Open in generator
Ask AI about this palette: ChatGPTClaudePerplexity

Vanilla & Tan Whisper is a pastel light, analogous color palette tagged pastel, light, warm. The hues stay within 27° of each other on the color wheel, which is why the palette feels cohesive rather than busy. The colors are light and airy, which suits friendly, soft-spoken brands. The overall temperature is warm.

Color codes click any value to copy

SwatchNameHEXRGBHSLOKLCH
Vanilla#F5F198rgb(245, 241, 152)hsl(57, 82%, 78%)oklch(94.2% 0.111 106)
Vanilla#ECD589rgb(236, 213, 137)hsl(46, 72%, 73%)oklch(87.5% 0.099 93)
Tan#E1AD78rgb(225, 173, 120)hsl(30, 64%, 68%)oklch(78.4% 0.092 66)
White#FDFDFDrgb(253, 253, 253)hsl(0, 0%, 99%)oklch(99.4% 0.000 0)

Why it works and how to use it

It works because the lightness steps are gentle (68% to 99%), which keeps the mood consistent from edge to edge. Try it for social media templates and gentle interfaces.

  • Background: White (#FDFDFD) is the lightest color, so it belongs on large surfaces.
  • Text: Tan (#E1AD78) on #FDFDFD gives 1.98:1, so pair it with a darker neutral for body copy.
  • Primary: Vanilla (#F5F198) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
  • Accent: Vanilla (#ECD589) for highlights, badges and hover states.

No pair inside the palette reaches 4.5:1, so add black or white for body text.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Vanilla & Tan Whisper

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary
Card title
Card title
Card title
Roles are assigned by lightness.

Color blindness simulation

#F5F198
#ECD589
#E1AD78
#FDFDFD

Color-blind check: under tritanopia, Vanilla and White become hard to tell apart, so do not rely on that pair alone to carry meaning.

Contrast check WCAG ratios between palette colors

PairSampleRatioLevel
#E1AD78 on #FDFDFDAa1.98:1Fail
#F5F198 on #E1AD78Aa1.71:1Fail
#ECD589 on #FDFDFDAa1.43:1Fail
#ECD589 on #E1AD78Aa1.38:1Fail
#F5F198 on #ECD589Aa1.24:1Fail
#F5F198 on #FDFDFDAa1.15:1Fail

Similar palettes 24 more in this mood