← Back to Editor

#F6E5B1 · #B6BE8A · #939E8B · #B89B7B · #CB6E60

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

#F6E5B1

Goose Yellow · Wheat · Lemon Cream

HEX
#F6E5B1
RGB
rgb(246, 229, 177)
HSL
hsl(45, 79%, 83%)
HSB
hsb(45, 28%, 96%)
CMYK
cmyk(0%, 7%, 28%, 4%)
Oklch
oklch(92.3% 0.070 92.1)

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

#B6BE8A

Fresh Green · Tan · Sunflower

HEX
#B6BE8A
RGB
rgb(182, 190, 138)
HSL
hsl(69, 29%, 64%)
HSB
hsb(69, 27%, 75%)
CMYK
cmyk(4%, 0%, 27%, 25%)
Oklch
oklch(78.2% 0.071 115.2)

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

#939E8B

Celadon · DarkSeaGreen · Silver Sand

HEX
#939E8B
RGB
rgb(147, 158, 139)
HSL
hsl(95, 9%, 58%)
HSB
hsb(95, 12%, 62%)
CMYK
cmyk(7%, 0%, 12%, 38%)
Oklch
oklch(68.5% 0.030 131.9)

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

#B89B7B

Ginger · Tan · Warm Sun

HEX
#B89B7B
RGB
rgb(184, 155, 123)
HSL
hsl(31, 30%, 60%)
HSB
hsb(31, 33%, 72%)
CMYK
cmyk(0%, 16%, 33%, 28%)
Oklch
oklch(70.7% 0.056 69.5)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#CB6E60

Crimson · LightCoral · Passion Red

HEX
#CB6E60
RGB
rgb(203, 110, 96)
HSL
hsl(8, 51%, 59%)
HSB
hsb(8, 53%, 80%)
CMYK
cmyk(0%, 46%, 53%, 20%)
Oklch
oklch(64.1% 0.120 29.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F6E5B1
B1C3F6

Analogous

F6C3B1
F6E5B1
E5F6B1

Triadic

F6E5B1
B1F6E5
E5B1F6

Split-Comp.

F6E5B1
B1E5F6
C3B1F6

Tetradic

F6E5B1
B1F6C3
B1C3F6
F6B1E5

Contrast Matrix WCAG 2.1 Contrast

F6E5B1
B6BE8A
939E8B
B89B7B
CB6E60
—
1.6
Fail
2.2
Fail
2.1
Fail
2.8
Fail
1.6
Fail
—
1.4
Fail
1.3
Fail
1.8
Fail
2.2
Fail
1.4
Fail
—
1.1
Fail
1.3
Fail
2.1
Fail
1.3
Fail
1.1
Fail
—
1.3
Fail
2.8
Fail
1.8
Fail
1.3
Fail
1.3
Fail
—
White BG
1.3Fail
2.0Fail
2.8Fail
2.6Fail
3.5AA Large
Black BG
16.8AAA
10.7AAA
7.5AAA
8.0AAA
5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFEEBE
B9BA97
989890
ABAB83
A3A263

Deuteranopia

F0F1C1
B9B89A
979691
ADAF85
A8AF64

Tritanopia

F5C8CA
B6A1A3
949394
B7898A
C66667

Achromatopsia

E4E4E4
B6B6B6
999999
A0A0A0
888888

Shades & Tints Shades & Tints

#F6E5B1

Dark
Light

#B6BE8A

Dark
Light

#939E8B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f6e5b1;
  --color-2: #b6be8a;
  --color-3: #939e8b;
  --color-4: #b89b7b;
  --color-5: #cb6e60;
}

SCSS

$color-1: #f6e5b1;
$color-2: #b6be8a;
$color-3: #939e8b;
$color-4: #b89b7b;
$color-5: #cb6e60;

TAILWIND

colors: {
  'brand-1': '#f6e5b1',
  'brand-2': '#b6be8a',
  'brand-3': '#939e8b',
  'brand-4': '#b89b7b',
  'brand-5': '#cb6e60',
}

RGB Array

[246, 229, 177], [182, 190, 138], [147, 158, 139], [184, 155, 123], [203, 110, 96]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #F6E5B1, #B6BE8A, #939E8B, #B89B7B, #CB6E60 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: #f6e5b1; --color-2: #b6be8a; --color-3: #939e8b; --color-4: #b89b7b; --color-5: #cb6e60. 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