#86B591 + #6B6B63 + #E88080 + #E6B197 + #EDD09F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#86B591

Celadon · DarkSeaGreen · Apple Green

HEX

#86B591

RGB

rgb(134, 181, 145)

HSL

hsl(134, 24%, 62%)

HSB

hsb(134, 26%, 71%)

CMYK

cmyk(26%, 0%, 20%, 29%)

Oklch

oklch(73.0% 0.072 151.5)

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

#6B6B63

Ink Gray · DimGray · Charcoal

HEX

#6B6B63

RGB

rgb(107, 107, 99)

HSL

hsl(60, 4%, 40%)

HSB

hsb(60, 7%, 42%)

CMYK

cmyk(0%, 0%, 7%, 58%)

Oklch

oklch(52.5% 0.012 106.8)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#E88080

Peach Pink · LightCoral · Coral Red

HEX

#E88080

RGB

rgb(232, 128, 128)

HSL

hsl(0, 69%, 71%)

HSB

hsb(0, 45%, 91%)

CMYK

cmyk(0%, 45%, 45%, 9%)

Oklch

oklch(71.4% 0.128 20.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#E6B197

Apricot · BurlyWood · Warm Sun

HEX

#E6B197

RGB

rgb(230, 177, 151)

HSL

hsl(20, 61%, 75%)

HSB

hsb(20, 34%, 90%)

CMYK

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

Oklch

oklch(80.2% 0.072 47.4)

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

#EDD09F

Goose Yellow · Wheat · Peach Orange

HEX

#EDD09F

RGB

rgb(237, 208, 159)

HSL

hsl(38, 68%, 78%)

HSB

hsb(38, 33%, 93%)

CMYK

cmyk(0%, 12%, 33%, 7%)

Oklch

oklch(87.0% 0.072 80.6)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

86B591

B587AB

Analogous

93B587

86B591

87B5A9

Triadic

86B591

9287B5

B59287

Split-Comp.

86B591

A987B5

B58793

Tetradic

86B591

8793B5

B587AB

B5A987

Contrast Matrix WCAG 2.1 Contrast

86B591	6B6B63	E88080	E6B197	EDD09F
—	2.3 Fail	1.2 Fail	1.2 Fail	1.6 Fail
2.3 Fail	—	2.0 Fail	2.8 Fail	3.6 AA Large
1.2 Fail	2.0 Fail	—	1.4 Fail	1.8 Fail
1.2 Fail	2.8 Fail	1.4 Fail	—	1.3 Fail
1.6 Fail	3.6 AA Large	1.8 Fail	1.3 Fail	—

White BG

2.3Fail

5.4AA

2.7Fail

1.9Fail

1.5Fail

Black BG

9.0AAA

3.9AA Large

7.8AAA

11.1AAA

14.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9A9B9A

6B6B65

BBBA80

CFCF9D

E0E0AB

Deuteranopia

98949C

6B6B65

C1C980

D2D69F

E2E4AE

Tritanopia

88A1A2

6B6667

E38080

E3A2A3

ECB4B6

Achromatopsia

A3A3A3

6A6A6A

9F9F9F

BEBEBE

D3D3D3

Shades & Tints Shades & Tints

#86B591

Dark

Light

#6B6B63

Dark

Light

#E88080

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #86b591;
  --color-2: #6b6b63;
  --color-3: #e88080;
  --color-4: #e6b197;
  --color-5: #edd09f;
}

SCSS

$color-1: #86b591;
$color-2: #6b6b63;
$color-3: #e88080;
$color-4: #e6b197;
$color-5: #edd09f;

TAILWIND

colors: {
  'brand-1': '#86b591',
  'brand-2': '#6b6b63',
  'brand-3': '#e88080',
  'brand-4': '#e6b197',
  'brand-5': '#edd09f',
}

RGB Array

[134, 181, 145], [107, 107, 99], [232, 128, 128], [230, 177, 151], [237, 208, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #86B591, #6B6B63, #E88080, #E6B197, #EDD09F 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: #86b591; --color-2: #6b6b63; --color-3: #e88080; --color-4: #e6b197; --color-5: #edd09f. 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 general-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