#B89376 + #F7E2B5 + #CCD5A8 + #CAB870 + #EABF9F · vintage - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

NostalgicClassicTimelessWarm

Industry INDUSTRY

CafePublishingCraft

UI Context UI CONTEXT

StorefrontDigital MenuPoster

Color Details Color Details

#B89376

Tangerine · Tan · Warm Sun

HEX

#B89376

RGB

rgb(184, 147, 118)

HSL

hsl(26, 32%, 59%)

HSB

hsb(26, 36%, 72%)

CMYK

cmyk(0%, 20%, 36%, 28%)

Oklch

oklch(69.0% 0.060 59.6)

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

#F7E2B5

Goose Yellow · Wheat · Lemon Cream

HEX

#F7E2B5

RGB

rgb(247, 226, 181)

HSL

hsl(41, 80%, 84%)

HSB

hsb(41, 27%, 97%)

CMYK

cmyk(0%, 9%, 27%, 3%)

Oklch

oklch(91.9% 0.063 85.9)

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

#CCD5A8

Willow Green · Silver · Apple Green

HEX

#CCD5A8

RGB

rgb(204, 213, 168)

HSL

hsl(72, 35%, 75%)

HSB

hsb(72, 21%, 84%)

CMYK

cmyk(4%, 0%, 21%, 16%)

Oklch

oklch(85.5% 0.061 116.9)

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

#CAB870

Ginger · Tan · Sunflower

HEX

#CAB870

RGB

rgb(202, 184, 112)

HSL

hsl(48, 46%, 62%)

HSB

hsb(48, 45%, 79%)

CMYK

cmyk(0%, 9%, 45%, 21%)

Oklch

oklch(78.2% 0.094 95.8)

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

#EABF9F

Apricot · BurlyWood · Peach Orange

HEX

#EABF9F

RGB

rgb(234, 191, 159)

HSL

hsl(26, 64%, 77%)

HSB

hsb(26, 32%, 92%)

CMYK

cmyk(0%, 18%, 32%, 8%)

Oklch

oklch(83.4% 0.066 58.4)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B89376

759BB8

Analogous

B87579

B89376

B8B375

Triadic

B89376

75B892

9275B8

Split-Comp.

B89376

75B8B3

7579B8

Tetradic

B89376

79B875

759BB8

B375B8

Contrast Matrix WCAG 2.1 Contrast

B89376	F7E2B5	CCD5A8	CAB870	EABF9F
—	2.2 Fail	1.8 Fail	1.4 Fail	1.7 Fail
2.2 Fail	—	1.2 Fail	1.6 Fail	1.3 Fail
1.8 Fail	1.2 Fail	—	1.3 Fail	1.1 Fail
1.4 Fail	1.6 Fail	1.3 Fail	—	1.2 Fail
1.7 Fail	1.3 Fail	1.1 Fail	1.2 Fail	—

White BG

2.8Fail

1.3Fail

1.5Fail

2.0Fail

1.7Fail

Black BG

7.5AAA

16.5AAA

13.7AAA

10.6AAA

12.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A87D

EEEEC0

D0D0B3

C2C281

D7D7A7

Deuteranopia

AAAD7F

EFF1C3

CFCFB6

C3C586

DADDA9

Tritanopia

B68384

F6C8CA

CCBBBD

C98F92

E8ADAE

Achromatopsia

9B9B9B

E3E3E3

CDCDCD

B5B5B5

C8C8C8

Shades & Tints Shades & Tints

#B89376

Dark

Light

#F7E2B5

Dark

Light

#CCD5A8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b89376;
  --color-2: #f7e2b5;
  --color-3: #ccd5a8;
  --color-4: #cab870;
  --color-5: #eabf9f;
}

SCSS

$color-1: #b89376;
$color-2: #f7e2b5;
$color-3: #ccd5a8;
$color-4: #cab870;
$color-5: #eabf9f;

TAILWIND

colors: {
  'brand-1': '#b89376',
  'brand-2': '#f7e2b5',
  'brand-3': '#ccd5a8',
  'brand-4': '#cab870',
  'brand-5': '#eabf9f',
}

RGB Array

[184, 147, 118], [247, 226, 181], [204, 213, 168], [202, 184, 112], [234, 191, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #B89376, #F7E2B5, #CCD5A8, #CAB870, #EABF9F is ideal for: health products, baby brands, fresh-style blogs. 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: #b89376; --color-2: #f7e2b5; --color-3: #ccd5a8; --color-4: #cab870; --color-5: #eabf9f. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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