← Back to Editor

#A69D63 · #CC4C31 · #9C9978 · #E1B48A · #848975

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

#A69D63

Autumn Sage · Gray · Sunflower

HEX
#A69D63
RGB
rgb(166, 157, 99)
HSL
hsl(52, 27%, 52%)
HSB
hsb(52, 40%, 65%)
CMYK
cmyk(0%, 5%, 40%, 35%)
Oklch
oklch(69.0% 0.078 100.5)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#CC4C31

Vermilion · Chocolate · Passion Red

HEX
#CC4C31
RGB
rgb(204, 76, 49)
HSL
hsl(10, 61%, 50%)
HSB
hsb(10, 76%, 80%)
CMYK
cmyk(0%, 63%, 76%, 20%)
Oklch
oklch(58.6% 0.168 33.6)

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

#9C9978

Autumn Sage · Gray · Sunflower

HEX
#9C9978
RGB
rgb(156, 153, 120)
HSL
hsl(55, 15%, 54%)
HSB
hsb(55, 23%, 61%)
CMYK
cmyk(0%, 2%, 23%, 39%)
Oklch
oklch(67.7% 0.046 103.2)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#E1B48A

Apricot · BurlyWood · Warm Sun

HEX
#E1B48A
RGB
rgb(225, 180, 138)
HSL
hsl(29, 59%, 71%)
HSB
hsb(29, 39%, 88%)
CMYK
cmyk(0%, 20%, 39%, 12%)
Oklch
oklch(80.0% 0.077 64.4)

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

#848975

Grass Green · Gray · Warm Gray

HEX
#848975
RGB
rgb(132, 137, 117)
HSL
hsl(75, 8%, 50%)
HSB
hsb(75, 15%, 54%)
CMYK
cmyk(4%, 0%, 15%, 46%)
Oklch
oklch(62.0% 0.030 118.7)

Traditional「Grass Green」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A69D63
646CA6

Analogous

A67C64
A69D63
8DA664

Triadic

A69D63
64A69D
9D64A6

Split-Comp.

A69D63
648DA6
7C64A6

Tetradic

A69D63
64A67C
646CA6
A6648D

Contrast Matrix WCAG 2.1 Contrast

A69D63
CC4C31
9C9978
E1B48A
848975
—
1.6
Fail
1.1
Fail
1.5
Fail
1.3
Fail
1.6
Fail
—
1.6
Fail
2.4
Fail
1.3
Fail
1.1
Fail
1.6
Fail
—
1.5
Fail
1.2
Fail
1.5
Fail
2.4
Fail
1.5
Fail
—
1.9
Fail
1.3
Fail
1.3
Fail
1.2
Fail
1.9
Fail
—
White BG
2.8Fail
4.5AA
2.9Fail
1.9Fail
3.6AA Large
Black BG
7.6AAA
4.6AA
7.2AAA
11.1AAA
5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A2A271
959338
9B9B80
CECD94
86867A

Deuteranopia

A3A374
9CA639
9B9B82
D0D497
86867B

Tritanopia

A67C7F
C63D3E
9C8688
DF9C9E
847E7F

Achromatopsia

999999
6F6F6F
969696
BDBDBD
858585

Shades & Tints Shades & Tints

#A69D63

Dark
Light

#CC4C31

Dark
Light

#9C9978

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a69d63;
  --color-2: #cc4c31;
  --color-3: #9c9978;
  --color-4: #e1b48a;
  --color-5: #848975;
}

SCSS

$color-1: #a69d63;
$color-2: #cc4c31;
$color-3: #9c9978;
$color-4: #e1b48a;
$color-5: #848975;

TAILWIND

colors: {
  'brand-1': '#a69d63',
  'brand-2': '#cc4c31',
  'brand-3': '#9c9978',
  'brand-4': '#e1b48a',
  'brand-5': '#848975',
}

RGB Array

[166, 157, 99], [204, 76, 49], [156, 153, 120], [225, 180, 138], [132, 137, 117]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #A69D63, #CC4C31, #9C9978, #E1B48A, #848975 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: #a69d63; --color-2: #cc4c31; --color-3: #9c9978; --color-4: #e1b48a; --color-5: #848975. 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