← Back to Editor

#D7D8CB · #BD3B13 · #951C64 · #193151 · #201620

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

#D7D8CB

Fresh Green · LightGray · Lemon Cream

HEX
#D7D8CB
RGB
rgb(215, 216, 203)
HSL
hsl(65, 14%, 82%)
HSB
hsb(65, 6%, 85%)
CMYK
cmyk(0%, 0%, 6%, 15%)
Oklch
oklch(87.8% 0.018 110.3)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#BD3B13

Vermilion · FireBrick · Passion Red

HEX
#BD3B13
RGB
rgb(189, 59, 19)
HSL
hsl(14, 82%, 41%)
HSB
hsb(14, 90%, 74%)
CMYK
cmyk(0%, 69%, 90%, 26%)
Oklch
oklch(53.8% 0.173 36.0)

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

#951C64

Rose Purple · Purple · Camellia

HEX
#951C64
RGB
rgb(149, 28, 100)
HSL
hsl(324, 68%, 35%)
HSB
hsb(324, 81%, 58%)
CMYK
cmyk(0%, 81%, 33%, 42%)
Oklch
oklch(45.6% 0.169 349.9)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

#193151

Indigo · DarkSlateGray · Prussian Blue

HEX
#193151
RGB
rgb(25, 49, 81)
HSL
hsl(214, 53%, 21%)
HSB
hsb(214, 69%, 32%)
CMYK
cmyk(69%, 40%, 0%, 68%)
Oklch
oklch(31.1% 0.065 256.2)

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

#201620

Rose Purple · Black · Dark Purple

HEX
#201620
RGB
rgb(32, 22, 32)
HSL
hsl(300, 19%, 11%)
HSB
hsb(300, 31%, 13%)
CMYK
cmyk(0%, 31%, 0%, 87%)
Oklch
oklch(21.7% 0.024 326.4)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D7D8CB
CCCBD8

Analogous

D8D2CB
D7D8CB
D0D8CB

Triadic

D7D8CB
CBD6D8
D8CBD6

Split-Comp.

D7D8CB
CBD0D8
D2CBD8

Tetradic

D7D8CB
CBD8D2
CCCBD8
D8CBD0

Contrast Matrix WCAG 2.1 Contrast

D7D8CB
BD3B13
951C64
193151
201620
—
3.8
AA Large
5.5
AA
9.1
AAA
12.2
AAA
3.8
AA Large
—
1.4
Fail
2.4
Fail
3.2
AA Large
5.5
AA
1.4
Fail
—
1.6
Fail
2.2
Fail
9.1
AAA
2.4
Fail
1.6
Fail
—
1.3
Fail
12.2
AAA
3.2
AA Large
2.2
Fail
1.3
Fail
—
White BG
1.4Fail
5.5AA
8.0AAA
13.1AAA
17.5AAA
Black BG
14.6AAA
3.8AA Large
2.6Fail
1.6Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D7D7CE
85841D
616053
232449
1C1C1E

Deuteranopia

D7D7CF
8C961F
68714E
222047
1C1D1D

Tritanopia

D7D1D1
B62426
8F4542
1A4342
201C1B

Achromatopsia

D6D6D6
5D5D5D
484848
2D2D2D
1A1A1A

Shades & Tints Shades & Tints

#D7D8CB

Dark
Light

#BD3B13

Dark
Light

#951C64

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d7d8cb;
  --color-2: #bd3b13;
  --color-3: #951c64;
  --color-4: #193151;
  --color-5: #201620;
}

SCSS

$color-1: #d7d8cb;
$color-2: #bd3b13;
$color-3: #951c64;
$color-4: #193151;
$color-5: #201620;

TAILWIND

colors: {
  'brand-1': '#d7d8cb',
  'brand-2': '#bd3b13',
  'brand-3': '#951c64',
  'brand-4': '#193151',
  'brand-5': '#201620',
}

RGB Array

[215, 216, 203], [189, 59, 19], [149, 28, 100], [25, 49, 81], [32, 22, 32]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #D7D8CB, #BD3B13, #951C64, #193151, #201620 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #d7d8cb; --color-2: #bd3b13; --color-3: #951c64; --color-4: #193151; --color-5: #201620. 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 tech, SaaS, healthcare, eco industries. 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