← Back to Editor

#E8E6C7 · #CEE1D3 · #9B9987 · #879B8E · #2C1B1C

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

#E8E6C7

Fresh Green · Bisque · Lemon Cream

HEX
#E8E6C7
RGB
rgb(232, 230, 199)
HSL
hsl(56, 42%, 85%)
HSB
hsb(56, 14%, 91%)
CMYK
cmyk(0%, 1%, 14%, 9%)
Oklch
oklch(91.8% 0.041 104.1)

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

#CEE1D3

Celadon · LightGray · Mint Green

HEX
#CEE1D3
RGB
rgb(206, 225, 211)
HSL
hsl(136, 24%, 85%)
HSB
hsb(136, 8%, 88%)
CMYK
cmyk(8%, 0%, 6%, 12%)
Oklch
oklch(89.2% 0.028 153.8)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#9B9987

Autumn Sage · Gray · Silver Sand

HEX
#9B9987
RGB
rgb(155, 153, 135)
HSL
hsl(54, 9%, 57%)
HSB
hsb(54, 13%, 61%)
CMYK
cmyk(0%, 1%, 13%, 39%)
Oklch
oklch(68.0% 0.026 101.9)

Traditional「Autumn Sage」· Paint「Silver Sand」· Creative Urban Concrete

#879B8E

Celadon · LightSlateGray · Silver Sand

HEX
#879B8E
RGB
rgb(135, 155, 142)
HSL
hsl(141, 9%, 57%)
HSB
hsb(141, 13%, 61%)
CMYK
cmyk(13%, 0%, 8%, 39%)
Oklch
oklch(67.0% 0.030 157.0)

Traditional「Celadon」· Paint「Silver Sand」· Creative Urban Concrete

#2C1B1C

Crimson · Black · Deep Berry

HEX
#2C1B1C
RGB
rgb(44, 27, 28)
HSL
hsl(356, 24%, 14%)
HSB
hsb(356, 39%, 17%)
CMYK
cmyk(0%, 39%, 36%, 83%)
Oklch
oklch(24.4% 0.027 15.4)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E8E6C7
C9CBE9

Analogous

E9D7C9
E8E6C7
DBE9C9

Triadic

E8E6C7
C9E9E7
E7C9E9

Split-Comp.

E8E6C7
C9DBE9
D7C9E9

Tetradic

E8E6C7
C9E9D7
C9CBE9
E9C9DB

Contrast Matrix WCAG 2.1 Contrast

E8E6C7
CEE1D3
9B9987
879B8E
2C1B1C
—
1.1
Fail
2.3
Fail
2.3
Fail
12.9
AAA
1.1
Fail
—
2.1
Fail
2.2
Fail
12.0
AAA
2.3
Fail
2.1
Fail
—
1.0
Fail
5.7
AA
2.3
Fail
2.2
Fail
1.0
Fail
—
5.6
AA
12.9
AAA
12.0
AAA
5.7
AA
5.6
AA
—
White BG
1.3Fail
1.4Fail
2.9Fail
3.0Fail
16.4AAA
Black BG
16.6AAA
15.3AAA
7.3AAA
7.1AAA
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E7CF
D6D6D6
9A9A8B
909091
25241C

Deuteranopia

E7E7D0
D5D4D7
9A9A8C
8F8D92
26271C

Tritanopia

E8D4D6
CFD9DA
9B8F90
889494
2B1C1C

Achromatopsia

E3E3E3
DADADA
989898
949494
202020

Shades & Tints Shades & Tints

#E8E6C7

Dark
Light

#CEE1D3

Dark
Light

#9B9987

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e8e6c7;
  --color-2: #cee1d3;
  --color-3: #9b9987;
  --color-4: #879b8e;
  --color-5: #2c1b1c;
}

SCSS

$color-1: #e8e6c7;
$color-2: #cee1d3;
$color-3: #9b9987;
$color-4: #879b8e;
$color-5: #2c1b1c;

TAILWIND

colors: {
  'brand-1': '#e8e6c7',
  'brand-2': '#cee1d3',
  'brand-3': '#9b9987',
  'brand-4': '#879b8e',
  'brand-5': '#2c1b1c',
}

RGB Array

[232, 230, 199], [206, 225, 211], [155, 153, 135], [135, 155, 142], [44, 27, 28]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #E8E6C7, #CEE1D3, #9B9987, #879B8E, #2C1B1C is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #e8e6c7; --color-2: #cee1d3; --color-3: #9b9987; --color-4: #879b8e; --color-5: #2c1b1c. 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. Restrained colors convey professionalism and trust. 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