← Back to Editor

#19172D · #836B61 · #B8745F · #CCB999 · #96A787

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

#19172D

Deep Indigo · Black · Deep Sea Blue

HEX
#19172D
RGB
rgb(25, 23, 45)
HSL
hsl(245, 32%, 13%)
HSB
hsb(245, 49%, 18%)
CMYK
cmyk(44%, 49%, 0%, 82%)
Oklch
oklch(21.9% 0.042 286.5)

Traditional「Deep Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#836B61

Tangerine · DimGray · Amber Brown

HEX
#836B61
RGB
rgb(131, 107, 97)
HSL
hsl(18, 15%, 45%)
HSB
hsb(18, 26%, 51%)
CMYK
cmyk(0%, 18%, 26%, 49%)
Oklch
oklch(54.8% 0.034 43.8)

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

#B8745F

Crimson · Sienna · Passion Red

HEX
#B8745F
RGB
rgb(184, 116, 95)
HSL
hsl(14, 39%, 55%)
HSB
hsb(14, 48%, 72%)
CMYK
cmyk(0%, 37%, 48%, 28%)
Oklch
oklch(62.6% 0.092 37.9)

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

#CCB999

Ginger · Tan · Warm Sun

HEX
#CCB999
RGB
rgb(204, 185, 153)
HSL
hsl(38, 33%, 70%)
HSB
hsb(38, 25%, 80%)
CMYK
cmyk(0%, 9%, 25%, 20%)
Oklch
oklch(79.4% 0.048 80.7)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#96A787

Celadon · DarkSeaGreen · Olive Green

HEX
#96A787
RGB
rgb(150, 167, 135)
HSL
hsl(92, 15%, 59%)
HSB
hsb(92, 19%, 65%)
CMYK
cmyk(10%, 0%, 19%, 35%)
Oklch
oklch(70.6% 0.049 130.4)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

19172D
2A2C17

Analogous

171F2C
19172D
23172C

Triadic

19172D
2C1817
172C18

Split-Comp.

19172D
2C2317
1F2C17

Tetradic

19172D
2C171F
2A2C17
172C23

Contrast Matrix WCAG 2.1 Contrast

19172D
836B61
B8745F
CCB999
96A787
—
3.5
AA Large
4.7
AA
9.1
AAA
6.8
AA
3.5
AA Large
—
1.3
Fail
2.6
Fail
1.9
Fail
4.7
AA
1.3
Fail
—
1.9
Fail
1.4
Fail
9.1
AAA
2.6
Fail
1.9
Fail
—
1.3
Fail
6.8
AA
1.9
Fail
1.4
Fail
1.3
Fail
—
White BG
17.5AAA
5.0AA
3.7AA Large
1.9Fail
2.6Fail
Black BG
1.2Fail
4.2AA Large
5.7AA
11.0AAA
8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

181828
797863
9B9A64
C4C4A1
9D9E8F

Deuteranopia

181826
7A7C64
9FA465
C5C6A3
9C9B91

Tritanopia

192323
826566
B56869
CBA7A8
979596

Achromatopsia

1A1A1A
717171
868686
BBBBBB
9E9E9E

Shades & Tints Shades & Tints

#19172D

Dark
Light

#836B61

Dark
Light

#B8745F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #19172d;
  --color-2: #836b61;
  --color-3: #b8745f;
  --color-4: #ccb999;
  --color-5: #96a787;
}

SCSS

$color-1: #19172d;
$color-2: #836b61;
$color-3: #b8745f;
$color-4: #ccb999;
$color-5: #96a787;

TAILWIND

colors: {
  'brand-1': '#19172d',
  'brand-2': '#836b61',
  'brand-3': '#b8745f',
  'brand-4': '#ccb999',
  'brand-5': '#96a787',
}

RGB Array

[25, 23, 45], [131, 107, 97], [184, 116, 95], [204, 185, 153], [150, 167, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #19172D, #836B61, #B8745F, #CCB999, #96A787 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: #19172d; --color-2: #836b61; --color-3: #b8745f; --color-4: #ccb999; --color-5: #96a787. 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