#E8E7C9 + #AED1BD + #9AB77D + #83626D + #E06F73 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E8E7C9

Fresh Green · Bisque · Lemon Cream

HEX

#E8E7C9

RGB

rgb(232, 231, 201)

HSL

hsl(58, 40%, 85%)

HSB

hsb(58, 13%, 91%)

CMYK

cmyk(0%, 0%, 13%, 9%)

Oklch

oklch(92.1% 0.040 105.6)

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

#AED1BD

Celadon · Silver · Apple Green

HEX

#AED1BD

RGB

rgb(174, 209, 189)

HSL

hsl(146, 28%, 75%)

HSB

hsb(146, 17%, 82%)

CMYK

cmyk(17%, 0%, 10%, 18%)

Oklch

oklch(83.0% 0.046 160.2)

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

#9AB77D

Celadon · DarkSeaGreen · Olive Green

HEX

#9AB77D

RGB

rgb(154, 183, 125)

HSL

hsl(90, 29%, 60%)

HSB

hsb(90, 32%, 72%)

CMYK

cmyk(16%, 0%, 32%, 28%)

Oklch

oklch(74.3% 0.086 129.9)

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

#83626D

Dark Violet · DimGray · Camellia

HEX

#83626D

RGB

rgb(131, 98, 109)

HSL

hsl(340, 14%, 45%)

HSB

hsb(340, 25%, 51%)

CMYK

cmyk(0%, 25%, 17%, 49%)

Oklch

oklch(53.3% 0.045 356.9)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#E06F73

Peach Pink · LightCoral · Coral Red

HEX

#E06F73

RGB

rgb(224, 111, 115)

HSL

hsl(358, 65%, 66%)

HSB

hsb(358, 50%, 88%)

CMYK

cmyk(0%, 50%, 49%, 12%)

Oklch

oklch(67.5% 0.141 19.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E8E7C9

C9CAE8

Analogous

E8D8C9

E8E7C9

DAE8C9

Triadic

E8E7C9

C9E8E7

E7C9E8

Split-Comp.

E8E7C9

C9DAE8

D8C9E8

Tetradic

E8E7C9

C9E8D8

C9CAE8

E8C9DA

Contrast Matrix WCAG 2.1 Contrast

E8E7C9	AED1BD	9AB77D	83626D	E06F73
—	1.3 Fail	1.8 Fail	4.2 AA Large	2.5 Fail
1.3 Fail	—	1.3 Fail	3.2 AA Large	1.9 Fail
1.8 Fail	1.3 Fail	—	2.4 Fail	1.4 Fail
4.2 AA Large	3.2 AA Large	2.4 Fail	—	1.7 Fail
2.5 Fail	1.9 Fail	1.4 Fail	1.7 Fail	—

White BG

1.3Fail

1.7Fail

2.2Fail

5.3AA

3.1AA Large

Black BG

16.7AAA

12.7AAA

9.4AAA

3.9AA Large

6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E8E8D0

BDBDC2

A7A78B

75746A

AFAE72

Deuteranopia

E8E8D2

BBB9C3

A5A38E

77796A

B6BE72

Tritanopia

E8D6D7

B0C6C7

9B9699

816868

DA7171

Achromatopsia

E4E4E4

C4C4C4

A8A8A8

6D6D6D

919191

Shades & Tints Shades & Tints

#E8E7C9

Dark

Light

#AED1BD

Dark

Light

#9AB77D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e8e7c9;
  --color-2: #aed1bd;
  --color-3: #9ab77d;
  --color-4: #83626d;
  --color-5: #e06f73;
}

SCSS

$color-1: #e8e7c9;
$color-2: #aed1bd;
$color-3: #9ab77d;
$color-4: #83626d;
$color-5: #e06f73;

TAILWIND

colors: {
  'brand-1': '#e8e7c9',
  'brand-2': '#aed1bd',
  'brand-3': '#9ab77d',
  'brand-4': '#83626d',
  'brand-5': '#e06f73',
}

RGB Array

[232, 231, 201], [174, 209, 189], [154, 183, 125], [131, 98, 109], [224, 111, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E8E7C9, #AED1BD, #9AB77D, #83626D, #E06F73 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: #e8e7c9; --color-2: #aed1bd; --color-3: #9ab77d; --color-4: #83626d; --color-5: #e06f73. 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