← Back to Editor

#B4CCB9 · #9FA9A0 · #6F5E64 · #4B303E · #341127

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 MenuPosterData Visualization

Color Details Color Details

#B4CCB9

Celadon · Silver · Apple Green

HEX
#B4CCB9
RGB
rgb(180, 204, 185)
HSL
hsl(132, 19%, 75%)
HSB
hsb(132, 12%, 80%)
CMYK
cmyk(12%, 0%, 9%, 20%)
Oklch
oklch(82.2% 0.037 151.6)

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

#9FA9A0

Ash · DarkGray · Silver Sand

HEX
#9FA9A0
RGB
rgb(159, 169, 160)
HSL
hsl(126, 5%, 64%)
HSB
hsb(126, 6%, 66%)
CMYK
cmyk(6%, 0%, 5%, 34%)
Oklch
oklch(72.4% 0.017 148.3)

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

#6F5E64

Dark Violet · DimGray · Charcoal

HEX
#6F5E64
RGB
rgb(111, 94, 100)
HSL
hsl(339, 8%, 40%)
HSB
hsb(339, 15%, 44%)
CMYK
cmyk(0%, 15%, 10%, 56%)
Oklch
oklch(50.0% 0.024 354.7)

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

#4B303E

Rose Purple · DarkSlateGray · Raspberry

HEX
#4B303E
RGB
rgb(75, 48, 62)
HSL
hsl(329, 22%, 24%)
HSB
hsb(329, 36%, 29%)
CMYK
cmyk(0%, 36%, 17%, 71%)
Oklch
oklch(34.7% 0.045 347.3)

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

#341127

Rose Purple · Black · Raspberry

HEX
#341127
RGB
rgb(52, 17, 39)
HSL
hsl(322, 51%, 14%)
HSB
hsb(322, 67%, 20%)
CMYK
cmyk(0%, 67%, 25%, 80%)
Oklch
oklch(24.2% 0.064 344.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B4CCB9
CBB3C7

Analogous

BACBB3
B4CCB9
B3CBC4

Triadic

B4CCB9
B8B3CB
CBB8B3

Split-Comp.

B4CCB9
C4B3CB
CBB3BA

Tetradic

B4CCB9
B3BACB
CBB3C7
CBC4B3

Contrast Matrix WCAG 2.1 Contrast

B4CCB9
9FA9A0
6F5E64
4B303E
341127
—
1.4
Fail
3.5
AA Large
6.9
AA
9.8
AAA
1.4
Fail
—
2.5
Fail
4.8
AA
6.9
AA
3.5
AA Large
2.5
Fail
—
1.9
Fail
2.8
Fail
6.9
AA
4.8
AA
1.9
Fail
—
1.4
Fail
9.8
AAA
6.9
AA
2.8
Fail
1.4
Fail
—
White BG
1.7Fail
2.4Fail
6.1AA
11.7AAA
16.7AAA
Black BG
12.3AAA
8.7AAA
3.5AA Large
1.8Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BEBFBE
A3A3A2
686763
3F3F3B
252522

Deuteranopia

BDBBBF
A3A2A3
696A62
41433A
272A20

Tritanopia

B5C1C2
9FA4A4
6E6161
4A3837
321D1D

Achromatopsia

C3C3C3
A5A5A5
646464
3A3A3A
1E1E1E

Shades & Tints Shades & Tints

#B4CCB9

Dark
Light

#9FA9A0

Dark
Light

#6F5E64

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b4ccb9;
  --color-2: #9fa9a0;
  --color-3: #6f5e64;
  --color-4: #4b303e;
  --color-5: #341127;
}

SCSS

$color-1: #b4ccb9;
$color-2: #9fa9a0;
$color-3: #6f5e64;
$color-4: #4b303e;
$color-5: #341127;

TAILWIND

colors: {
  'brand-1': '#b4ccb9',
  'brand-2': '#9fa9a0',
  'brand-3': '#6f5e64',
  'brand-4': '#4b303e',
  'brand-5': '#341127',
}

RGB Array

[180, 204, 185], [159, 169, 160], [111, 94, 100], [75, 48, 62], [52, 17, 39]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #B4CCB9, #9FA9A0, #6F5E64, #4B303E, #341127 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: #b4ccb9; --color-2: #9fa9a0; --color-3: #6f5e64; --color-4: #4b303e; --color-5: #341127. 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