← Back to Editor

#325A61 · #768371 · #A89977 · #C5B68A · #D87800

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

#325A61

Slate Blue · DarkSlateGray · Mint Ice

HEX
#325A61
RGB
rgb(50, 90, 97)
HSL
hsl(189, 32%, 29%)
HSB
hsb(189, 48%, 38%)
CMYK
cmyk(48%, 7%, 0%, 62%)
Oklch
oklch(44.1% 0.046 209.9)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#768371

Ink Gray · Gray · Warm Gray

HEX
#768371
RGB
rgb(118, 131, 113)
HSL
hsl(103, 7%, 48%)
HSB
hsb(103, 14%, 51%)
CMYK
cmyk(10%, 0%, 14%, 49%)
Oklch
oklch(59.4% 0.031 137.0)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#A89977

Ginger · Gray · Sunflower

HEX
#A89977
RGB
rgb(168, 153, 119)
HSL
hsl(42, 22%, 56%)
HSB
hsb(42, 29%, 66%)
CMYK
cmyk(0%, 9%, 29%, 34%)
Oklch
oklch(68.7% 0.050 87.0)

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

#C5B68A

Ginger · Tan · Sunflower

HEX
#C5B68A
RGB
rgb(197, 182, 138)
HSL
hsl(45, 34%, 66%)
HSB
hsb(45, 30%, 77%)
CMYK
cmyk(0%, 8%, 30%, 23%)
Oklch
oklch(77.8% 0.061 91.5)

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

#D87800

Ochre · Chocolate · Amber Brown

HEX
#D87800
RGB
rgb(216, 120, 0)
HSL
hsl(33, 100%, 42%)
HSB
hsb(33, 100%, 85%)
CMYK
cmyk(0%, 44%, 100%, 15%)
Oklch
oklch(66.6% 0.157 59.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

325A61
623932

Analogous

326251
325A61
324362

Triadic

325A61
62325B
5B6232

Split-Comp.

325A61
623243
625132

Tetradic

325A61
513262
623932
436232

Contrast Matrix WCAG 2.1 Contrast

325A61
768371
A89977
C5B68A
D87800
—
1.9
Fail
2.7
Fail
3.8
AA Large
2.4
Fail
1.9
Fail
—
1.4
Fail
2.0
Fail
1.3
Fail
2.7
Fail
1.4
Fail
—
1.4
Fail
1.1
Fail
3.8
AA Large
2.0
Fail
1.4
Fail
—
1.6
Fail
2.4
Fail
1.3
Fail
1.1
Fail
1.6
Fail
—
White BG
7.6AAA
4.0AA Large
2.8Fail
2.0Fail
3.2AA Large
Black BG
2.8Fail
5.3AA
7.5AAA
10.4AAA
6.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

43445F
7C7C75
A2A17F
BFBE95
AEAE1D

Deuteranopia

413E5F
7B7A76
A2A481
BFC097
B4BB24

Tritanopia

345E5E
77797A
A78687
C49D9F
D33439

Achromatopsia

4F4F4F
7D7D7D
9A9A9A
B5B5B5
878787

Shades & Tints Shades & Tints

#325A61

Dark
Light

#768371

Dark
Light

#A89977

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #325a61;
  --color-2: #768371;
  --color-3: #a89977;
  --color-4: #c5b68a;
  --color-5: #d87800;
}

SCSS

$color-1: #325a61;
$color-2: #768371;
$color-3: #a89977;
$color-4: #c5b68a;
$color-5: #d87800;

TAILWIND

colors: {
  'brand-1': '#325a61',
  'brand-2': '#768371',
  'brand-3': '#a89977',
  'brand-4': '#c5b68a',
  'brand-5': '#d87800',
}

RGB Array

[50, 90, 97], [118, 131, 113], [168, 153, 119], [197, 182, 138], [216, 120, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #325A61, #768371, #A89977, #C5B68A, #D87800 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: #325a61; --color-2: #768371; --color-3: #a89977; --color-4: #c5b68a; --color-5: #d87800. 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