← Back to Editor

#005A58 · #877D2C · #C2A35E · #FDC98F · #CBC0A9

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 MenuPosterData Visualization

Color Details Color Details

#005A58

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#005A58
RGB
rgb(0, 90, 88)
HSL
hsl(179, 100%, 18%)
HSB
hsb(179, 100%, 35%)
CMYK
cmyk(100%, 0%, 2%, 65%)
Oklch
oklch(42.3% 0.073 192.1)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#877D2C

Autumn Sage · Olive · Honey Gold

HEX
#877D2C
RGB
rgb(135, 125, 44)
HSL
hsl(53, 51%, 35%)
HSB
hsb(53, 67%, 53%)
CMYK
cmyk(0%, 7%, 67%, 47%)
Oklch
oklch(58.3% 0.102 102.2)

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

#C2A35E

Ginger · DarkSalmon · Sunflower

HEX
#C2A35E
RGB
rgb(194, 163, 94)
HSL
hsl(41, 45%, 56%)
HSB
hsb(41, 52%, 76%)
CMYK
cmyk(0%, 16%, 52%, 24%)
Oklch
oklch(72.8% 0.095 85.9)

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

#FDC98F

Goose Yellow · Khaki · Peach Orange

HEX
#FDC98F
RGB
rgb(253, 201, 143)
HSL
hsl(32, 96%, 78%)
HSB
hsb(32, 43%, 99%)
CMYK
cmyk(0%, 21%, 43%, 1%)
Oklch
oklch(86.9% 0.095 69.1)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#CBC0A9

Goose Yellow · Silver · Sunflower

HEX
#CBC0A9
RGB
rgb(203, 192, 169)
HSL
hsl(41, 25%, 73%)
HSB
hsb(41, 17%, 80%)
CMYK
cmyk(0%, 5%, 17%, 20%)
Oklch
oklch(81.1% 0.034 85.5)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

005A58
5C0002

Analogous

005C2C
005A58
002F5C

Triadic

005A58
5A005C
5C5A00

Split-Comp.

005A58
5C002F
5C2C00

Tetradic

005A58
2C005C
5C0002
2F5C00

Contrast Matrix WCAG 2.1 Contrast

005A58
877D2C
C2A35E
FDC98F
CBC0A9
—
1.9
Fail
3.3
AA Large
5.3
AA
4.5
AA Large
1.9
Fail
—
1.7
Fail
2.8
Fail
2.3
Fail
3.3
AA Large
1.7
Fail
—
1.6
Fail
1.3
Fail
5.3
AA
2.8
Fail
1.6
Fail
—
1.2
Fail
4.5
AA Large
2.3
Fail
1.3
Fail
1.2
Fail
—
White BG
8.1AAA
4.2AA Large
2.4Fail
1.5Fail
1.8Fail
Black BG
2.6Fail
5.0AA
8.7AAA
13.9AAA
11.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

272858
838340
B5B46F
E6E69D
C6C6AF

Deuteranopia

221B59
838444
B6B973
EAEDA0
C7C8B0

Tritanopia

055959
874F52
C07C7F
FAA8AB
CAB3B4

Achromatopsia

3F3F3F
777777
A4A4A4
D2D2D2
C1C1C1

Shades & Tints Shades & Tints

#005A58

Dark
Light

#877D2C

Dark
Light

#C2A35E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #005a58;
  --color-2: #877d2c;
  --color-3: #c2a35e;
  --color-4: #fdc98f;
  --color-5: #cbc0a9;
}

SCSS

$color-1: #005a58;
$color-2: #877d2c;
$color-3: #c2a35e;
$color-4: #fdc98f;
$color-5: #cbc0a9;

TAILWIND

colors: {
  'brand-1': '#005a58',
  'brand-2': '#877d2c',
  'brand-3': '#c2a35e',
  'brand-4': '#fdc98f',
  'brand-5': '#cbc0a9',
}

RGB Array

[0, 90, 88], [135, 125, 44], [194, 163, 94], [253, 201, 143], [203, 192, 169]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #005A58, #877D2C, #C2A35E, #FDC98F, #CBC0A9 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #005a58; --color-2: #877d2c; --color-3: #c2a35e; --color-4: #fdc98f; --color-5: #cbc0a9. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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