← Back to Editor

#B7EAA7 · #DBC115 · #F78258 · #4378AC · #D6E2DD

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 MenuPoster

Color Details Color Details

#B7EAA7

Emerald · LightGreen · Apple Green

HEX
#B7EAA7
RGB
rgb(183, 234, 167)
HSL
hsl(106, 61%, 79%)
HSB
hsb(106, 29%, 92%)
CMYK
cmyk(22%, 0%, 29%, 8%)
Oklch
oklch(88.5% 0.104 138.3)

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

#DBC115

Autumn Sage · GoldenRod · Honey Gold

HEX
#DBC115
RGB
rgb(219, 193, 21)
HSL
hsl(52, 83%, 47%)
HSB
hsb(52, 90%, 86%)
CMYK
cmyk(0%, 12%, 90%, 14%)
Oklch
oklch(80.9% 0.164 99.2)

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

#F78258

Apricot · Coral · Warm Sun

HEX
#F78258
RGB
rgb(247, 130, 88)
HSL
hsl(16, 91%, 66%)
HSB
hsb(16, 64%, 97%)
CMYK
cmyk(0%, 47%, 64%, 3%)
Oklch
oklch(73.0% 0.154 40.1)

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

#4378AC

Indigo · SteelBlue · Navy Blue

HEX
#4378AC
RGB
rgb(67, 120, 172)
HSL
hsl(210, 44%, 47%)
HSB
hsb(210, 61%, 67%)
CMYK
cmyk(61%, 30%, 0%, 33%)
Oklch
oklch(55.9% 0.099 249.6)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#D6E2DD

Jade · LightGray · Mint Green

HEX
#D6E2DD
RGB
rgb(214, 226, 221)
HSL
hsl(155, 17%, 86%)
HSB
hsb(155, 5%, 89%)
CMYK
cmyk(5%, 0%, 2%, 11%)
Oklch
oklch(90.2% 0.015 169.2)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B7EAA7
DBA9EA

Analogous

D9EAA9
B7EAA7
A9EABA

Triadic

B7EAA7
A9B8EA
EAA9B8

Split-Comp.

B7EAA7
BAA9EA
EAA9D9

Tetradic

B7EAA7
A9D9EA
DBA9EA
EABAA9

Contrast Matrix WCAG 2.1 Contrast

B7EAA7
DBC115
F78258
4378AC
D6E2DD
—
1.3
Fail
1.9
Fail
3.4
AA Large
1.0
Fail
1.3
Fail
—
1.4
Fail
2.6
Fail
1.4
Fail
1.9
Fail
1.4
Fail
—
1.8
Fail
1.9
Fail
3.4
AA Large
2.6
Fail
1.8
Fail
—
3.5
AA Large
1.0
Fail
1.4
Fail
1.9
Fail
3.5
AA Large
—
White BG
1.4Fail
1.8Fail
2.5Fail
4.6AA
1.3Fail
Black BG
15.3AAA
11.7AAA
8.3AAA
4.5AA
15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CDCEB7
D0D03F
C4C362
5A5A9F
DBDBDE

Deuteranopia

CAC6BB
D1D349
CBD465
57539C
DBDADF

Tritanopia

BAC4C7
DA5F67
F16A6C
469593
D7DFDF

Achromatopsia

D3D3D3
B5B5B5
A0A0A0
6E6E6E
DEDEDE

Shades & Tints Shades & Tints

#B7EAA7

Dark
Light

#DBC115

Dark
Light

#F78258

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b7eaa7;
  --color-2: #dbc115;
  --color-3: #f78258;
  --color-4: #4378ac;
  --color-5: #d6e2dd;
}

SCSS

$color-1: #b7eaa7;
$color-2: #dbc115;
$color-3: #f78258;
$color-4: #4378ac;
$color-5: #d6e2dd;

TAILWIND

colors: {
  'brand-1': '#b7eaa7',
  'brand-2': '#dbc115',
  'brand-3': '#f78258',
  'brand-4': '#4378ac',
  'brand-5': '#d6e2dd',
}

RGB Array

[183, 234, 167], [219, 193, 21], [247, 130, 88], [67, 120, 172], [214, 226, 221]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #B7EAA7, #DBC115, #F78258, #4378AC, #D6E2DD is ideal for: corporate websites, product showcases, portfolios. 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: #b7eaa7; --color-2: #dbc115; --color-3: #f78258; --color-4: #4378ac; --color-5: #d6e2dd. 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. 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