← Back to Editor

#5B847C · #BDC065 · #F3DC74 · #FFCE82 · #BCB183

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 MenuPoster

Color Details Color Details

#5B847C

Mineral Blue · SlateGray · Mint Ice

HEX
#5B847C
RGB
rgb(91, 132, 124)
HSL
hsl(168, 18%, 44%)
HSB
hsb(168, 31%, 52%)
CMYK
cmyk(31%, 0%, 6%, 48%)
Oklch
oklch(58.1% 0.047 181.1)

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

#BDC065

Autumn Sage · Tan · Sunflower

HEX
#BDC065
RGB
rgb(189, 192, 101)
HSL
hsl(62, 42%, 57%)
HSB
hsb(62, 47%, 75%)
CMYK
cmyk(2%, 0%, 47%, 25%)
Oklch
oklch(78.6% 0.115 110.4)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#F3DC74

Ginger · Khaki · Sunflower

HEX
#F3DC74
RGB
rgb(243, 220, 116)
HSL
hsl(49, 84%, 70%)
HSB
hsb(49, 52%, 95%)
CMYK
cmyk(0%, 9%, 52%, 5%)
Oklch
oklch(89.3% 0.127 97.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#FFCE82

Goose Yellow · Khaki · Warm Sun

HEX
#FFCE82
RGB
rgb(255, 206, 130)
HSL
hsl(36, 100%, 75%)
HSB
hsb(36, 49%, 100%)
CMYK
cmyk(0%, 19%, 49%, 0%)
Oklch
oklch(87.8% 0.109 77.6)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#BCB183

Ginger · Tan · Sunflower

HEX
#BCB183
RGB
rgb(188, 177, 131)
HSL
hsl(48, 30%, 63%)
HSB
hsb(48, 30%, 74%)
CMYK
cmyk(0%, 6%, 30%, 26%)
Oklch
oklch(75.8% 0.063 96.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5B847C
845C64

Analogous

5C8468
5B847C
5C7884

Triadic

5B847C
7C5C84
847C5C

Split-Comp.

5B847C
845C78
84685C

Tetradic

5B847C
685C84
845C64
78845C

Contrast Matrix WCAG 2.1 Contrast

5B847C
BDC065
F3DC74
FFCE82
BCB183
—
2.2
Fail
3.0
AA Large
2.9
Fail
1.9
Fail
2.2
Fail
—
1.4
Fail
1.3
Fail
1.1
Fail
3.0
AA Large
1.4
Fail
—
1.1
Fail
1.6
Fail
2.9
Fail
1.3
Fail
1.1
Fail
—
1.5
Fail
1.9
Fail
1.1
Fail
1.6
Fail
1.5
Fail
—
White BG
4.2AA Large
1.9Fail
1.4Fail
1.5Fail
2.2Fail
Black BG
5.0AA
10.9AAA
15.3AAA
14.4AAA
9.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6D6D7E
BEBE7B
E9E98D
EAE994
B7B78E

Deuteranopia

6A677E
BEBE80
EAEC93
EDF099
B8B991

Tritanopia

5D7F80
BD8C90
F2A1A5
FDA3A6
BB9799

Achromatopsia

777777
B5B5B5
D7D7D7
D4D4D4
AFAFAF

Shades & Tints Shades & Tints

#5B847C

Dark
Light

#BDC065

Dark
Light

#F3DC74

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5b847c;
  --color-2: #bdc065;
  --color-3: #f3dc74;
  --color-4: #ffce82;
  --color-5: #bcb183;
}

SCSS

$color-1: #5b847c;
$color-2: #bdc065;
$color-3: #f3dc74;
$color-4: #ffce82;
$color-5: #bcb183;

TAILWIND

colors: {
  'brand-1': '#5b847c',
  'brand-2': '#bdc065',
  'brand-3': '#f3dc74',
  'brand-4': '#ffce82',
  'brand-5': '#bcb183',
}

RGB Array

[91, 132, 124], [189, 192, 101], [243, 220, 116], [255, 206, 130], [188, 177, 131]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #5B847C, #BDC065, #F3DC74, #FFCE82, #BCB183 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: #5b847c; --color-2: #bdc065; --color-3: #f3dc74; --color-4: #ffce82; --color-5: #bcb183. 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