← Back to Editor

#658A73 · #C5B57A · #789A78 · #6E594A · #D1B857

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

#658A73

Celadon · Gray · Olive Green

HEX
#658A73
RGB
rgb(101, 138, 115)
HSL
hsl(143, 15%, 47%)
HSB
hsb(143, 27%, 54%)
CMYK
cmyk(27%, 0%, 17%, 46%)
Oklch
oklch(59.9% 0.054 157.0)

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

#C5B57A

Ginger · Tan · Sunflower

HEX
#C5B57A
RGB
rgb(197, 181, 122)
HSL
hsl(47, 39%, 63%)
HSB
hsb(47, 38%, 77%)
CMYK
cmyk(0%, 8%, 38%, 23%)
Oklch
oklch(77.3% 0.080 94.8)

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

#789A78

Celadon · Gray · Olive Green

HEX
#789A78
RGB
rgb(120, 154, 120)
HSL
hsl(120, 14%, 54%)
HSB
hsb(120, 22%, 60%)
CMYK
cmyk(22%, 0%, 22%, 40%)
Oklch
oklch(65.1% 0.063 144.8)

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

#6E594A

Tangerine · DimGray · Amber Brown

HEX
#6E594A
RGB
rgb(110, 89, 74)
HSL
hsl(25, 20%, 36%)
HSB
hsb(25, 33%, 43%)
CMYK
cmyk(0%, 19%, 33%, 57%)
Oklch
oklch(48.1% 0.036 57.3)

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

#D1B857

Ginger · SandyBrown · Sunflower

HEX
#D1B857
RGB
rgb(209, 184, 87)
HSL
hsl(48, 57%, 58%)
HSB
hsb(48, 58%, 82%)
CMYK
cmyk(0%, 12%, 58%, 18%)
Oklch
oklch(78.5% 0.120 95.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

658A73
8A667C

Analogous

6A8A66
658A73
668A86

Triadic

658A73
74668A
8A7466

Split-Comp.

658A73
86668A
8A666A

Tetradic

658A73
666A8A
8A667C
8A8666

Contrast Matrix WCAG 2.1 Contrast

658A73
C5B57A
789A78
6E594A
D1B857
—
1.9
Fail
1.2
Fail
1.7
Fail
2.0
Fail
1.9
Fail
—
1.5
Fail
3.2
AA Large
1.0
Fail
1.2
Fail
1.5
Fail
—
2.1
Fail
1.6
Fail
1.7
Fail
3.2
AA Large
2.1
Fail
—
3.4
AA Large
2.0
Fail
1.0
Fail
1.6
Fail
3.4
AA Large
—
White BG
3.9AA Large
2.0Fail
3.1AA Large
6.6AA
2.0Fail
Black BG
5.4AA
10.3AAA
6.7AA
3.2AA Large
10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

757579
BEBE88
878780
65654E
C6C66E

Deuteranopia

73707A
BFC08C
858282
66684F
C8C974

Tritanopia

677D7E
C49496
7A8788
6D5051
D08185

Achromatopsia

7C7C7C
B3B3B3
8C8C8C
5E5E5E
B4B4B4

Shades & Tints Shades & Tints

#658A73

Dark
Light

#C5B57A

Dark
Light

#789A78

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #658a73;
  --color-2: #c5b57a;
  --color-3: #789a78;
  --color-4: #6e594a;
  --color-5: #d1b857;
}

SCSS

$color-1: #658a73;
$color-2: #c5b57a;
$color-3: #789a78;
$color-4: #6e594a;
$color-5: #d1b857;

TAILWIND

colors: {
  'brand-1': '#658a73',
  'brand-2': '#c5b57a',
  'brand-3': '#789a78',
  'brand-4': '#6e594a',
  'brand-5': '#d1b857',
}

RGB Array

[101, 138, 115], [197, 181, 122], [120, 154, 120], [110, 89, 74], [209, 184, 87]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #658A73, #C5B57A, #789A78, #6E594A, #D1B857 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #658a73; --color-2: #c5b57a; --color-3: #789a78; --color-4: #6e594a; --color-5: #d1b857. 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. Restrained colors convey professionalism and trust. 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