#86A78C + #B7CC87 + #E3E38B + #F7B68B + #EA7F85 · vintage - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

NostalgicClassicTimelessWarm

Industry INDUSTRY

CafePublishingCraft

UI Context UI CONTEXT

StorefrontDigital MenuPoster

Color Details Color Details

#86A78C

Celadon · DarkSeaGreen · Olive Green

HEX

#86A78C

RGB

rgb(134, 167, 140)

HSL

hsl(131, 16%, 59%)

HSB

hsb(131, 20%, 65%)

CMYK

cmyk(20%, 0%, 16%, 35%)

Oklch

oklch(69.6% 0.053 150.2)

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

#B7CC87

Willow Green · Tan · Apple Green

HEX

#B7CC87

RGB

rgb(183, 204, 135)

HSL

hsl(78, 40%, 66%)

HSB

hsb(78, 34%, 80%)

CMYK

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

Oklch

oklch(81.3% 0.094 122.3)

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

#E3E38B

Fresh Green · Khaki · Sunflower

HEX

#E3E38B

RGB

rgb(227, 227, 139)

HSL

hsl(60, 61%, 72%)

HSB

hsb(60, 39%, 89%)

CMYK

cmyk(0%, 0%, 39%, 11%)

Oklch

oklch(89.7% 0.110 108.4)

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

#F7B68B

Apricot · BurlyWood · Peach Orange

HEX

#F7B68B

RGB

rgb(247, 182, 139)

HSL

hsl(24, 87%, 76%)

HSB

hsb(24, 44%, 97%)

CMYK

cmyk(0%, 26%, 44%, 3%)

Oklch

oklch(82.7% 0.095 54.5)

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

#EA7F85

Peach Pink · LightCoral · Coral Red

HEX

#EA7F85

RGB

rgb(234, 127, 133)

HSL

hsl(357, 72%, 71%)

HSB

hsb(357, 46%, 92%)

CMYK

cmyk(0%, 46%, 43%, 8%)

Oklch

oklch(71.6% 0.132 17.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

86A78C

A786A1

Analogous

90A786

86A78C

86A79D

Triadic

86A78C

8C86A7

A78C86

Split-Comp.

86A78C

9D86A7

A78690

Tetradic

86A78C

8690A7

A786A1

A79D86

Contrast Matrix WCAG 2.1 Contrast

86A78C	B7CC87	E3E38B	F7B68B	EA7F85
—	1.5 Fail	2.0 Fail	1.5 Fail	1.0 Fail
1.5 Fail	—	1.3 Fail	1.0 Fail	1.5 Fail
2.0 Fail	1.3 Fail	—	1.3 Fail	2.0 Fail
1.5 Fail	1.0 Fail	1.3 Fail	—	1.5 Fail
1.0 Fail	1.5 Fail	2.0 Fail	1.5 Fail	—

White BG

2.7Fail

1.7Fail

1.3Fail

1.7Fail

2.7Fail

Black BG

7.9AAA

12.0AAA

15.6AAA

12.0AAA

7.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

949593

C0C098

E3E3A0

DBDA95

BCBB84

Deuteranopia

929094

BFBD9C

E3E3A5

DFE398

C2CA83

Tritanopia

889899

B8A5A8

E3B1B5

F49E9F

E58282

Achromatopsia

9A9A9A

BEBEBE

D9D9D9

C5C5C5

A0A0A0

Shades & Tints Shades & Tints

#86A78C

Dark

Light

#B7CC87

Dark

Light

#E3E38B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #86a78c;
  --color-2: #b7cc87;
  --color-3: #e3e38b;
  --color-4: #f7b68b;
  --color-5: #ea7f85;
}

SCSS

$color-1: #86a78c;
$color-2: #b7cc87;
$color-3: #e3e38b;
$color-4: #f7b68b;
$color-5: #ea7f85;

TAILWIND

colors: {
  'brand-1': '#86a78c',
  'brand-2': '#b7cc87',
  'brand-3': '#e3e38b',
  'brand-4': '#f7b68b',
  'brand-5': '#ea7f85',
}

RGB Array

[134, 167, 140], [183, 204, 135], [227, 227, 139], [247, 182, 139], [234, 127, 133]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #86A78C, #B7CC87, #E3E38B, #F7B68B, #EA7F85 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: #86a78c; --color-2: #b7cc87; --color-3: #e3e38b; --color-4: #f7b68b; --color-5: #ea7f85. 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