← Back to Editor

#142126 · #403E3B · #736253 · #A68A68 · #D9C39A

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

#142126

Slate Blue · Black · Peacock Green

HEX
#142126
RGB
rgb(20, 33, 38)
HSL
hsl(197, 31%, 11%)
HSB
hsb(197, 47%, 15%)
CMYK
cmyk(47%, 13%, 0%, 85%)
Oklch
oklch(23.8% 0.020 223.9)

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

#403E3B

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#403E3B
RGB
rgb(64, 62, 59)
HSL
hsl(36, 4%, 24%)
HSB
hsb(36, 8%, 25%)
CMYK
cmyk(0%, 3%, 8%, 75%)
Oklch
oklch(36.5% 0.006 78.3)

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

#736253

Tangerine · DimGray · Amber Brown

HEX
#736253
RGB
rgb(115, 98, 83)
HSL
hsl(28, 16%, 39%)
HSB
hsb(28, 28%, 45%)
CMYK
cmyk(0%, 15%, 28%, 55%)
Oklch
oklch(50.8% 0.032 63.4)

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

#A68A68

Ginger · Gray · Warm Sun

HEX
#A68A68
RGB
rgb(166, 138, 104)
HSL
hsl(33, 26%, 53%)
HSB
hsb(33, 37%, 65%)
CMYK
cmyk(0%, 17%, 37%, 35%)
Oklch
oklch(65.1% 0.058 71.9)

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

#D9C39A

Goose Yellow · Tan · Warm Sun

HEX
#D9C39A
RGB
rgb(217, 195, 154)
HSL
hsl(39, 45%, 73%)
HSB
hsb(39, 29%, 85%)
CMYK
cmyk(0%, 10%, 29%, 15%)
Oklch
oklch(82.5% 0.060 82.9)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

142126
251813

Analogous

132521
142126
131725

Triadic

142126
251320
202513

Split-Comp.

142126
251317
252113

Tetradic

142126
211325
251813
172513

Contrast Matrix WCAG 2.1 Contrast

142126
403E3B
736253
A68A68
D9C39A
—
1.5
Fail
2.8
Fail
5.1
AA
9.6
AAA
1.5
Fail
—
1.8
Fail
3.3
AA Large
6.2
AA
2.8
Fail
1.8
Fail
—
1.8
Fail
3.4
AA Large
5.1
AA
3.3
AA Large
1.8
Fail
—
1.9
Fail
9.6
AAA
6.2
AA
3.4
AA Large
1.9
Fail
—
White BG
16.5AAA
10.7AAA
5.8AA
3.3AA Large
1.7Fail
Black BG
1.3Fail
2.0Fail
3.6AA Large
6.5AA
12.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1A1A25
3F3F3C
6C6B57
9A9A70
CFCFA4

Deuteranopia

191825
3F3F3C
6D6E58
9C9E72
D1D2A6

Tritanopia

152424
403C3C
72595A
A57778
D8ACAD

Achromatopsia

1E1E1E
3E3E3E
656565
8E8E8E
C5C5C5

Shades & Tints Shades & Tints

#142126

Dark
Light

#403E3B

Dark
Light

#736253

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #142126;
  --color-2: #403e3b;
  --color-3: #736253;
  --color-4: #a68a68;
  --color-5: #d9c39a;
}

SCSS

$color-1: #142126;
$color-2: #403e3b;
$color-3: #736253;
$color-4: #a68a68;
$color-5: #d9c39a;

TAILWIND

colors: {
  'brand-1': '#142126',
  'brand-2': '#403e3b',
  'brand-3': '#736253',
  'brand-4': '#a68a68',
  'brand-5': '#d9c39a',
}

RGB Array

[20, 33, 38], [64, 62, 59], [115, 98, 83], [166, 138, 104], [217, 195, 154]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #142126, #403E3B, #736253, #A68A68, #D9C39A 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: #142126; --color-2: #403e3b; --color-3: #736253; --color-4: #a68a68; --color-5: #d9c39a. 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