#F1ECA6 + #D3D2B1 + #B5B9BB + #968B81 + #ADD8D0 · vintage - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

NostalgicClassicTimelessWarmCool

Industry INDUSTRY

CafePublishingCraft

UI Context UI CONTEXT

StorefrontDigital MenuPoster

Color Details Color Details

#F1ECA6

Fresh Green · Wheat · Lemon Cream

HEX

#F1ECA6

RGB

rgb(241, 236, 166)

HSL

hsl(56, 73%, 80%)

HSB

hsb(56, 31%, 95%)

CMYK

cmyk(0%, 2%, 31%, 5%)

Oklch

oklch(93.1% 0.089 104.5)

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

#D3D2B1

Fresh Green · Silver · Lemon Cream

HEX

#D3D2B1

RGB

rgb(211, 210, 177)

HSL

hsl(58, 28%, 76%)

HSB

hsb(58, 16%, 83%)

CMYK

cmyk(0%, 0%, 16%, 17%)

Oklch

oklch(85.6% 0.044 105.9)

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

#B5B9BB

Silver Gray · Silver · Pearl Gray

HEX

#B5B9BB

RGB

rgb(181, 185, 187)

HSL

hsl(200, 4%, 72%)

HSB

hsb(200, 3%, 73%)

CMYK

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

Oklch

oklch(78.3% 0.005 228.8)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#968B81

Tangerine · Gray · Warm Gray

HEX

#968B81

RGB

rgb(150, 139, 129)

HSL

hsl(29, 9%, 55%)

HSB

hsb(29, 14%, 59%)

CMYK

cmyk(0%, 7%, 14%, 41%)

Oklch

oklch(64.3% 0.020 64.8)

Traditional「Tangerine」· Paint「Warm Gray」· Creative Urban Concrete

#ADD8D0

Jade · LightBlue · Glacier Blue

HEX

#ADD8D0

RGB

rgb(173, 216, 208)

HSL

hsl(169, 36%, 76%)

HSB

hsb(169, 20%, 85%)

CMYK

cmyk(20%, 0%, 4%, 15%)

Oklch

oklch(84.9% 0.046 182.6)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1ECA6

A7ACF1

Analogous

F1C7A7

F1ECA6

D1F1A7

Triadic

F1ECA6

A7F1EC

ECA7F1

Split-Comp.

F1ECA6

A7D1F1

C7A7F1

Tetradic

F1ECA6

A7F1C7

A7ACF1

F1A7D1

Contrast Matrix WCAG 2.1 Contrast

F1ECA6	D3D2B1	B5B9BB	968B81	ADD8D0
—	1.3 Fail	1.6 Fail	2.7 Fail	1.3 Fail
1.3 Fail	—	1.3 Fail	2.2 Fail	1.0 Fail
1.6 Fail	1.3 Fail	—	1.7 Fail	1.3 Fail
2.7 Fail	2.2 Fail	1.7 Fail	—	2.1 Fail
1.3 Fail	1.0 Fail	1.3 Fail	2.1 Fail	—

White BG

1.2Fail

1.5Fail

2.0Fail

3.3AA Large

1.6Fail

Black BG

17.3AAA

13.6AAA

10.6AAA

6.3AA

13.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFEFB7

D3D3B9

B7B7BB

919183

C0C0D2

Deuteranopia

EFF0BB

D3D3BB

B7B6BA

929384

BDBAD2

Tritanopia

F1C4C7

D3BFC1

B5BABA

958586

AFD3D4

Achromatopsia

E6E6E6

CFCFCF

B8B8B8

8D8D8D

CACACA

Shades & Tints Shades & Tints

#F1ECA6

Dark

Light

#D3D2B1

Dark

Light

#B5B9BB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1eca6;
  --color-2: #d3d2b1;
  --color-3: #b5b9bb;
  --color-4: #968b81;
  --color-5: #add8d0;
}

SCSS

$color-1: #f1eca6;
$color-2: #d3d2b1;
$color-3: #b5b9bb;
$color-4: #968b81;
$color-5: #add8d0;

TAILWIND

colors: {
  'brand-1': '#f1eca6',
  'brand-2': '#d3d2b1',
  'brand-3': '#b5b9bb',
  'brand-4': '#968b81',
  'brand-5': '#add8d0',
}

RGB Array

[241, 236, 166], [211, 210, 177], [181, 185, 187], [150, 139, 129], [173, 216, 208]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #F1ECA6, #D3D2B1, #B5B9BB, #968B81, #ADD8D0 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: #f1eca6; --color-2: #d3d2b1; --color-3: #b5b9bb; --color-4: #968b81; --color-5: #add8d0. 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