#8A8780 + #E6E5C4 + #D6D1AF + #E47267 + #D7D8C5 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8A8780

Ash · Gray · Warm Gray

HEX

#8A8780

RGB

rgb(138, 135, 128)

HSL

hsl(42, 4%, 52%)

HSB

hsb(42, 7%, 54%)

CMYK

cmyk(0%, 2%, 7%, 46%)

Oklch

oklch(62.4% 0.011 87.5)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#E6E5C4

Fresh Green · Wheat · Lemon Cream

HEX

#E6E5C4

RGB

rgb(230, 229, 196)

HSL

hsl(58, 40%, 84%)

HSB

hsb(58, 15%, 90%)

CMYK

cmyk(0%, 0%, 15%, 10%)

Oklch

oklch(91.4% 0.044 105.8)

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

#D6D1AF

Fresh Green · Silver · Lemon Cream

HEX

#D6D1AF

RGB

rgb(214, 209, 175)

HSL

hsl(52, 32%, 76%)

HSB

hsb(52, 18%, 84%)

CMYK

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

Oklch

oklch(85.6% 0.046 100.4)

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

#E47267

Peach Pink · Salmon · Coral Red

HEX

#E47267

RGB

rgb(228, 114, 103)

HSL

hsl(5, 70%, 65%)

HSB

hsb(5, 55%, 89%)

CMYK

cmyk(0%, 50%, 55%, 11%)

Oklch

oklch(68.2% 0.144 27.1)

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

#D7D8C5

Fresh Green · LightGray · Lemon Cream

HEX

#D7D8C5

RGB

rgb(215, 216, 197)

HSL

hsl(63, 20%, 81%)

HSB

hsb(63, 9%, 85%)

CMYK

cmyk(0%, 0%, 9%, 15%)

Oklch

oklch(87.6% 0.026 109.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8A8780

808389

Analogous

898280

8A8780

888980

Triadic

8A8780

808987

878089

Split-Comp.

8A8780

808889

828089

Tetradic

8A8780

808982

808389

898088

Contrast Matrix WCAG 2.1 Contrast

8A8780	E6E5C4	D6D1AF	E47267	D7D8C5
—	2.8 Fail	2.3 Fail	1.2 Fail	2.5 Fail
2.8 Fail	—	1.2 Fail	2.4 Fail	1.1 Fail
2.3 Fail	1.2 Fail	—	2.0 Fail	1.1 Fail
1.2 Fail	2.4 Fail	2.0 Fail	—	2.1 Fail
2.5 Fail	1.1 Fail	1.1 Fail	2.1 Fail	—

White BG

3.6AA Large

1.3Fail

1.5Fail

3.0AA Large

1.4Fail

Black BG

5.9AA

16.4AAA

13.6AAA

6.9AA

14.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

898982

E6E6CC

D4D4B7

B3B26A

D7D7CA

Deuteranopia

898982

E6E6CE

D4D4B9

B9C26A

D7D7CB

Tritanopia

8A8383

E6D2D4

D6BEBF

DE6C6C

D7CDCE

Achromatopsia

878787

E2E2E2

CFCFCF

939393

D6D6D6

Shades & Tints Shades & Tints

#8A8780

Dark

Light

#E6E5C4

Dark

Light

#D6D1AF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8a8780;
  --color-2: #e6e5c4;
  --color-3: #d6d1af;
  --color-4: #e47267;
  --color-5: #d7d8c5;
}

SCSS

$color-1: #8a8780;
$color-2: #e6e5c4;
$color-3: #d6d1af;
$color-4: #e47267;
$color-5: #d7d8c5;

TAILWIND

colors: {
  'brand-1': '#8a8780',
  'brand-2': '#e6e5c4',
  'brand-3': '#d6d1af',
  'brand-4': '#e47267',
  'brand-5': '#d7d8c5',
}

RGB Array

[138, 135, 128], [230, 229, 196], [214, 209, 175], [228, 114, 103], [215, 216, 197]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #8A8780, #E6E5C4, #D6D1AF, #E47267, #D7D8C5 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: #8a8780; --color-2: #e6e5c4; --color-3: #d6d1af; --color-4: #e47267; --color-5: #d7d8c5. 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 cool-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