← Back to Editor

#D6CAB2 · #C3BA9D · #7C7668 · #53616E · #3E4152

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

#D6CAB2

Goose Yellow · Silver · Lemon Cream

HEX
#D6CAB2
RGB
rgb(214, 202, 178)
HSL
hsl(40, 31%, 77%)
HSB
hsb(40, 17%, 84%)
CMYK
cmyk(0%, 6%, 17%, 16%)
Oklch
oklch(84.2% 0.035 84.6)

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

#C3BA9D

Ginger · Tan · Sunflower

HEX
#C3BA9D
RGB
rgb(195, 186, 157)
HSL
hsl(46, 24%, 69%)
HSB
hsb(46, 19%, 76%)
CMYK
cmyk(0%, 5%, 19%, 24%)
Oklch
oklch(78.9% 0.041 92.8)

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

#7C7668

Ochre · DimGray · Warm Gray

HEX
#7C7668
RGB
rgb(124, 118, 104)
HSL
hsl(42, 9%, 45%)
HSB
hsb(42, 16%, 49%)
CMYK
cmyk(0%, 5%, 16%, 51%)
Oklch
oklch(56.7% 0.022 87.6)

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

#53616E

Slate Blue · DimGray · Prussian Blue

HEX
#53616E
RGB
rgb(83, 97, 110)
HSL
hsl(209, 14%, 38%)
HSB
hsb(209, 25%, 43%)
CMYK
cmyk(25%, 12%, 0%, 57%)
Oklch
oklch(48.6% 0.027 246.4)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#3E4152

Indigo · DarkSlateGray · Prussian Blue

HEX
#3E4152
RGB
rgb(62, 65, 82)
HSL
hsl(231, 14%, 28%)
HSB
hsb(231, 24%, 32%)
CMYK
cmyk(24%, 21%, 0%, 68%)
Oklch
oklch(37.9% 0.029 277.1)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D6CAB2
B2BED7

Analogous

D7B8B2
D6CAB2
D0D7B2

Triadic

D6CAB2
B2D7CA
CAB2D7

Split-Comp.

D6CAB2
B2D0D7
B8B2D7

Tetradic

D6CAB2
B2D7B8
B2BED7
D7B2D0

Contrast Matrix WCAG 2.1 Contrast

D6CAB2
C3BA9D
7C7668
53616E
3E4152
—
1.2
Fail
2.8
Fail
3.9
AA Large
6.2
AA
1.2
Fail
—
2.3
Fail
3.3
AA Large
5.2
AA
2.8
Fail
2.3
Fail
—
1.4
Fail
2.2
Fail
3.9
AA Large
3.3
AA Large
1.4
Fail
—
1.6
Fail
6.2
AA
5.2
AA
2.2
Fail
1.6
Fail
—
White BG
1.6Fail
1.9Fail
4.5AA
6.4AA
10.1AAA
Black BG
13.0AAA
10.8AAA
4.6AA
3.3AA Large
2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D1B8
BFBFA4
79796B
59596B
3F3F4E

Deuteranopia

D2D2B9
C0C0A6
7A7A6C
58576A
3F3F4D

Tritanopia

D5BCBD
C3AAAB
7C6E6F
546868
3E4B4A

Achromatopsia

CBCBCB
B9B9B9
767676
5E5E5E
424242

Shades & Tints Shades & Tints

#D6CAB2

Dark
Light

#C3BA9D

Dark
Light

#7C7668

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d6cab2;
  --color-2: #c3ba9d;
  --color-3: #7c7668;
  --color-4: #53616e;
  --color-5: #3e4152;
}

SCSS

$color-1: #d6cab2;
$color-2: #c3ba9d;
$color-3: #7c7668;
$color-4: #53616e;
$color-5: #3e4152;

TAILWIND

colors: {
  'brand-1': '#d6cab2',
  'brand-2': '#c3ba9d',
  'brand-3': '#7c7668',
  'brand-4': '#53616e',
  'brand-5': '#3e4152',
}

RGB Array

[214, 202, 178], [195, 186, 157], [124, 118, 104], [83, 97, 110], [62, 65, 82]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #D6CAB2, #C3BA9D, #7C7668, #53616E, #3E4152 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: #d6cab2; --color-2: #c3ba9d; --color-3: #7c7668; --color-4: #53616e; --color-5: #3e4152. 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