← Back to Editor

#37331A · #4C4C30 · #AA9B70 · #DBB77D · #FFE0AF

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

#37331A

Autumn Sage · DarkSlateGray · Amber Gold

HEX
#37331A
RGB
rgb(55, 51, 26)
HSL
hsl(52, 36%, 16%)
HSB
hsb(52, 53%, 22%)
CMYK
cmyk(0%, 7%, 53%, 78%)
Oklch
oklch(31.8% 0.040 100.3)

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

#4C4C30

Autumn Sage · DarkOliveGreen · Amber Gold

HEX
#4C4C30
RGB
rgb(76, 76, 48)
HSL
hsl(60, 23%, 24%)
HSB
hsb(60, 37%, 30%)
CMYK
cmyk(0%, 0%, 37%, 70%)
Oklch
oklch(40.9% 0.043 108.2)

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

#AA9B70

Ginger · Gray · Sunflower

HEX
#AA9B70
RGB
rgb(170, 155, 112)
HSL
hsl(44, 25%, 55%)
HSB
hsb(44, 34%, 67%)
CMYK
cmyk(0%, 9%, 34%, 33%)
Oklch
oklch(69.2% 0.061 91.1)

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

#DBB77D

Ginger · BurlyWood · Warm Sun

HEX
#DBB77D
RGB
rgb(219, 183, 125)
HSL
hsl(37, 57%, 67%)
HSB
hsb(37, 43%, 86%)
CMYK
cmyk(0%, 16%, 43%, 14%)
Oklch
oklch(79.8% 0.086 79.0)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#FFE0AF

Goose Yellow · Wheat · Peach Orange

HEX
#FFE0AF
RGB
rgb(255, 224, 175)
HSL
hsl(37, 100%, 84%)
HSB
hsb(37, 31%, 100%)
CMYK
cmyk(0%, 12%, 31%, 0%)
Oklch
oklch(92.1% 0.072 79.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

37331A
1A1E37

Analogous

37251A
37331A
2D371A

Triadic

37331A
1A3734
341A37

Split-Comp.

37331A
1A2D37
251A37

Tetradic

37331A
1A3725
1A1E37
371A2D

Contrast Matrix WCAG 2.1 Contrast

37331A
4C4C30
AA9B70
DBB77D
FFE0AF
—
1.4
Fail
4.6
AA
6.7
AA
10.0
AAA
1.4
Fail
—
3.2
AA Large
4.6
AA
6.9
AA
4.6
AA
3.2
AA Large
—
1.5
Fail
2.2
Fail
6.7
AA
4.6
AA
1.5
Fail
—
1.5
Fail
10.0
AAA
6.9
AA
2.2
Fail
1.5
Fail
—
White BG
12.7AAA
8.8AAA
2.8Fail
1.9Fail
1.3Fail
Black BG
1.7Fail
2.4Fail
7.6AAA
11.1AAA
16.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

353520
4C4C37
A4A37A
CBCB8B
F2F1BB

Deuteranopia

363622
4C4C38
A4A67D
CED08E
F3F6BE

Tritanopia

372526
4C3C3D
A98384
D99699
FDC4C6

Achromatopsia

313131
494949
9B9B9B
BBBBBB
E4E4E4

Shades & Tints Shades & Tints

#37331A

Dark
Light

#4C4C30

Dark
Light

#AA9B70

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #37331a;
  --color-2: #4c4c30;
  --color-3: #aa9b70;
  --color-4: #dbb77d;
  --color-5: #ffe0af;
}

SCSS

$color-1: #37331a;
$color-2: #4c4c30;
$color-3: #aa9b70;
$color-4: #dbb77d;
$color-5: #ffe0af;

TAILWIND

colors: {
  'brand-1': '#37331a',
  'brand-2': '#4c4c30',
  'brand-3': '#aa9b70',
  'brand-4': '#dbb77d',
  'brand-5': '#ffe0af',
}

RGB Array

[55, 51, 26], [76, 76, 48], [170, 155, 112], [219, 183, 125], [255, 224, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #37331A, #4C4C30, #AA9B70, #DBB77D, #FFE0AF is ideal for: 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: #37331a; --color-2: #4c4c30; --color-3: #aa9b70; --color-4: #dbb77d; --color-5: #ffe0af. 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 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