← Back to Editor

#171717 · #9E1313 · #1F1F1F · #2E2E2E · #444444

vintage

A 5-color vintage palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

NostalgicClassicTimelessWarm

Industry INDUSTRY

CafePublishingCraft

UI Context UI CONTEXT

StorefrontDigital MenuPoster

Color Details Color Details

#171717

Ink Black · Black · Jet Black

HEX
#171717
RGB
rgb(23, 23, 23)
HSL
hsl(0, 0%, 9%)
HSB
hsb(0, 0%, 9%)
CMYK
cmyk(0%, 0%, 0%, 91%)
Oklch
oklch(20.5% 0.000 89.9)

TraditionalInk Black」· PaintJet Black」· Creative Midnight Shadow

#9E1313

Vermilion · FireBrick · Wine Red

HEX
#9E1313
RGB
rgb(158, 19, 19)
HSL
hsl(0, 79%, 35%)
HSB
hsb(0, 88%, 62%)
CMYK
cmyk(0%, 88%, 88%, 38%)
Oklch
oklch(44.8% 0.172 27.8)

TraditionalVermilion」· PaintWine Red」· Creative Blush Sunrise

#1F1F1F

Ink Black · Black · Dark Stone

HEX
#1F1F1F
RGB
rgb(31, 31, 31)
HSL
hsl(0, 0%, 12%)
HSB
hsb(0, 0%, 12%)
CMYK
cmyk(0%, 0%, 0%, 88%)
Oklch
oklch(23.9% 0.000 89.9)

TraditionalInk Black」· PaintDark Stone」· Creative Midnight Shadow

#2E2E2E

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#2E2E2E
RGB
rgb(46, 46, 46)
HSL
hsl(0, 0%, 18%)
HSB
hsb(0, 0%, 18%)
CMYK
cmyk(0%, 0%, 0%, 82%)
Oklch
oklch(30.1% 0.000 89.9)

TraditionalDark Cyan」· PaintDark Stone」· Creative Midnight Shadow

#444444

Dark Cyan · DarkSlateGray · Charcoal

HEX
#444444
RGB
rgb(68, 68, 68)
HSL
hsl(0, 0%, 27%)
HSB
hsb(0, 0%, 27%)
CMYK
cmyk(0%, 0%, 0%, 73%)
Oklch
oklch(38.7% 0.000 89.9)

TraditionalDark Cyan」· PaintCharcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

171717
171717

Analogous

171717
171717
171717

Triadic

171717
171717
171717

Split-Comp.

171717
171717
171717

Tetradic

171717
171717
171717
171717

Contrast Matrix WCAG 2.1 Contrast

171717
9E1313
1F1F1F
2E2E2E
444444
2.2
Fail
1.1
Fail
1.3
Fail
1.8
Fail
2.2
Fail
2.0
Fail
1.7
Fail
1.2
Fail
1.1
Fail
2.0
Fail
1.2
Fail
1.7
Fail
1.3
Fail
1.7
Fail
1.2
Fail
1.4
Fail
1.8
Fail
1.2
Fail
1.7
Fail
1.4
Fail
White BG
17.9AAA
8.2AAA
16.5AAA
13.6AAA
9.7AAA
Black BG
1.2Fail
2.6Fail
1.3Fail
1.5Fail
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

171717
626113
1F1F1F
2E2E2E
444444

Deuteranopia

171717
6A7413
1F1F1F
2E2E2E
444444

Tritanopia

171717
971313
1F1F1F
2E2E2E
444444

Achromatopsia

171717
3D3D3D
1F1F1F
2E2E2E
444444

Shades & Tints Shades & Tints

#171717

Dark
Light

#9E1313

Dark
Light

#1F1F1F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #171717;
  --color-2: #9e1313;
  --color-3: #1f1f1f;
  --color-4: #2e2e2e;
  --color-5: #444444;
}

SCSS

$color-1: #171717;
$color-2: #9e1313;
$color-3: #1f1f1f;
$color-4: #2e2e2e;
$color-5: #444444;

TAILWIND

colors: {
  'brand-1': '#171717',
  'brand-2': '#9e1313',
  'brand-3': '#1f1f1f',
  'brand-4': '#2e2e2e',
  'brand-5': '#444444',
}

RGB Array

[23, 23, 23], [158, 19, 19], [31, 31, 31], [46, 46, 46], [68, 68, 68]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #171717, #9E1313, #1F1F1F, #2E2E2E, #444444 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs. Low-saturation colors convey a sophisticated, premium feel. 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: #171717; --color-2: #9e1313; --color-3: #1f1f1f; --color-4: #2e2e2e; --color-5: #444444. 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. 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