← Back to Editor

#A22E37 · #9E6D33 · #8EA392 · #E6D9B2 · #D1BD94

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

#A22E37

Crimson · Brown · Passion Red

HEX
#A22E37
RGB
rgb(162, 46, 55)
HSL
hsl(355, 56%, 41%)
HSB
hsb(355, 72%, 64%)
CMYK
cmyk(0%, 72%, 66%, 36%)
Oklch
oklch(48.1% 0.151 20.8)

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

#9E6D33

Ochre · Sienna · Amber Brown

HEX
#9E6D33
RGB
rgb(158, 109, 51)
HSL
hsl(33, 51%, 41%)
HSB
hsb(33, 68%, 62%)
CMYK
cmyk(0%, 31%, 68%, 38%)
Oklch
oklch(57.4% 0.097 68.2)

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

#8EA392

Celadon · DarkSeaGreen · Olive Green

HEX
#8EA392
RGB
rgb(142, 163, 146)
HSL
hsl(131, 10%, 60%)
HSB
hsb(131, 13%, 64%)
CMYK
cmyk(13%, 0%, 10%, 36%)
Oklch
oklch(69.4% 0.034 150.9)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#E6D9B2

Goose Yellow · Wheat · Lemon Cream

HEX
#E6D9B2
RGB
rgb(230, 217, 178)
HSL
hsl(45, 51%, 80%)
HSB
hsb(45, 23%, 90%)
CMYK
cmyk(0%, 6%, 23%, 10%)
Oklch
oklch(88.6% 0.053 91.8)

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

#D1BD94

Ginger · Tan · Sunflower

HEX
#D1BD94
RGB
rgb(209, 189, 148)
HSL
hsl(40, 40%, 70%)
HSB
hsb(40, 29%, 82%)
CMYK
cmyk(0%, 10%, 29%, 18%)
Oklch
oklch(80.5% 0.059 85.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A22E37
2EA399

Analogous

A32E72
A22E37
A35F2E

Triadic

A22E37
38A32E
2E38A3

Split-Comp.

A22E37
2EA35F
2E72A3

Tetradic

A22E37
72A32E
2EA399
5F2EA3

Contrast Matrix WCAG 2.1 Contrast

A22E37
9E6D33
8EA392
E6D9B2
D1BD94
—
1.6
Fail
2.6
Fail
5.0
AA
3.8
AA Large
1.6
Fail
—
1.7
Fail
3.2
AA Large
2.4
Fail
2.6
Fail
1.7
Fail
—
1.9
Fail
1.5
Fail
5.0
AA
3.2
AA Large
1.9
Fail
—
1.3
Fail
3.8
AA Large
2.4
Fail
1.5
Fail
1.3
Fail
—
White BG
7.0AAA
4.5AA Large
2.7Fail
1.4Fail
1.8Fail
Black BG
3.0Fail
4.7AA
7.8AAA
14.9AAA
11.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

706F35
898841
979796
E0E0BB
C8C89E

Deuteranopia

777F34
8C8F44
969497
E1E2BE
CACBA0

Tritanopia

9C3333
9C4C4F
8F999A
E5C3C5
D0A6A7

Achromatopsia

525252
757575
9B9B9B
D8D8D8
BEBEBE

Shades & Tints Shades & Tints

#A22E37

Dark
Light

#9E6D33

Dark
Light

#8EA392

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a22e37;
  --color-2: #9e6d33;
  --color-3: #8ea392;
  --color-4: #e6d9b2;
  --color-5: #d1bd94;
}

SCSS

$color-1: #a22e37;
$color-2: #9e6d33;
$color-3: #8ea392;
$color-4: #e6d9b2;
$color-5: #d1bd94;

TAILWIND

colors: {
  'brand-1': '#a22e37',
  'brand-2': '#9e6d33',
  'brand-3': '#8ea392',
  'brand-4': '#e6d9b2',
  'brand-5': '#d1bd94',
}

RGB Array

[162, 46, 55], [158, 109, 51], [142, 163, 146], [230, 217, 178], [209, 189, 148]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #A22E37, #9E6D33, #8EA392, #E6D9B2, #D1BD94 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: #a22e37; --color-2: #9e6d33; --color-3: #8ea392; --color-4: #e6d9b2; --color-5: #d1bd94. 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