← Back to Editor

#FFF7CB · #D4CC9B · #B5B380 · #A3A26A · #8A8A4E

vintage

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

NostalgicClassicTimelessWarm

Industry INDUSTRY

CafePublishingCraft

UI Context UI CONTEXT

StorefrontDigital MenuPosterData Visualization

Color Details Color Details

#FFF7CB

Fresh Green · Beige · Lemon Cream

HEX
#FFF7CB
RGB
rgb(255, 247, 203)
HSL
hsl(51, 100%, 90%)
HSB
hsb(51, 20%, 100%)
CMYK
cmyk(0%, 3%, 20%, 0%)
Oklch
oklch(97.1% 0.057 98.8)

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

#D4CC9B

Fresh Green · Tan · Sunflower

HEX
#D4CC9B
RGB
rgb(212, 204, 155)
HSL
hsl(52, 40%, 72%)
HSB
hsb(52, 27%, 83%)
CMYK
cmyk(0%, 4%, 27%, 17%)
Oklch
oklch(84.0% 0.065 99.9)

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

#B5B380

Fresh Green · Tan · Sunflower

HEX
#B5B380
RGB
rgb(181, 179, 128)
HSL
hsl(58, 26%, 61%)
HSB
hsb(58, 29%, 71%)
CMYK
cmyk(0%, 1%, 29%, 29%)
Oklch
oklch(75.6% 0.069 106.0)

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

#A3A26A

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#A3A26A
RGB
rgb(163, 162, 106)
HSL
hsl(59, 24%, 53%)
HSB
hsb(59, 35%, 64%)
CMYK
cmyk(0%, 1%, 35%, 36%)
Oklch
oklch(70.0% 0.076 107.3)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#8A8A4E

Autumn Sage · Gray · Honey Gold

HEX
#8A8A4E
RGB
rgb(138, 138, 78)
HSL
hsl(60, 28%, 42%)
HSB
hsb(60, 43%, 54%)
CMYK
cmyk(0%, 0%, 43%, 46%)
Oklch
oklch(61.9% 0.082 108.6)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF7CB
CCD4FF

Analogous

FFDECC
FFF7CB
EDFFCC

Triadic

FFF7CB
CCFFF7
F7CCFF

Split-Comp.

FFF7CB
CCEDFF
DECCFF

Tetradic

FFF7CB
CCFFDE
CCD4FF
FFCCED

Contrast Matrix WCAG 2.1 Contrast

FFF7CB
D4CC9B
B5B380
A3A26A
8A8A4E
—
1.5
Fail
2.0
Fail
2.4
Fail
3.3
AA Large
1.5
Fail
—
1.3
Fail
1.6
Fail
2.2
Fail
2.0
Fail
1.3
Fail
—
1.2
Fail
1.7
Fail
2.4
Fail
1.6
Fail
1.2
Fail
—
1.4
Fail
3.3
AA Large
2.2
Fail
1.7
Fail
1.4
Fail
—
White BG
1.1Fail
1.6Fail
2.2Fail
2.6Fail
3.6AA Large
Black BG
19.4AAA
12.9AAA
9.7AAA
7.9AAA
5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FCFBD6
D1D0A7
B4B48C
A3A378
8A8A5D

Deuteranopia

FCFDD8
D1D2AA
B4B48F
A3A37B
8A8A60

Tritanopia

FFDEE0
D4B0B2
B59698
A38285
8A686B

Achromatopsia

F4F4F4
C9C9C9
AEAEAE
9C9C9C
838383

Shades & Tints Shades & Tints

#FFF7CB

Dark
Light

#D4CC9B

Dark
Light

#B5B380

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff7cb;
  --color-2: #d4cc9b;
  --color-3: #b5b380;
  --color-4: #a3a26a;
  --color-5: #8a8a4e;
}

SCSS

$color-1: #fff7cb;
$color-2: #d4cc9b;
$color-3: #b5b380;
$color-4: #a3a26a;
$color-5: #8a8a4e;

TAILWIND

colors: {
  'brand-1': '#fff7cb',
  'brand-2': '#d4cc9b',
  'brand-3': '#b5b380',
  'brand-4': '#a3a26a',
  'brand-5': '#8a8a4e',
}

RGB Array

[255, 247, 203], [212, 204, 155], [181, 179, 128], [163, 162, 106], [138, 138, 78]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #FFF7CB, #D4CC9B, #B5B380, #A3A26A, #8A8A4E is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #fff7cb; --color-2: #d4cc9b; --color-3: #b5b380; --color-4: #a3a26a; --color-5: #8a8a4e. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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 tech, SaaS, healthcare, eco industries. 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