#E0C8B1 + #BCC7A5 + #84C2A9 + #58A1A6 + #4E6580 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#E0C8B1

Apricot · Wheat · Peach Orange

HEX

#E0C8B1

RGB

rgb(224, 200, 177)

HSL

hsl(29, 43%, 79%)

HSB

hsb(29, 21%, 88%)

CMYK

cmyk(0%, 11%, 21%, 12%)

Oklch

oklch(84.7% 0.041 66.0)

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

#BCC7A5

Willow Green · Silver · Apple Green

HEX

#BCC7A5

RGB

rgb(188, 199, 165)

HSL

hsl(79, 23%, 71%)

HSB

hsb(79, 17%, 78%)

CMYK

cmyk(6%, 0%, 17%, 22%)

Oklch

oklch(81.2% 0.048 122.0)

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

#84C2A9

Jade · DarkSeaGreen · Apple Green

HEX

#84C2A9

RGB

rgb(132, 194, 169)

HSL

hsl(156, 34%, 64%)

HSB

hsb(156, 32%, 76%)

CMYK

cmyk(32%, 0%, 13%, 24%)

Oklch

oklch(76.5% 0.073 167.3)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#58A1A6

Slate Blue · CadetBlue · Mint Ice

HEX

#58A1A6

RGB

rgb(88, 161, 166)

HSL

hsl(184, 31%, 50%)

HSB

hsb(184, 47%, 65%)

CMYK

cmyk(47%, 3%, 0%, 35%)

Oklch

oklch(66.4% 0.073 201.3)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#4E6580

Indigo · DimGray · Prussian Blue

HEX

#4E6580

RGB

rgb(78, 101, 128)

HSL

hsl(212, 24%, 40%)

HSB

hsb(212, 39%, 50%)

CMYK

cmyk(39%, 21%, 0%, 50%)

Oklch

oklch(49.9% 0.051 252.8)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E0C8B1

B2CAE0

Analogous

E0B2B3

E0C8B1

E0E0B2

Triadic

E0C8B1

B2E0C9

C9B2E0

Split-Comp.

E0C8B1

B2E0E0

B2B3E0

Tetradic

E0C8B1

B3E0B2

B2CAE0

E0B2E0

Contrast Matrix WCAG 2.1 Contrast

E0C8B1	BCC7A5	84C2A9	58A1A6	4E6580
—	1.1 Fail	1.3 Fail	1.8 Fail	3.7 AA Large
1.1 Fail	—	1.2 Fail	1.7 Fail	3.4 AA Large
1.3 Fail	1.2 Fail	—	1.5 Fail	2.9 Fail
1.8 Fail	1.7 Fail	1.5 Fail	—	2.0 Fail
3.7 AA Large	3.4 AA Large	2.9 Fail	2.0 Fail	—

White BG

1.6Fail

1.8Fail

2.0Fail

3.0Fail

6.0AA

Black BG

13.1AAA

11.9AAA

10.3AAA

7.1AAA

3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D5B7

C1C1AD

9F9FAF

7878A5

585879

Deuteranopia

D7D9B8

C0BFAF

9B97B1

736EA5

575578

Tritanopia

DFBBBC

BDB4B5

87B4B5

5CA4A4

4F7473

Achromatopsia

CDCDCD

C0C0C0

ADADAD

8C8C8C

616161

Shades & Tints Shades & Tints

#E0C8B1

Dark

Light

#BCC7A5

Dark

Light

#84C2A9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e0c8b1;
  --color-2: #bcc7a5;
  --color-3: #84c2a9;
  --color-4: #58a1a6;
  --color-5: #4e6580;
}

SCSS

$color-1: #e0c8b1;
$color-2: #bcc7a5;
$color-3: #84c2a9;
$color-4: #58a1a6;
$color-5: #4e6580;

TAILWIND

colors: {
  'brand-1': '#e0c8b1',
  'brand-2': '#bcc7a5',
  'brand-3': '#84c2a9',
  'brand-4': '#58a1a6',
  'brand-5': '#4e6580',
}

RGB Array

[224, 200, 177], [188, 199, 165], [132, 194, 169], [88, 161, 166], [78, 101, 128]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E0C8B1, #BCC7A5, #84C2A9, #58A1A6, #4E6580 is ideal for: corporate websites, product showcases, portfolios. 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: #e0c8b1; --color-2: #bcc7a5; --color-3: #84c2a9; --color-4: #58a1a6; --color-5: #4e6580. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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