← Back to Editor

#A7857E · #F5E2CD · #AFB7A2 · #7A897E · #516B6C

vintage

A 5-color vintage palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

NostalgicClassicTimelessWarmCool

Industry INDUSTRY

CafePublishingCraft

UI Context UI CONTEXT

StorefrontDigital MenuPosterData Visualization

Color Details Color Details

#A7857E

Crimson · Gray · Passion Red

HEX
#A7857E
RGB
rgb(167, 133, 126)
HSL
hsl(10, 19%, 57%)
HSB
hsb(10, 25%, 65%)
CMYK
cmyk(0%, 20%, 25%, 35%)
Oklch
oklch(64.7% 0.043 31.7)

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

#F5E2CD

Goose Yellow · Bisque · Peach Orange

HEX
#F5E2CD
RGB
rgb(245, 226, 205)
HSL
hsl(31, 67%, 88%)
HSB
hsb(31, 16%, 96%)
CMYK
cmyk(0%, 8%, 16%, 4%)
Oklch
oklch(92.3% 0.035 70.2)

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

#AFB7A2

Willow Green · DarkGray · Apple Green

HEX
#AFB7A2
RGB
rgb(175, 183, 162)
HSL
hsl(83, 13%, 68%)
HSB
hsb(83, 11%, 72%)
CMYK
cmyk(4%, 0%, 11%, 28%)
Oklch
oklch(76.7% 0.031 124.1)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#7A897E

Ash · Gray · Warm Gray

HEX
#7A897E
RGB
rgb(122, 137, 126)
HSL
hsl(136, 6%, 51%)
HSB
hsb(136, 11%, 54%)
CMYK
cmyk(11%, 0%, 8%, 46%)
Oklch
oklch(61.5% 0.024 153.8)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#516B6C

Slate Blue · DimGray · Mint Ice

HEX
#516B6C
RGB
rgb(81, 107, 108)
HSL
hsl(182, 14%, 37%)
HSB
hsb(182, 25%, 42%)
CMYK
cmyk(25%, 1%, 0%, 58%)
Oklch
oklch(50.8% 0.031 199.2)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A7857E
7D9FA6

Analogous

A67D8A
A7857E
A6987D

Triadic

A7857E
7DA683
837DA6

Split-Comp.

A7857E
7DA698
7D8AA6

Tetradic

A7857E
8AA67D
7D9FA6
987DA6

Contrast Matrix WCAG 2.1 Contrast

A7857E
F5E2CD
AFB7A2
7A897E
516B6C
—
2.6
Fail
1.6
Fail
1.1
Fail
1.7
Fail
2.6
Fail
—
1.6
Fail
2.9
Fail
4.5
AA
1.6
Fail
1.6
Fail
—
1.8
Fail
2.8
Fail
1.1
Fail
2.9
Fail
1.8
Fail
—
1.6
Fail
1.7
Fail
4.5
AA
2.8
Fail
1.6
Fail
—
White BG
3.3AA Large
1.3Fail
2.1Fail
3.7AA Large
5.7AA
Black BG
6.3AA
16.6AAA
10.1AAA
5.7AA
3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

989880
EDEDD2
B2B3A7
808181
5C5C6C

Deuteranopia

9A9D80
EEEFD3
B2B1A8
807F81
5B596C

Tritanopia

A58181
F4D6D7
AFABAC
7B8383
526C6C

Achromatopsia

8E8E8E
E5E5E5
B2B2B2
838383
636363

Shades & Tints Shades & Tints

#A7857E

Dark
Light

#F5E2CD

Dark
Light

#AFB7A2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a7857e;
  --color-2: #f5e2cd;
  --color-3: #afb7a2;
  --color-4: #7a897e;
  --color-5: #516b6c;
}

SCSS

$color-1: #a7857e;
$color-2: #f5e2cd;
$color-3: #afb7a2;
$color-4: #7a897e;
$color-5: #516b6c;

TAILWIND

colors: {
  'brand-1': '#a7857e',
  'brand-2': '#f5e2cd',
  'brand-3': '#afb7a2',
  'brand-4': '#7a897e',
  'brand-5': '#516b6c',
}

RGB Array

[167, 133, 126], [245, 226, 205], [175, 183, 162], [122, 137, 126], [81, 107, 108]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #A7857E, #F5E2CD, #AFB7A2, #7A897E, #516B6C is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #a7857e; --color-2: #f5e2cd; --color-3: #afb7a2; --color-4: #7a897e; --color-5: #516b6c. 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. Restrained colors convey professionalism and trust. 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