← Back to Editor

#B2B28C · #DEB383 · #E5785E · #CB3A4A · #8C073C

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 MenuPoster

Color Details Color Details

#B2B28C

Fresh Green · DarkGray · Sunflower

HEX
#B2B28C
RGB
rgb(178, 178, 140)
HSL
hsl(60, 20%, 62%)
HSB
hsb(60, 21%, 70%)
CMYK
cmyk(0%, 0%, 21%, 30%)
Oklch
oklch(75.4% 0.052 107.6)

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

#DEB383

Ginger · BurlyWood · Warm Sun

HEX
#DEB383
RGB
rgb(222, 179, 131)
HSL
hsl(32, 58%, 69%)
HSB
hsb(32, 41%, 87%)
CMYK
cmyk(0%, 19%, 41%, 13%)
Oklch
oklch(79.4% 0.081 69.3)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#E5785E

Peach Pink · Salmon · Coral Red

HEX
#E5785E
RGB
rgb(229, 120, 94)
HSL
hsl(12, 72%, 63%)
HSB
hsb(12, 59%, 90%)
CMYK
cmyk(0%, 48%, 59%, 10%)
Oklch
oklch(69.1% 0.141 34.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#CB3A4A

Crimson · Crimson · Passion Red

HEX
#CB3A4A
RGB
rgb(203, 58, 74)
HSL
hsl(353, 58%, 51%)
HSB
hsb(353, 71%, 80%)
CMYK
cmyk(0%, 71%, 64%, 20%)
Oklch
oklch(56.8% 0.181 19.1)

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

#8C073C

Dark Violet · Brown · Camellia

HEX
#8C073C
RGB
rgb(140, 7, 60)
HSL
hsl(336, 90%, 29%)
HSB
hsb(336, 95%, 55%)
CMYK
cmyk(0%, 95%, 57%, 45%)
Oklch
oklch(41.4% 0.161 7.0)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B2B28C
8B8BB1

Analogous

B19E8B
B2B28C
9EB18B

Triadic

B2B28C
8BB1B1
B18BB1

Split-Comp.

B2B28C
8B9EB1
9E8BB1

Tetradic

B2B28C
8BB19E
8B8BB1
B18B9E

Contrast Matrix WCAG 2.1 Contrast

B2B28C
DEB383
E5785E
CB3A4A
8C073C
—
1.1
Fail
1.3
Fail
2.3
Fail
4.4
AA Large
1.1
Fail
—
1.5
Fail
2.6
Fail
4.9
AA
1.3
Fail
1.5
Fail
—
1.7
Fail
3.2
AA Large
2.3
Fail
2.6
Fail
1.7
Fail
—
1.9
Fail
4.4
AA Large
4.9
AA
3.2
AA Large
1.9
Fail
—
White BG
2.2Fail
1.9Fail
2.9Fail
4.9AA
9.5AAA
Black BG
9.6AAA
10.9AAA
7.2AAA
4.2AA Large
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B2B295
CBCB8F
B6B564
8C8B46
52512F

Deuteranopia

B2B297
CED191
BCC466
95A045
5A642C

Tritanopia

B29C9E
DC989A
E0696A
C44342
852523

Achromatopsia

AEAEAE
BABABA
969696
676767
353535

Shades & Tints Shades & Tints

#B2B28C

Dark
Light

#DEB383

Dark
Light

#E5785E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b2b28c;
  --color-2: #deb383;
  --color-3: #e5785e;
  --color-4: #cb3a4a;
  --color-5: #8c073c;
}

SCSS

$color-1: #b2b28c;
$color-2: #deb383;
$color-3: #e5785e;
$color-4: #cb3a4a;
$color-5: #8c073c;

TAILWIND

colors: {
  'brand-1': '#b2b28c',
  'brand-2': '#deb383',
  'brand-3': '#e5785e',
  'brand-4': '#cb3a4a',
  'brand-5': '#8c073c',
}

RGB Array

[178, 178, 140], [222, 179, 131], [229, 120, 94], [203, 58, 74], [140, 7, 60]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #B2B28C, #DEB383, #E5785E, #CB3A4A, #8C073C is ideal for: corporate websites, product showcases, portfolios. 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: #b2b28c; --color-2: #deb383; --color-3: #e5785e; --color-4: #cb3a4a; --color-5: #8c073c. 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. 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