← Back to Editor

#8E7157 · #DBC182 · #E7967C · #CC7878 · #93767C

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 MenuPoster

Color Details Color Details

#8E7157

Tangerine · DimGray · Amber Brown

HEX
#8E7157
RGB
rgb(142, 113, 87)
HSL
hsl(28, 24%, 45%)
HSB
hsb(28, 39%, 56%)
CMYK
cmyk(0%, 20%, 39%, 44%)
Oklch
oklch(57.0% 0.053 63.3)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#DBC182

Ginger · BurlyWood · Sunflower

HEX
#DBC182
RGB
rgb(219, 193, 130)
HSL
hsl(42, 55%, 68%)
HSB
hsb(42, 41%, 86%)
CMYK
cmyk(0%, 12%, 41%, 14%)
Oklch
oklch(81.9% 0.086 88.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#E7967C

Apricot · DarkSalmon · Warm Sun

HEX
#E7967C
RGB
rgb(231, 150, 124)
HSL
hsl(15, 69%, 70%)
HSB
hsb(15, 46%, 91%)
CMYK
cmyk(0%, 35%, 46%, 9%)
Oklch
oklch(74.9% 0.105 38.6)

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

#CC7878

Peach Pink · LightCoral · Coral Red

HEX
#CC7878
RGB
rgb(204, 120, 120)
HSL
hsl(0, 45%, 64%)
HSB
hsb(0, 41%, 80%)
CMYK
cmyk(0%, 41%, 41%, 20%)
Oklch
oklch(66.4% 0.105 20.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#93767C

Crimson · Gray · Passion Red

HEX
#93767C
RGB
rgb(147, 118, 124)
HSL
hsl(348, 12%, 52%)
HSB
hsb(348, 20%, 58%)
CMYK
cmyk(0%, 20%, 16%, 42%)
Oklch
oklch(59.5% 0.037 4.4)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8E7157
57758E

Analogous

8E5759
8E7157
8E8C57

Triadic

8E7157
578E71
71578E

Split-Comp.

8E7157
578E8C
57598E

Tetradic

8E7157
598E57
57758E
8C578E

Contrast Matrix WCAG 2.1 Contrast

8E7157
DBC182
E7967C
CC7878
93767C
—
2.6
Fail
1.9
Fail
1.4
Fail
1.1
Fail
2.6
Fail
—
1.3
Fail
1.8
Fail
2.3
Fail
1.9
Fail
1.3
Fail
—
1.4
Fail
1.8
Fail
1.4
Fail
1.8
Fail
1.4
Fail
—
1.3
Fail
1.1
Fail
2.3
Fail
1.8
Fail
1.3
Fail
—
White BG
4.5AA
1.8Fail
2.3Fail
3.2AA Large
4.1AA Large
Black BG
4.6AA
12.0AAA
9.1AAA
6.5AA
5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

81815D
D0D091
C4C382
A8A778
86867B

Deuteranopia

83855F
D1D395
C9CF84
ADB378
888A7A

Tritanopia

8D6263
DA9DA0
E38788
C87878
927979

Achromatopsia

777777
C2C2C2
ABABAB
919191
7F7F7F

Shades & Tints Shades & Tints

#8E7157

Dark
Light

#DBC182

Dark
Light

#E7967C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8e7157;
  --color-2: #dbc182;
  --color-3: #e7967c;
  --color-4: #cc7878;
  --color-5: #93767c;
}

SCSS

$color-1: #8e7157;
$color-2: #dbc182;
$color-3: #e7967c;
$color-4: #cc7878;
$color-5: #93767c;

TAILWIND

colors: {
  'brand-1': '#8e7157',
  'brand-2': '#dbc182',
  'brand-3': '#e7967c',
  'brand-4': '#cc7878',
  'brand-5': '#93767c',
}

RGB Array

[142, 113, 87], [219, 193, 130], [231, 150, 124], [204, 120, 120], [147, 118, 124]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #8E7157, #DBC182, #E7967C, #CC7878, #93767C 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: #8e7157; --color-2: #dbc182; --color-3: #e7967c; --color-4: #cc7878; --color-5: #93767c. 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