← Back to Editor

#B3BDB3 · #F2EBDA · #14374F · #607D7C

vintage

A 4-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

#B3BDB3

Silver Gray · Silver · Pearl Gray

HEX
#B3BDB3
RGB
rgb(179, 189, 179)
HSL
hsl(120, 7%, 72%)
HSB
hsb(120, 5%, 74%)
CMYK
cmyk(5%, 0%, 5%, 26%)
Oklch
oklch(78.8% 0.018 145.4)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#F2EBDA

Goose Yellow · Beige · Lemon Cream

HEX
#F2EBDA
RGB
rgb(242, 235, 218)
HSL
hsl(42, 48%, 90%)
HSB
hsb(42, 10%, 95%)
CMYK
cmyk(0%, 3%, 10%, 5%)
Oklch
oklch(94.1% 0.024 88.2)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#14374F

Lake Blue · DarkSlateGray · Deep Sea Blue

HEX
#14374F
RGB
rgb(20, 55, 79)
HSL
hsl(204, 60%, 19%)
HSB
hsb(204, 75%, 31%)
CMYK
cmyk(75%, 30%, 0%, 69%)
Oklch
oklch(32.4% 0.059 241.8)

Traditional「Lake Blue」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#607D7C

Mineral Blue · SlateGray · Mint Ice

HEX
#607D7C
RGB
rgb(96, 125, 124)
HSL
hsl(178, 13%, 43%)
HSB
hsb(178, 23%, 49%)
CMYK
cmyk(23%, 0%, 1%, 51%)
Oklch
oklch(56.7% 0.033 193.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B3BDB3
BDB3BD

Analogous

B8BDB3
B3BDB3
B3BDB8

Triadic

B3BDB3
B3B3BD
BDB3B3

Split-Comp.

B3BDB3
B8B3BD
BDB3B8

Tetradic

B3BDB3
B3B8BD
BDB3BD
BDB8B3

Contrast Matrix WCAG 2.1 Contrast

B3BDB3
F2EBDA
14374F
607D7C
—
1.6
Fail
6.4
AA
2.3
Fail
1.6
Fail
—
10.5
AAA
3.7
AA Large
6.4
AA
10.5
AAA
—
2.8
Fail
2.3
Fail
3.7
AA Large
2.8
Fail
—
White BG
1.9Fail
1.2Fail
12.4AAA
4.4AA Large
Black BG
10.8AAA
17.7AAA
1.7Fail
4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B7B5
EFEFDE
232349
6D6D7C

Deuteranopia

B7B6B6
EFF0DF
211F48
6B697C

Tritanopia

B3B7B8
F2E1E2
164544
617C7C

Achromatopsia

B9B9B9
EBEBEB
2F2F2F
747474

Shades & Tints Shades & Tints

#B3BDB3

Dark
Light

#F2EBDA

Dark
Light

#14374F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b3bdb3;
  --color-2: #f2ebda;
  --color-3: #14374f;
  --color-4: #607d7c;
}

SCSS

$color-1: #b3bdb3;
$color-2: #f2ebda;
$color-3: #14374f;
$color-4: #607d7c;

TAILWIND

colors: {
  'brand-1': '#b3bdb3',
  'brand-2': '#f2ebda',
  'brand-3': '#14374f',
  'brand-4': '#607d7c',
}

RGB Array

[179, 189, 179], [242, 235, 218], [20, 55, 79], [96, 125, 124]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This vintage-style palette of #B3BDB3, #F2EBDA, #14374F, #607D7C is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #b3bdb3; --color-2: #f2ebda; --color-3: #14374f; --color-4: #607d7c. 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 4-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