#5A4B60 + #7C9A8E + #BDB37E + #EA988A + #EC7183 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#5A4B60

Dark Plum · DimGray · Eggplant

HEX

#5A4B60

RGB

rgb(90, 75, 96)

HSL

hsl(283, 12%, 34%)

HSB

hsb(283, 22%, 38%)

CMYK

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

Oklch

oklch(43.6% 0.039 316.3)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#7C9A8E

Mineral Blue · LightSlateGray · Olive Green

HEX

#7C9A8E

RGB

rgb(124, 154, 142)

HSL

hsl(156, 13%, 55%)

HSB

hsb(156, 19%, 60%)

CMYK

cmyk(19%, 0%, 8%, 40%)

Oklch

oklch(66.0% 0.038 168.9)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#BDB37E

Fresh Green · Tan · Sunflower

HEX

#BDB37E

RGB

rgb(189, 179, 126)

HSL

hsl(50, 32%, 62%)

HSB

hsb(50, 33%, 74%)

CMYK

cmyk(0%, 5%, 33%, 26%)

Oklch

oklch(76.2% 0.072 98.8)

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

#EA988A

Peach Pink · DarkSalmon · Coral Red

HEX

#EA988A

RGB

rgb(234, 152, 138)

HSL

hsl(9, 70%, 73%)

HSB

hsb(9, 41%, 92%)

CMYK

cmyk(0%, 35%, 41%, 8%)

Oklch

oklch(75.9% 0.102 30.2)

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

#EC7183

Peach Pink · LightCoral · Coral Red

HEX

#EC7183

RGB

rgb(236, 113, 131)

HSL

hsl(351, 76%, 68%)

HSB

hsb(351, 52%, 93%)

CMYK

cmyk(0%, 52%, 44%, 7%)

Oklch

oklch(69.8% 0.152 12.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5A4B60

52614C

Analogous

514C61

5A4B60

614C5D

Triadic

5A4B60

615B4C

4C615B

Split-Comp.

5A4B60

5D614C

4C6151

Tetradic

5A4B60

61514C

52614C

4C5D61

Contrast Matrix WCAG 2.1 Contrast

5A4B60	7C9A8E	BDB37E	EA988A	EC7183
—	2.6 Fail	3.8 AA Large	3.6 AA Large	2.8 Fail
2.6 Fail	—	1.4 Fail	1.4 Fail	1.1 Fail
3.8 AA Large	1.4 Fail	—	1.1 Fail	1.4 Fail
3.6 AA Large	1.4 Fail	1.1 Fail	—	1.3 Fail
2.8 Fail	1.1 Fail	1.4 Fail	1.3 Fail	—

White BG

8.0AAA

3.1AA Large

2.1Fail

2.2Fail

2.9Fail

Black BG

2.6Fail

6.9AA

9.9AAA

9.4AAA

7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

54535B

898991

B9B98B

C6C68D

B7B67F

Deuteranopia

54565A

878592

B9BA8E

CBD18E

BEC77E

Tritanopia

595756

7E9394

BC9597

E69091

E67B7A

Achromatopsia

525252

909090

B0B0B0

AFAFAF

989898

Shades & Tints Shades & Tints

#5A4B60

Dark

Light

#7C9A8E

Dark

Light

#BDB37E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5a4b60;
  --color-2: #7c9a8e;
  --color-3: #bdb37e;
  --color-4: #ea988a;
  --color-5: #ec7183;
}

SCSS

$color-1: #5a4b60;
$color-2: #7c9a8e;
$color-3: #bdb37e;
$color-4: #ea988a;
$color-5: #ec7183;

TAILWIND

colors: {
  'brand-1': '#5a4b60',
  'brand-2': '#7c9a8e',
  'brand-3': '#bdb37e',
  'brand-4': '#ea988a',
  'brand-5': '#ec7183',
}

RGB Array

[90, 75, 96], [124, 154, 142], [189, 179, 126], [234, 152, 138], [236, 113, 131]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5A4B60, #7C9A8E, #BDB37E, #EA988A, #EC7183 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: #5a4b60; --color-2: #7c9a8e; --color-3: #bdb37e; --color-4: #ea988a; --color-5: #ec7183. 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