#C4D6B0 + #B4D1B2 + #AFC497 + #B3BA88 + #DEBA87 · vintage - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

NostalgicClassicTimelessWarm

Industry INDUSTRY

CafePublishingCraft

UI Context UI CONTEXT

StorefrontDigital MenuPoster

Color Details Color Details

#C4D6B0

Willow Green · Silver · Apple Green

HEX

#C4D6B0

RGB

rgb(196, 214, 176)

HSL

hsl(88, 32%, 76%)

HSB

hsb(88, 18%, 84%)

CMYK

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

Oklch

oklch(85.2% 0.055 128.2)

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

#B4D1B2

Celadon · Silver · Apple Green

HEX

#B4D1B2

RGB

rgb(180, 209, 178)

HSL

hsl(116, 25%, 76%)

HSB

hsb(116, 15%, 82%)

CMYK

cmyk(14%, 0%, 15%, 18%)

Oklch

oklch(83.1% 0.053 143.4)

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

#AFC497

Willow Green · DarkGray · Apple Green

HEX

#AFC497

RGB

rgb(175, 196, 151)

HSL

hsl(88, 28%, 68%)

HSB

hsb(88, 23%, 77%)

CMYK

cmyk(11%, 0%, 23%, 23%)

Oklch

oklch(79.3% 0.066 128.2)

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

#B3BA88

Fresh Green · Tan · Sunflower

HEX

#B3BA88

RGB

rgb(179, 186, 136)

HSL

hsl(68, 27%, 63%)

HSB

hsb(68, 27%, 73%)

CMYK

cmyk(4%, 0%, 27%, 27%)

Oklch

oklch(77.1% 0.068 114.5)

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

#DEBA87

Ginger · BurlyWood · Warm Sun

HEX

#DEBA87

RGB

rgb(222, 186, 135)

HSL

hsl(35, 57%, 70%)

HSB

hsb(35, 39%, 87%)

CMYK

cmyk(0%, 16%, 39%, 13%)

Oklch

oklch(80.8% 0.079 75.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C4D6B0

C0AED5

Analogous

D5D4AE

C4D6B0

B0D5AE

Triadic

C4D6B0

AEC3D5

D5AEC3

Split-Comp.

C4D6B0

AEB0D5

D4AED5

Tetradic

C4D6B0

AED5D4

C0AED5

D5AEB0

Contrast Matrix WCAG 2.1 Contrast

C4D6B0	B4D1B2	AFC497	B3BA88	DEBA87
—	1.1 Fail	1.2 Fail	1.3 Fail	1.2 Fail
1.1 Fail	—	1.1 Fail	1.2 Fail	1.1 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.0 Fail
1.3 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
1.2 Fail	1.1 Fail	1.0 Fail	1.1 Fail	—

White BG

1.5Fail

1.7Fail

1.9Fail

2.0Fail

1.8Fail

Black BG

13.6AAA

12.7AAA

11.2AAA

10.3AAA

11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCCB9

C1C1BA

B8B8A2

B6B694

CECE93

Deuteranopia

CBC9BB

BFBDBB

B7B5A5

B6B597

D1D396

Tritanopia

C5C0C2

B5BFC1

B0AAAC

B39EA0

DC9D9F

Achromatopsia

CCCCCC

C5C5C5

B9B9B9

B2B2B2

BFBFBF

Shades & Tints Shades & Tints

#C4D6B0

Dark

Light

#B4D1B2

Dark

Light

#AFC497

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c4d6b0;
  --color-2: #b4d1b2;
  --color-3: #afc497;
  --color-4: #b3ba88;
  --color-5: #deba87;
}

SCSS

$color-1: #c4d6b0;
$color-2: #b4d1b2;
$color-3: #afc497;
$color-4: #b3ba88;
$color-5: #deba87;

TAILWIND

colors: {
  'brand-1': '#c4d6b0',
  'brand-2': '#b4d1b2',
  'brand-3': '#afc497',
  'brand-4': '#b3ba88',
  'brand-5': '#deba87',
}

RGB Array

[196, 214, 176], [180, 209, 178], [175, 196, 151], [179, 186, 136], [222, 186, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #C4D6B0, #B4D1B2, #AFC497, #B3BA88, #DEBA87 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: #c4d6b0; --color-2: #b4d1b2; --color-3: #afc497; --color-4: #b3ba88; --color-5: #deba87. 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