← Back to Editor

#3D4F67 · #BAB3AD · #64858E · #1C1C1C · #5B544A

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

#3D4F67

Indigo · DarkSlateGray · Prussian Blue

HEX
#3D4F67
RGB
rgb(61, 79, 103)
HSL
hsl(214, 26%, 32%)
HSB
hsb(214, 41%, 40%)
CMYK
cmyk(41%, 23%, 0%, 60%)
Oklch
oklch(42.3% 0.046 255.8)

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

#BAB3AD

Apricot · DarkGray · Silver Sand

HEX
#BAB3AD
RGB
rgb(186, 179, 173)
HSL
hsl(28, 9%, 70%)
HSB
hsb(28, 7%, 73%)
CMYK
cmyk(0%, 4%, 7%, 27%)
Oklch
oklch(77.1% 0.012 63.3)

Traditional「Apricot」· Paint「Silver Sand」· Creative Urban Concrete

#64858E

Slate Blue · SlateGray · Mint Ice

HEX
#64858E
RGB
rgb(100, 133, 142)
HSL
hsl(193, 17%, 47%)
HSB
hsb(193, 30%, 56%)
CMYK
cmyk(30%, 6%, 0%, 44%)
Oklch
oklch(59.5% 0.040 216.3)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#1C1C1C

Ink Black · Black · Dark Stone

HEX
#1C1C1C
RGB
rgb(28, 28, 28)
HSL
hsl(0, 0%, 11%)
HSB
hsb(0, 0%, 11%)
CMYK
cmyk(0%, 0%, 0%, 89%)
Oklch
oklch(22.6% 0.000 89.9)

Traditional「Ink Black」· Paint「Dark Stone」· Creative Midnight Shadow

#5B544A

Ochre · DarkOliveGreen · Amber Brown

HEX
#5B544A
RGB
rgb(91, 84, 74)
HSL
hsl(35, 10%, 32%)
HSB
hsb(35, 19%, 36%)
CMYK
cmyk(0%, 8%, 19%, 64%)
Oklch
oklch(45.0% 0.018 76.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3D4F67
67543C

Analogous

3C6467
3D4F67
3F3C67

Triadic

3D4F67
673C4F
4F673C

Split-Comp.

3D4F67
673F3C
64673C

Tetradic

3D4F67
673C64
67543C
3C673F

Contrast Matrix WCAG 2.1 Contrast

3D4F67
BAB3AD
64858E
1C1C1C
5B544A
—
4.0
AA Large
2.1
Fail
2.0
Fail
1.1
Fail
4.0
AA Large
—
1.9
Fail
8.2
AAA
3.6
AA Large
2.1
Fail
1.9
Fail
—
4.3
AA Large
1.9
Fail
2.0
Fail
8.2
AAA
4.3
AA Large
—
2.3
Fail
1.1
Fail
3.6
AA Large
1.9
Fail
2.3
Fail
—
White BG
8.4AAA
2.1Fail
4.0AA Large
17.0AAA
7.5AAA
Black BG
2.5Fail
10.1AAA
5.3AA
1.2Fail
2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

454561
B7B7AE
72738C
1C1C1C
58584C

Deuteranopia

444260
B7B8AF
706E8B
1C1C1C
58594D

Tritanopia

3E5D5C
BAB0B0
668A8A
1C1C1C
5B4E4F

Achromatopsia

4C4C4C
B4B4B4
7C7C7C
1C1C1C
555555

Shades & Tints Shades & Tints

#3D4F67

Dark
Light

#BAB3AD

Dark
Light

#64858E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3d4f67;
  --color-2: #bab3ad;
  --color-3: #64858e;
  --color-4: #1c1c1c;
  --color-5: #5b544a;
}

SCSS

$color-1: #3d4f67;
$color-2: #bab3ad;
$color-3: #64858e;
$color-4: #1c1c1c;
$color-5: #5b544a;

TAILWIND

colors: {
  'brand-1': '#3d4f67',
  'brand-2': '#bab3ad',
  'brand-3': '#64858e',
  'brand-4': '#1c1c1c',
  'brand-5': '#5b544a',
}

RGB Array

[61, 79, 103], [186, 179, 173], [100, 133, 142], [28, 28, 28], [91, 84, 74]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #3D4F67, #BAB3AD, #64858E, #1C1C1C, #5B544A 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: #3d4f67; --color-2: #bab3ad; --color-3: #64858e; --color-4: #1c1c1c; --color-5: #5b544a. 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