← Back to Editor

#342F2B · #0E1213 · #927563 · #807639 · #B9AD63

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

#342F2B

Tangerine · DarkSlateGray · Dark Stone

HEX
#342F2B
RGB
rgb(52, 47, 43)
HSL
hsl(27, 9%, 19%)
HSB
hsb(27, 17%, 20%)
CMYK
cmyk(0%, 10%, 17%, 80%)
Oklch
oklch(30.9% 0.010 61.1)

Traditional「Tangerine」· Paint「Dark Stone」· Creative Midnight Shadow

#0E1213

Slate Blue · Black · Peacock Green

HEX
#0E1213
RGB
rgb(14, 18, 19)
HSL
hsl(192, 15%, 6%)
HSB
hsb(192, 26%, 7%)
CMYK
cmyk(26%, 5%, 0%, 93%)
Oklch
oklch(17.8% 0.007 214.5)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#927563

Tangerine · Gray · Amber Brown

HEX
#927563
RGB
rgb(146, 117, 99)
HSL
hsl(23, 19%, 48%)
HSB
hsb(23, 32%, 57%)
CMYK
cmyk(0%, 20%, 32%, 43%)
Oklch
oklch(58.5% 0.045 53.4)

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

#807639

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#807639
RGB
rgb(128, 118, 57)
HSL
hsl(52, 38%, 36%)
HSB
hsb(52, 55%, 50%)
CMYK
cmyk(0%, 8%, 55%, 50%)
Oklch
oklch(56.1% 0.083 100.1)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#B9AD63

Autumn Sage · Tan · Sunflower

HEX
#B9AD63
RGB
rgb(185, 173, 99)
HSL
hsl(52, 38%, 56%)
HSB
hsb(52, 46%, 73%)
CMYK
cmyk(0%, 6%, 46%, 27%)
Oklch
oklch(74.1% 0.096 100.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

342F2B
2C3135

Analogous

352C2D
342F2B
35342C

Triadic

342F2B
2C3530
302C35

Split-Comp.

342F2B
2C3534
2C2D35

Tetradic

342F2B
2D352C
2C3135
342C35

Contrast Matrix WCAG 2.1 Contrast

342F2B
0E1213
927563
807639
B9AD63
—
1.4
Fail
3.1
AA Large
2.9
Fail
5.8
AA
1.4
Fail
—
4.4
AA Large
4.1
AA Large
8.3
AAA
3.1
AA Large
4.4
AA Large
—
1.1
Fail
1.9
Fail
2.9
Fail
4.1
AA Large
1.1
Fail
—
2.0
Fail
5.8
AA
8.3
AAA
1.9
Fail
2.0
Fail
—
White BG
13.2AAA
18.8AAA
4.2AA Large
4.6AA
2.3Fail
Black BG
1.6Fail
1.1Fail
4.9AA
4.6AA
9.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

32322C
101013
858567
7C7C48
B4B475

Deuteranopia

32332C
100F13
878968
7C7D4B
B5B579

Tritanopia

342D2D
0E1313
916B6C
805356
B88386

Achromatopsia

303030
111111
7C7C7C
727272
A8A8A8

Shades & Tints Shades & Tints

#342F2B

Dark
Light

#0E1213

Dark
Light

#927563

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #342f2b;
  --color-2: #0e1213;
  --color-3: #927563;
  --color-4: #807639;
  --color-5: #b9ad63;
}

SCSS

$color-1: #342f2b;
$color-2: #0e1213;
$color-3: #927563;
$color-4: #807639;
$color-5: #b9ad63;

TAILWIND

colors: {
  'brand-1': '#342f2b',
  'brand-2': '#0e1213',
  'brand-3': '#927563',
  'brand-4': '#807639',
  'brand-5': '#b9ad63',
}

RGB Array

[52, 47, 43], [14, 18, 19], [146, 117, 99], [128, 118, 57], [185, 173, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #342F2B, #0E1213, #927563, #807639, #B9AD63 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, 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: #342f2b; --color-2: #0e1213; --color-3: #927563; --color-4: #807639; --color-5: #b9ad63. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 finance, legal, luxury 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