← Back to Editor

#D4B864 · #C7872F · #596B31 · #595122 · #48250F

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

Color Details Color Details

#D4B864

Ginger · BurlyWood · Sunflower

HEX
#D4B864
RGB
rgb(212, 184, 100)
HSL
hsl(45, 57%, 61%)
HSB
hsb(45, 53%, 83%)
CMYK
cmyk(0%, 13%, 53%, 17%)
Oklch
oklch(78.9% 0.109 91.4)

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

#C7872F

Ochre · Chocolate · Amber Brown

HEX
#C7872F
RGB
rgb(199, 135, 47)
HSL
hsl(35, 62%, 48%)
HSB
hsb(35, 76%, 78%)
CMYK
cmyk(0%, 32%, 76%, 22%)
Oklch
oklch(67.3% 0.127 70.5)

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

#596B31

Grass Green · DarkOliveGreen · Forest Green

HEX
#596B31
RGB
rgb(89, 107, 49)
HSL
hsl(79, 37%, 31%)
HSB
hsb(79, 54%, 42%)
CMYK
cmyk(17%, 0%, 54%, 58%)
Oklch
oklch(49.9% 0.086 123.7)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

#595122

Autumn Sage · DarkOliveGreen · Amber Gold

HEX
#595122
RGB
rgb(89, 81, 34)
HSL
hsl(51, 45%, 24%)
HSB
hsb(51, 62%, 35%)
CMYK
cmyk(0%, 9%, 62%, 65%)
Oklch
oklch(43.2% 0.067 99.8)

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

#48250F

Tangerine · Maroon · Cinnamon

HEX
#48250F
RGB
rgb(72, 37, 15)
HSL
hsl(23, 66%, 17%)
HSB
hsb(23, 79%, 28%)
CMYK
cmyk(0%, 49%, 79%, 72%)
Oklch
oklch(30.7% 0.063 50.6)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D4B864
637FD4

Analogous

D47F63
D4B864
B8D463

Triadic

D4B864
63D4B8
B863D4

Split-Comp.

D4B864
63B8D4
7F63D4

Tetradic

D4B864
63D47F
637FD4
D463B8

Contrast Matrix WCAG 2.1 Contrast

D4B864
C7872F
596B31
595122
48250F
—
1.6
Fail
3.0
AA Large
4.1
AA Large
7.0
AAA
1.6
Fail
—
1.9
Fail
2.6
Fail
4.5
AA Large
3.0
AA Large
1.9
Fail
—
1.4
Fail
2.3
Fail
4.1
AA Large
2.6
Fail
1.4
Fail
—
1.7
Fail
7.0
AAA
4.5
AA Large
2.3
Fail
1.7
Fail
—
White BG
1.9Fail
3.0AA Large
5.9AA
8.0AAA
13.6AAA
Black BG
10.8AAA
6.9AA
3.6AA Large
2.6Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C8C878
ABAB44
61613F
56552D
393914

Deuteranopia

CACC7D
AFB449
605E42
565730
3B3E16

Tritanopia

D3888C
C45559
5A4A4D
593638
461919

Achromatopsia

B7B7B7
909090
5F5F5F
4E4E4E
2D2D2D

Shades & Tints Shades & Tints

#D4B864

Dark
Light

#C7872F

Dark
Light

#596B31

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d4b864;
  --color-2: #c7872f;
  --color-3: #596b31;
  --color-4: #595122;
  --color-5: #48250f;
}

SCSS

$color-1: #d4b864;
$color-2: #c7872f;
$color-3: #596b31;
$color-4: #595122;
$color-5: #48250f;

TAILWIND

colors: {
  'brand-1': '#d4b864',
  'brand-2': '#c7872f',
  'brand-3': '#596b31',
  'brand-4': '#595122',
  'brand-5': '#48250f',
}

RGB Array

[212, 184, 100], [199, 135, 47], [89, 107, 49], [89, 81, 34], [72, 37, 15]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #D4B864, #C7872F, #596B31, #595122, #48250F is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #d4b864; --color-2: #c7872f; --color-3: #596b31; --color-4: #595122; --color-5: #48250f. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 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