← Back to Editor

#E0E8B6 · #E2EDD1 · #D7E8BB · #BDD694 · #C4D087

vintage

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

NostalgicClassicTimeless

Industry INDUSTRY

CafePublishingCraft

UI Context UI CONTEXT

StorefrontDigital MenuPoster

Color Details Color Details

#E0E8B6

Willow Green · Wheat · Mint Green

HEX
#E0E8B6
RGB
rgb(224, 232, 182)
HSL
hsl(70, 52%, 81%)
HSB
hsb(70, 22%, 91%)
CMYK
cmyk(3%, 0%, 22%, 9%)
Oklch
oklch(91.2% 0.066 115.1)

TraditionalWillow Green」· PaintMint Green」· Creative Mint Breeze

#E2EDD1

Willow Green · Beige · Mint Green

HEX
#E2EDD1
RGB
rgb(226, 237, 209)
HSL
hsl(84, 44%, 87%)
HSB
hsb(84, 12%, 93%)
CMYK
cmyk(5%, 0%, 12%, 7%)
Oklch
oklch(93.0% 0.039 124.7)

TraditionalWillow Green」· PaintMint Green」· Creative Mint Breeze

#D7E8BB

Willow Green · LightGray · Mint Green

HEX
#D7E8BB
RGB
rgb(215, 232, 187)
HSL
hsl(83, 49%, 82%)
HSB
hsb(83, 19%, 91%)
CMYK
cmyk(7%, 0%, 19%, 9%)
Oklch
oklch(90.7% 0.062 124.5)

TraditionalWillow Green」· PaintMint Green」· Creative Mint Breeze

#BDD694

Willow Green · Tan · Apple Green

HEX
#BDD694
RGB
rgb(189, 214, 148)
HSL
hsl(83, 45%, 71%)
HSB
hsb(83, 31%, 84%)
CMYK
cmyk(12%, 0%, 31%, 16%)
Oklch
oklch(84.1% 0.092 125.2)

TraditionalWillow Green」· PaintApple Green」· Creative Mint Breeze

#C4D087

Willow Green · Tan · Apple Green

HEX
#C4D087
RGB
rgb(196, 208, 135)
HSL
hsl(70, 44%, 67%)
HSB
hsb(70, 35%, 82%)
CMYK
cmyk(6%, 0%, 35%, 18%)
Oklch
oklch(83.1% 0.096 116.1)

TraditionalWillow Green」· PaintApple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E0E8B6
BEB5E8

Analogous

E8D7B5
E0E8B6
C6E8B5

Triadic

E0E8B6
B5DFE8
E8B5DF

Split-Comp.

E0E8B6
B5C6E8
D7B5E8

Tetradic

E0E8B6
B5E8D7
BEB5E8
E8B5C6

Contrast Matrix WCAG 2.1 Contrast

E0E8B6
E2EDD1
D7E8BB
BDD694
C4D087
1.1
Fail
1.0
Fail
1.2
Fail
1.3
Fail
1.1
Fail
1.1
Fail
1.3
Fail
1.4
Fail
1.0
Fail
1.1
Fail
1.2
Fail
1.3
Fail
1.2
Fail
1.3
Fail
1.2
Fail
1.0
Fail
1.3
Fail
1.4
Fail
1.3
Fail
1.0
Fail
White BG
1.3Fail
1.2Fail
1.3Fail
1.6Fail
1.7Fail
Black BG
16.4AAA
17.3AAA
16.1AAA
13.2AAA
12.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E4C2
E7E7D8
DEDFC6
C8C8A4
C9C999

Deuteranopia

E3E2C5
E6E5D9
DDDCC9
C6C5A8
C9C89D

Tritanopia

E0CCCE
E3DDDE
D8CED0
BEB1B3
C5A7AA

Achromatopsia

E0E0E0
E7E7E7
DEDEDE
C7C7C7
C4C4C4

Shades & Tints Shades & Tints

#E0E8B6

Dark
Light

#E2EDD1

Dark
Light

#D7E8BB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e0e8b6;
  --color-2: #e2edd1;
  --color-3: #d7e8bb;
  --color-4: #bdd694;
  --color-5: #c4d087;
}

SCSS

$color-1: #e0e8b6;
$color-2: #e2edd1;
$color-3: #d7e8bb;
$color-4: #bdd694;
$color-5: #c4d087;

TAILWIND

colors: {
  'brand-1': '#e0e8b6',
  'brand-2': '#e2edd1',
  'brand-3': '#d7e8bb',
  'brand-4': '#bdd694',
  'brand-5': '#c4d087',
}

RGB Array

[224, 232, 182], [226, 237, 209], [215, 232, 187], [189, 214, 148], [196, 208, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #E0E8B6, #E2EDD1, #D7E8BB, #BDD694, #C4D087 is ideal for: health products, baby brands, fresh-style blogs. 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: #e0e8b6; --color-2: #e2edd1; --color-3: #d7e8bb; --color-4: #bdd694; --color-5: #c4d087. 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. 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