← Back to Editor

#4A3F43 · #685A5F · #308580 · #BFCFC2 · #D8E0DA

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

#4A3F43

Dark Violet · DarkSlateGray · Charcoal

HEX
#4A3F43
RGB
rgb(74, 63, 67)
HSL
hsl(338, 8%, 27%)
HSB
hsb(338, 15%, 29%)
CMYK
cmyk(0%, 15%, 9%, 71%)
Oklch
oklch(38.0% 0.016 354.0)

Traditional「Dark Violet」· Paint「Charcoal」· Creative Midnight Shadow

#685A5F

Ink Gray · DimGray · Charcoal

HEX
#685A5F
RGB
rgb(104, 90, 95)
HSL
hsl(339, 7%, 38%)
HSB
hsb(339, 13%, 41%)
CMYK
cmyk(0%, 13%, 9%, 59%)
Oklch
oklch(48.3% 0.020 354.3)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#308580

Mineral Blue · SeaGreen · Mint Ice

HEX
#308580
RGB
rgb(48, 133, 128)
HSL
hsl(176, 47%, 35%)
HSB
hsb(176, 64%, 52%)
CMYK
cmyk(64%, 0%, 4%, 48%)
Oklch
oklch(56.5% 0.081 189.7)

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

#BFCFC2

Celadon · Silver · Apple Green

HEX
#BFCFC2
RGB
rgb(191, 207, 194)
HSL
hsl(131, 14%, 78%)
HSB
hsb(131, 8%, 81%)
CMYK
cmyk(8%, 0%, 6%, 19%)
Oklch
oklch(83.9% 0.025 151.1)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#D8E0DA

Celadon · LightGray · Mint Green

HEX
#D8E0DA
RGB
rgb(216, 224, 218)
HSL
hsl(135, 11%, 86%)
HSB
hsb(135, 4%, 88%)
CMYK
cmyk(4%, 0%, 3%, 12%)
Oklch
oklch(89.9% 0.012 153.7)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4A3F43
3F4A46

Analogous

4A3F49
4A3F43
4A413F

Triadic

4A3F43
434A3F
3F434A

Split-Comp.

4A3F43
3F4A41
3F494A

Tetradic

4A3F43
494A3F
3F4A46
413F4A

Contrast Matrix WCAG 2.1 Contrast

4A3F43
685A5F
308580
BFCFC2
D8E0DA
—
1.5
Fail
2.3
Fail
6.2
AA
7.5
AAA
1.5
Fail
—
1.5
Fail
4.0
AA Large
4.8
AA
2.3
Fail
1.5
Fail
—
2.7
Fail
3.3
AA Large
6.2
AA
4.0
AA Large
2.7
Fail
—
1.2
Fail
7.5
AAA
4.8
AA
3.3
AA Large
1.2
Fail
—
White BG
10.1AAA
6.5AA
4.4AA Large
1.6Fail
1.3Fail
Black BG
2.1Fail
3.2AA Large
4.8AA
12.9AAA
15.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

454542
62625E
555681
C6C6C5
DBDCDB

Deuteranopia

464742
63645E
504A82
C5C4C6
DBDADC

Tritanopia

494141
675D5D
348282
C0C8C8
D8DDDD

Achromatopsia

434343
5F5F5F
6B6B6B
C9C9C9
DDDDDD

Shades & Tints Shades & Tints

#4A3F43

Dark
Light

#685A5F

Dark
Light

#308580

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4a3f43;
  --color-2: #685a5f;
  --color-3: #308580;
  --color-4: #bfcfc2;
  --color-5: #d8e0da;
}

SCSS

$color-1: #4a3f43;
$color-2: #685a5f;
$color-3: #308580;
$color-4: #bfcfc2;
$color-5: #d8e0da;

TAILWIND

colors: {
  'brand-1': '#4a3f43',
  'brand-2': '#685a5f',
  'brand-3': '#308580',
  'brand-4': '#bfcfc2',
  'brand-5': '#d8e0da',
}

RGB Array

[74, 63, 67], [104, 90, 95], [48, 133, 128], [191, 207, 194], [216, 224, 218]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #4A3F43, #685A5F, #308580, #BFCFC2, #D8E0DA 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: #4a3f43; --color-2: #685a5f; --color-3: #308580; --color-4: #bfcfc2; --color-5: #d8e0da. 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