← Back to Editor

#816F8F · #828C97 · #93AF98 · #D2D28F · #E7AA3C

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 MenuPoster

Color Details Color Details

#816F8F

Dark Plum · Gray · Violet

HEX
#816F8F
RGB
rgb(129, 111, 143)
HSL
hsl(274, 13%, 50%)
HSB
hsb(274, 22%, 56%)
CMYK
cmyk(10%, 22%, 0%, 44%)
Oklch
oklch(57.0% 0.053 310.1)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#828C97

Azure · LightSlateGray · Warm Gray

HEX
#828C97
RGB
rgb(130, 140, 151)
HSL
hsl(211, 9%, 55%)
HSB
hsb(211, 14%, 59%)
CMYK
cmyk(14%, 7%, 0%, 41%)
Oklch
oklch(63.6% 0.020 250.7)

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

#93AF98

Celadon · DarkSeaGreen · Apple Green

HEX
#93AF98
RGB
rgb(147, 175, 152)
HSL
hsl(131, 15%, 63%)
HSB
hsb(131, 16%, 69%)
CMYK
cmyk(16%, 0%, 13%, 31%)
Oklch
oklch(72.6% 0.045 150.3)

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

#D2D28F

Fresh Green · BurlyWood · Sunflower

HEX
#D2D28F
RGB
rgb(210, 210, 143)
HSL
hsl(60, 43%, 69%)
HSB
hsb(60, 32%, 82%)
CMYK
cmyk(0%, 0%, 32%, 18%)
Oklch
oklch(84.8% 0.087 108.1)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#E7AA3C

Ginger · GoldenRod · Warm Sun

HEX
#E7AA3C
RGB
rgb(231, 170, 60)
HSL
hsl(39, 78%, 57%)
HSB
hsb(39, 74%, 91%)
CMYK
cmyk(0%, 26%, 74%, 9%)
Oklch
oklch(77.7% 0.141 78.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

816F8F
7D906F

Analogous

716F90
816F8F
906F8E

Triadic

816F8F
90826F
6F9082

Split-Comp.

816F8F
8E906F
6F9071

Tetradic

816F8F
90716F
7D906F
6F8E90

Contrast Matrix WCAG 2.1 Contrast

816F8F
828C97
93AF98
D2D28F
E7AA3C
—
1.3
Fail
1.9
Fail
2.9
Fail
2.2
Fail
1.3
Fail
—
1.4
Fail
2.2
Fail
1.7
Fail
1.9
Fail
1.4
Fail
—
1.5
Fail
1.2
Fail
2.9
Fail
2.2
Fail
1.5
Fail
—
1.3
Fail
2.2
Fail
1.7
Fail
1.2
Fail
1.3
Fail
—
White BG
4.6AA
3.4AA Large
2.4Fail
1.6Fail
2.1Fail
Black BG
4.6AA
6.1AA
8.8AAA
13.4AAA
10.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

797987
868694
9F9F9E
D2D29F
CDCC57

Deuteranopia

7A7C85
868594
9E9B9F
D2D2A3
D0D55D

Tritanopia

808180
839292
94A2A3
D2ACAF
E46C70

Achromatopsia

787878
8A8A8A
A4A4A4
CACACA
B0B0B0

Shades & Tints Shades & Tints

#816F8F

Dark
Light

#828C97

Dark
Light

#93AF98

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #816f8f;
  --color-2: #828c97;
  --color-3: #93af98;
  --color-4: #d2d28f;
  --color-5: #e7aa3c;
}

SCSS

$color-1: #816f8f;
$color-2: #828c97;
$color-3: #93af98;
$color-4: #d2d28f;
$color-5: #e7aa3c;

TAILWIND

colors: {
  'brand-1': '#816f8f',
  'brand-2': '#828c97',
  'brand-3': '#93af98',
  'brand-4': '#d2d28f',
  'brand-5': '#e7aa3c',
}

RGB Array

[129, 111, 143], [130, 140, 151], [147, 175, 152], [210, 210, 143], [231, 170, 60]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #816F8F, #828C97, #93AF98, #D2D28F, #E7AA3C 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: #816f8f; --color-2: #828c97; --color-3: #93af98; --color-4: #d2d28f; --color-5: #e7aa3c. 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