← Back to Editor

#D95638 · #DE9454 · #D4C48C · #B8BF9D · #878C72

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

#D95638

Vermilion · Chocolate · Passion Red

HEX
#D95638
RGB
rgb(217, 86, 56)
HSL
hsl(11, 68%, 54%)
HSB
hsb(11, 74%, 85%)
CMYK
cmyk(0%, 60%, 74%, 15%)
Oklch
oklch(62.0% 0.171 34.3)

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

#DE9454

Tangerine · SandyBrown · Warm Sun

HEX
#DE9454
RGB
rgb(222, 148, 84)
HSL
hsl(28, 68%, 60%)
HSB
hsb(28, 62%, 87%)
CMYK
cmyk(0%, 33%, 62%, 13%)
Oklch
oklch(72.8% 0.120 60.0)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#D4C48C

Ginger · Tan · Sunflower

HEX
#D4C48C
RGB
rgb(212, 196, 140)
HSL
hsl(47, 46%, 69%)
HSB
hsb(47, 34%, 83%)
CMYK
cmyk(0%, 8%, 34%, 17%)
Oklch
oklch(82.0% 0.075 94.1)

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

#B8BF9D

Willow Green · DarkGray · Apple Green

HEX
#B8BF9D
RGB
rgb(184, 191, 157)
HSL
hsl(72, 21%, 68%)
HSB
hsb(72, 18%, 75%)
CMYK
cmyk(4%, 0%, 18%, 25%)
Oklch
oklch(79.0% 0.047 116.9)

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

#878C72

Grass Green · Gray · Olive Green

HEX
#878C72
RGB
rgb(135, 140, 114)
HSL
hsl(72, 10%, 50%)
HSB
hsb(72, 19%, 55%)
CMYK
cmyk(4%, 0%, 19%, 45%)
Oklch
oklch(62.9% 0.038 116.3)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D95638
3ABCD9

Analogous

D93A6C
D95638
D9A73A

Triadic

D95638
3AD957
573AD9

Split-Comp.

D95638
3AD9A7
3A6CD9

Tetradic

D95638
6CD93A
3ABCD9
A73AD9

Contrast Matrix WCAG 2.1 Contrast

D95638
DE9454
D4C48C
B8BF9D
878C72
—
1.6
Fail
2.3
Fail
2.1
Fail
1.1
Fail
1.6
Fail
—
1.4
Fail
1.3
Fail
1.4
Fail
2.3
Fail
1.4
Fail
—
1.1
Fail
2.0
Fail
2.1
Fail
1.3
Fail
1.1
Fail
—
1.8
Fail
1.1
Fail
1.4
Fail
2.0
Fail
1.8
Fail
—
White BG
3.9AA Large
2.5Fail
1.7Fail
1.9Fail
3.5AA Large
Black BG
5.3AA
8.5AAA
12.1AAA
11.0AAA
6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A09F3F
BEBD63
CDCD9A
BBBBA5
898978

Deuteranopia

A8B241
C2C867
CECF9D
BBBAA7
89897A

Tritanopia

D24546
DA7072
D3A4A7
B8ACAD
877D7E

Achromatopsia

7A7A7A
A3A3A3
C2C2C2
B9B9B9
888888

Shades & Tints Shades & Tints

#D95638

Dark
Light

#DE9454

Dark
Light

#D4C48C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d95638;
  --color-2: #de9454;
  --color-3: #d4c48c;
  --color-4: #b8bf9d;
  --color-5: #878c72;
}

SCSS

$color-1: #d95638;
$color-2: #de9454;
$color-3: #d4c48c;
$color-4: #b8bf9d;
$color-5: #878c72;

TAILWIND

colors: {
  'brand-1': '#d95638',
  'brand-2': '#de9454',
  'brand-3': '#d4c48c',
  'brand-4': '#b8bf9d',
  'brand-5': '#878c72',
}

RGB Array

[217, 86, 56], [222, 148, 84], [212, 196, 140], [184, 191, 157], [135, 140, 114]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #D95638, #DE9454, #D4C48C, #B8BF9D, #878C72 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: #d95638; --color-2: #de9454; --color-3: #d4c48c; --color-4: #b8bf9d; --color-5: #878c72. 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