#F5B997 + #D3C596 + #BECAA2 + #D1BA8E + #FCAC63 · vintage - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

NostalgicClassicTimelessWarm

Industry INDUSTRY

CafePublishingCraft

UI Context UI CONTEXT

StorefrontDigital MenuPoster

Color Details Color Details

#F5B997

Apricot · BurlyWood · Peach Orange

HEX

#F5B997

RGB

rgb(245, 185, 151)

HSL

hsl(22, 82%, 78%)

HSB

hsb(22, 38%, 96%)

CMYK

cmyk(0%, 24%, 38%, 4%)

Oklch

oklch(83.2% 0.083 50.7)

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

#D3C596

Goose Yellow · Tan · Sunflower

HEX

#D3C596

RGB

rgb(211, 197, 150)

HSL

hsl(46, 41%, 71%)

HSB

hsb(46, 29%, 83%)

CMYK

cmyk(0%, 7%, 29%, 17%)

Oklch

oklch(82.3% 0.064 93.5)

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

#BECAA2

Willow Green · Silver · Apple Green

HEX

#BECAA2

RGB

rgb(190, 202, 162)

HSL

hsl(78, 27%, 71%)

HSB

hsb(78, 20%, 79%)

CMYK

cmyk(6%, 0%, 20%, 21%)

Oklch

oklch(81.9% 0.056 121.2)

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

#D1BA8E

Ginger · Tan · Warm Sun

HEX

#D1BA8E

RGB

rgb(209, 186, 142)

HSL

hsl(39, 42%, 69%)

HSB

hsb(39, 32%, 82%)

CMYK

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

Oklch

oklch(79.8% 0.064 83.4)

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

#FCAC63

Apricot · SandyBrown · Warm Sun

HEX

#FCAC63

RGB

rgb(252, 172, 99)

HSL

hsl(29, 96%, 69%)

HSB

hsb(29, 61%, 99%)

CMYK

cmyk(0%, 32%, 61%, 1%)

Oklch

oklch(80.8% 0.130 61.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5B997

99D3F5

Analogous

F599A5

F5B997

F5E999

Triadic

F5B997

99F5BB

BB99F5

Split-Comp.

F5B997

99F5E9

99A5F5

Tetradic

F5B997

A5F599

99D3F5

E999F5

Contrast Matrix WCAG 2.1 Contrast

F5B997	D3C596	BECAA2	D1BA8E	FCAC63
—	1.0 Fail	1.0 Fail	1.1 Fail	1.1 Fail
1.0 Fail	—	1.0 Fail	1.1 Fail	1.1 Fail
1.0 Fail	1.0 Fail	—	1.1 Fail	1.1 Fail
1.1 Fail	1.1 Fail	1.1 Fail	—	1.0 Fail
1.1 Fail	1.1 Fail	1.1 Fail	1.0 Fail	—

White BG

1.7Fail

1.9Fail

Black BG

12.3AAA

12.2AAA

11.1AAA

11.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDA9F

CDCDA1

C3C3AC

C7C799

D9D975

Deuteranopia

DFE3A1

CECFA4

C3C2AE

C8CA9B

DEE479

Tritanopia

F2A6A7

D2AAAC

BFB3B5

D0A1A3

F88386

Achromatopsia

C7C7C7

C4C4C4

C2C2C2

BCBCBC

Shades & Tints Shades & Tints

#F5B997

Dark

Light

#D3C596

Dark

Light

#BECAA2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5b997;
  --color-2: #d3c596;
  --color-3: #becaa2;
  --color-4: #d1ba8e;
  --color-5: #fcac63;
}

SCSS

$color-1: #f5b997;
$color-2: #d3c596;
$color-3: #becaa2;
$color-4: #d1ba8e;
$color-5: #fcac63;

TAILWIND

colors: {
  'brand-1': '#f5b997',
  'brand-2': '#d3c596',
  'brand-3': '#becaa2',
  'brand-4': '#d1ba8e',
  'brand-5': '#fcac63',
}

RGB Array

[245, 185, 151], [211, 197, 150], [190, 202, 162], [209, 186, 142], [252, 172, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #F5B997, #D3C596, #BECAA2, #D1BA8E, #FCAC63 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: #f5b997; --color-2: #d3c596; --color-3: #becaa2; --color-4: #d1ba8e; --color-5: #fcac63. 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