#F8ECC2 + #D6E6C2 + #ABBA9B + #92A383 + #A7AE8F · vintage - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

NostalgicClassicTimelessWarm

Industry INDUSTRY

CafePublishingCraft

UI Context UI CONTEXT

StorefrontDigital MenuPoster

Color Details Color Details

#F8ECC2

Goose Yellow · Bisque · Lemon Cream

HEX

#F8ECC2

RGB

rgb(248, 236, 194)

HSL

hsl(47, 79%, 87%)

HSB

hsb(47, 22%, 97%)

CMYK

cmyk(0%, 5%, 22%, 3%)

Oklch

oklch(94.2% 0.056 94.0)

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

#D6E6C2

Willow Green · LightGray · Mint Green

HEX

#D6E6C2

RGB

rgb(214, 230, 194)

HSL

hsl(87, 42%, 83%)

HSB

hsb(87, 16%, 90%)

CMYK

cmyk(7%, 0%, 16%, 10%)

Oklch

oklch(90.3% 0.051 126.9)

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

#ABBA9B

Willow Green · DarkGray · Apple Green

HEX

#ABBA9B

RGB

rgb(171, 186, 155)

HSL

hsl(89, 18%, 67%)

HSB

hsb(89, 17%, 73%)

CMYK

cmyk(8%, 0%, 17%, 27%)

Oklch

oklch(76.9% 0.046 128.5)

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

#92A383

Celadon · DarkSeaGreen · Olive Green

HEX

#92A383

RGB

rgb(146, 163, 131)

HSL

hsl(92, 15%, 58%)

HSB

hsb(92, 20%, 64%)

CMYK

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

Oklch

oklch(69.3% 0.049 130.4)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#A7AE8F

Willow Green · DarkGray · Apple Green

HEX

#A7AE8F

RGB

rgb(167, 174, 143)

HSL

hsl(74, 16%, 62%)

HSB

hsb(74, 18%, 68%)

CMYK

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

Oklch

oklch(73.7% 0.044 117.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8ECC2

C4CFF8

Analogous

F8D3C4

F8ECC2

E9F8C4

Triadic

F8ECC2

C4F8ED

EDC4F8

Split-Comp.

F8ECC2

C4E9F8

D3C4F8

Tetradic

F8ECC2

C4F8D3

C4CFF8

F8C4E9

Contrast Matrix WCAG 2.1 Contrast

F8ECC2	D6E6C2	ABBA9B	92A383	A7AE8F
—	1.1 Fail	1.7 Fail	2.3 Fail	2.0 Fail
1.1 Fail	—	1.6 Fail	2.0 Fail	1.8 Fail
1.7 Fail	1.6 Fail	—	1.3 Fail	1.1 Fail
2.3 Fail	2.0 Fail	1.3 Fail	—	1.2 Fail
2.0 Fail	1.8 Fail	1.1 Fail	1.2 Fail	—

White BG

1.2Fail

1.3Fail

2.1Fail

2.7Fail

2.3Fail

Black BG

17.8AAA

16.0AAA

10.2AAA

7.8AAA

9.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F3F3CC

DDDDCB

B1B2A3

999A8B

AAAA97

Deuteranopia

F4F4CF

DCDBCD

B1B0A4

98978D

AAA998

Tritanopia

F7D4D6

D7D2D3

ACA8AA

939192

A79C9E

Achromatopsia

EBEBEB

DDDDDD

B2B2B2

9A9A9A

A8A8A8

Shades & Tints Shades & Tints

#F8ECC2

Dark

Light

#D6E6C2

Dark

Light

#ABBA9B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8ecc2;
  --color-2: #d6e6c2;
  --color-3: #abba9b;
  --color-4: #92a383;
  --color-5: #a7ae8f;
}

SCSS

$color-1: #f8ecc2;
$color-2: #d6e6c2;
$color-3: #abba9b;
$color-4: #92a383;
$color-5: #a7ae8f;

TAILWIND

colors: {
  'brand-1': '#f8ecc2',
  'brand-2': '#d6e6c2',
  'brand-3': '#abba9b',
  'brand-4': '#92a383',
  'brand-5': '#a7ae8f',
}

RGB Array

[248, 236, 194], [214, 230, 194], [171, 186, 155], [146, 163, 131], [167, 174, 143]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #F8ECC2, #D6E6C2, #ABBA9B, #92A383, #A7AE8F 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: #f8ecc2; --color-2: #d6e6c2; --color-3: #abba9b; --color-4: #92a383; --color-5: #a7ae8f. 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