← Back to Editor

#FFF9BB · #F2A347 · #F4E66B · #CAD998 · #5B8881

vintage

A 5-color vintage palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

NostalgicClassicTimelessWarmCool

Industry INDUSTRY

CafePublishingCraft

UI Context UI CONTEXT

StorefrontDigital MenuPosterData Visualization

Color Details Color Details

#FFF9BB

Fresh Green · Bisque · Lemon Cream

HEX
#FFF9BB
RGB
rgb(255, 249, 187)
HSL
hsl(55, 100%, 87%)
HSB
hsb(55, 27%, 100%)
CMYK
cmyk(0%, 2%, 27%, 0%)
Oklch
oklch(97.2% 0.079 103.1)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#F2A347

Ginger · SandyBrown · Warm Sun

HEX
#F2A347
RGB
rgb(242, 163, 71)
HSL
hsl(32, 87%, 61%)
HSB
hsb(32, 71%, 95%)
CMYK
cmyk(0%, 33%, 71%, 5%)
Oklch
oklch(77.7% 0.141 66.9)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#F4E66B

Fresh Green · Khaki · Sunflower

HEX
#F4E66B
RGB
rgb(244, 230, 107)
HSL
hsl(54, 86%, 69%)
HSB
hsb(54, 56%, 96%)
CMYK
cmyk(0%, 6%, 56%, 4%)
Oklch
oklch(91.3% 0.144 102.8)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#CAD998

Willow Green · Tan · Apple Green

HEX
#CAD998
RGB
rgb(202, 217, 152)
HSL
hsl(74, 46%, 72%)
HSB
hsb(74, 30%, 85%)
CMYK
cmyk(7%, 0%, 30%, 15%)
Oklch
oklch(85.8% 0.087 118.8)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#5B8881

Mineral Blue · SlateGray · Mint Ice

HEX
#5B8881
RGB
rgb(91, 136, 129)
HSL
hsl(171, 20%, 45%)
HSB
hsb(171, 33%, 53%)
CMYK
cmyk(33%, 0%, 5%, 47%)
Oklch
oklch(59.2% 0.050 183.8)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF9BB
BDC2FF

Analogous

FFD8BD
FFF9BB
E3FFBD

Triadic

FFF9BB
BDFFF9
F9BDFF

Split-Comp.

FFF9BB
BDE3FF
D8BDFF

Tetradic

FFF9BB
BDFFD8
BDC2FF
FFBDE3

Contrast Matrix WCAG 2.1 Contrast

FFF9BB
F2A347
F4E66B
CAD998
5B8881
—
1.9
Fail
1.2
Fail
1.4
Fail
3.7
AA Large
1.9
Fail
—
1.6
Fail
1.4
Fail
1.9
Fail
1.2
Fail
1.6
Fail
—
1.2
Fail
3.1
AA Large
1.4
Fail
1.4
Fail
1.2
Fail
—
2.6
Fail
3.7
AA Large
1.9
Fail
3.1
AA Large
2.6
Fail
—
White BG
1.1Fail
2.1Fail
1.3Fail
1.5Fail
4.0AA Large
Black BG
19.5AAA
10.1AAA
16.4AAA
13.9AAA
5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FCFCCA
D0CF5D
EEEE89
D0D1A8
6E6F83

Deuteranopia

FDFDCE
D4DA63
EFF090
D0CEAC
6C6983

Tritanopia

FFD6D8
EE6F73
F3A0A5
CBB4B7
5D8484

Achromatopsia

F4F4F4
B0B0B0
DCDCDC
CDCDCD
7A7A7A

Shades & Tints Shades & Tints

#FFF9BB

Dark
Light

#F2A347

Dark
Light

#F4E66B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff9bb;
  --color-2: #f2a347;
  --color-3: #f4e66b;
  --color-4: #cad998;
  --color-5: #5b8881;
}

SCSS

$color-1: #fff9bb;
$color-2: #f2a347;
$color-3: #f4e66b;
$color-4: #cad998;
$color-5: #5b8881;

TAILWIND

colors: {
  'brand-1': '#fff9bb',
  'brand-2': '#f2a347',
  'brand-3': '#f4e66b',
  'brand-4': '#cad998',
  'brand-5': '#5b8881',
}

RGB Array

[255, 249, 187], [242, 163, 71], [244, 230, 107], [202, 217, 152], [91, 136, 129]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #FFF9BB, #F2A347, #F4E66B, #CAD998, #5B8881 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #fff9bb; --color-2: #f2a347; --color-3: #f4e66b; --color-4: #cad998; --color-5: #5b8881. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. High-contrast palettes naturally meet WCAG accessibility standards. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This vintage-style 5-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color