← Back to Editor

#573731 · #CD5550 · #E6D45F · #A59256 · #584A28

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

#573731

Crimson · DarkOliveGreen · Wine Red

HEX
#573731
RGB
rgb(87, 55, 49)
HSL
hsl(9, 28%, 27%)
HSB
hsb(9, 44%, 34%)
CMYK
cmyk(0%, 37%, 44%, 66%)
Oklch
oklch(37.3% 0.047 31.1)

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

#CD5550

Crimson · Tomato · Passion Red

HEX
#CD5550
RGB
rgb(205, 85, 80)
HSL
hsl(2, 56%, 56%)
HSB
hsb(2, 61%, 80%)
CMYK
cmyk(0%, 59%, 61%, 20%)
Oklch
oklch(60.3% 0.154 25.2)

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

#E6D45F

Fresh Green · BurlyWood · Sunflower

HEX
#E6D45F
RGB
rgb(230, 212, 95)
HSL
hsl(52, 73%, 64%)
HSB
hsb(52, 59%, 90%)
CMYK
cmyk(0%, 8%, 59%, 10%)
Oklch
oklch(86.2% 0.138 100.6)

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

#A59256

Ochre · Gray · Honey Gold

HEX
#A59256
RGB
rgb(165, 146, 86)
HSL
hsl(46, 31%, 49%)
HSB
hsb(46, 48%, 65%)
CMYK
cmyk(0%, 12%, 48%, 35%)
Oklch
oklch(66.3% 0.083 92.4)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#584A28

Ochre · DarkOliveGreen · Amber Gold

HEX
#584A28
RGB
rgb(88, 74, 40)
HSL
hsl(43, 38%, 25%)
HSB
hsb(43, 55%, 35%)
CMYK
cmyk(0%, 16%, 55%, 65%)
Oklch
oklch(41.5% 0.054 87.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

573731
325258

Analogous

58323F
573731
584B32

Triadic

573731
325837
373258

Split-Comp.

573731
32584B
323F58

Tetradic

573731
3F5832
325258
4B3258

Contrast Matrix WCAG 2.1 Contrast

573731
CD5550
E6D45F
A59256
584A28
—
2.5
Fail
7.0
AA
3.4
AA Large
1.2
Fail
2.5
Fail
—
2.8
Fail
1.4
Fail
2.1
Fail
7.0
AA
2.8
Fail
—
2.0
Fail
5.8
AA
3.4
AA Large
1.4
Fail
2.0
Fail
—
2.8
Fail
1.2
Fail
2.1
Fail
5.8
AA
2.8
Fail
—
White BG
10.5AAA
4.2AA Large
1.5Fail
3.1AA Large
8.7AAA
Black BG
2.0Fail
5.0AA
13.9AAA
6.8AA
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

494932
999851
DEDE7B
9D9D65
525230

Deuteranopia

4B4D33
A0A952
DFE182
9E9F68
535432

Tritanopia

553434
C75252
E59297
A47073
573738

Achromatopsia

404040
787878
CCCCCC
919191
4A4A4A

Shades & Tints Shades & Tints

#573731

Dark
Light

#CD5550

Dark
Light

#E6D45F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #573731;
  --color-2: #cd5550;
  --color-3: #e6d45f;
  --color-4: #a59256;
  --color-5: #584a28;
}

SCSS

$color-1: #573731;
$color-2: #cd5550;
$color-3: #e6d45f;
$color-4: #a59256;
$color-5: #584a28;

TAILWIND

colors: {
  'brand-1': '#573731',
  'brand-2': '#cd5550',
  'brand-3': '#e6d45f',
  'brand-4': '#a59256',
  'brand-5': '#584a28',
}

RGB Array

[87, 55, 49], [205, 85, 80], [230, 212, 95], [165, 146, 86], [88, 74, 40]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #573731, #CD5550, #E6D45F, #A59256, #584A28 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: #573731; --color-2: #cd5550; --color-3: #e6d45f; --color-4: #a59256; --color-5: #584a28. 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