← Back to Editor

#8D322F · #B1745F · #CEC896 · #8EA789 · #7E7C55

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

#8D322F

Crimson · Brown · Wine Red

HEX
#8D322F
RGB
rgb(141, 50, 47)
HSL
hsl(2, 50%, 37%)
HSB
hsb(2, 67%, 55%)
CMYK
cmyk(0%, 65%, 67%, 45%)
Oklch
oklch(44.8% 0.125 25.3)

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

#B1745F

Tangerine · Gray · Warm Sun

HEX
#B1745F
RGB
rgb(177, 116, 95)
HSL
hsl(15, 34%, 53%)
HSB
hsb(15, 46%, 69%)
CMYK
cmyk(0%, 34%, 46%, 31%)
Oklch
oklch(61.8% 0.084 39.8)

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

#CEC896

Fresh Green · Tan · Sunflower

HEX
#CEC896
RGB
rgb(206, 200, 150)
HSL
hsl(54, 36%, 70%)
HSB
hsb(54, 27%, 81%)
CMYK
cmyk(0%, 3%, 27%, 19%)
Oklch
oklch(82.5% 0.067 102.0)

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

#8EA789

Celadon · DarkSeaGreen · Olive Green

HEX
#8EA789
RGB
rgb(142, 167, 137)
HSL
hsl(110, 15%, 60%)
HSB
hsb(110, 18%, 65%)
CMYK
cmyk(15%, 0%, 18%, 35%)
Oklch
oklch(70.1% 0.051 140.4)

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

#7E7C55

Autumn Sage · DimGray · Honey Gold

HEX
#7E7C55
RGB
rgb(126, 124, 85)
HSL
hsl(57, 19%, 41%)
HSB
hsb(57, 33%, 49%)
CMYK
cmyk(0%, 2%, 33%, 51%)
Oklch
oklch(57.8% 0.056 105.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8D322F
2F8A8E

Analogous

8E2F5B
8D322F
8E612F

Triadic

8D322F
2F8E32
322F8E

Split-Comp.

8D322F
2F8E61
2F5B8E

Tetradic

8D322F
5B8E2F
2F8A8E
612F8E

Contrast Matrix WCAG 2.1 Contrast

8D322F
B1745F
CEC896
8EA789
7E7C55
—
2.1
Fail
4.7
AA
3.1
AA Large
1.9
Fail
2.1
Fail
—
2.2
Fail
1.5
Fail
1.1
Fail
4.7
AA
2.2
Fail
—
1.5
Fail
2.5
Fail
3.1
AA Large
1.5
Fail
1.5
Fail
—
1.6
Fail
1.9
Fail
1.1
Fail
2.5
Fail
1.6
Fail
—
White BG
8.0AAA
3.8AA Large
1.7Fail
2.6Fail
4.3AA Large
Black BG
2.6Fail
5.5AA
12.3AAA
8.0AAA
4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

666530
979664
CBCBA2
999990
7D7D5E

Deuteranopia

6B7230
9A9F65
CCCCA5
979692
7D7D61

Tritanopia

883030
AE6869
CEACAE
8F9697
7E6668

Achromatopsia

4D4D4D
848484
C4C4C4
9C9C9C
787878

Shades & Tints Shades & Tints

#8D322F

Dark
Light

#B1745F

Dark
Light

#CEC896

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8d322f;
  --color-2: #b1745f;
  --color-3: #cec896;
  --color-4: #8ea789;
  --color-5: #7e7c55;
}

SCSS

$color-1: #8d322f;
$color-2: #b1745f;
$color-3: #cec896;
$color-4: #8ea789;
$color-5: #7e7c55;

TAILWIND

colors: {
  'brand-1': '#8d322f',
  'brand-2': '#b1745f',
  'brand-3': '#cec896',
  'brand-4': '#8ea789',
  'brand-5': '#7e7c55',
}

RGB Array

[141, 50, 47], [177, 116, 95], [206, 200, 150], [142, 167, 137], [126, 124, 85]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #8D322F, #B1745F, #CEC896, #8EA789, #7E7C55 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: #8d322f; --color-2: #b1745f; --color-3: #cec896; --color-4: #8ea789; --color-5: #7e7c55. 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