#8C9EA2 + #B7BDB3 + #E0C3B3 + #DD8B73 + #D4445B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8C9EA2

Slate Blue · LightSlateGray · Lake Green

HEX

#8C9EA2

RGB

rgb(140, 158, 162)

HSL

hsl(191, 11%, 59%)

HSB

hsb(191, 14%, 64%)

CMYK

cmyk(14%, 2%, 0%, 36%)

Oklch

oklch(68.6% 0.021 212.6)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#B7BDB3

Silver Gray · Silver · Pearl Gray

HEX

#B7BDB3

RGB

rgb(183, 189, 179)

HSL

hsl(96, 7%, 72%)

HSB

hsb(96, 5%, 74%)

CMYK

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

Oklch

oklch(79.1% 0.015 132.5)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#E0C3B3

Apricot · Wheat · Peach Orange

HEX

#E0C3B3

RGB

rgb(224, 195, 179)

HSL

hsl(21, 42%, 79%)

HSB

hsb(21, 20%, 88%)

CMYK

cmyk(0%, 13%, 20%, 12%)

Oklch

oklch(83.8% 0.040 50.7)

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

#DD8B73

Peach Pink · DarkSalmon · Coral Red

HEX

#DD8B73

RGB

rgb(221, 139, 115)

HSL

hsl(14, 61%, 66%)

HSB

hsb(14, 48%, 87%)

CMYK

cmyk(0%, 37%, 48%, 13%)

Oklch

oklch(71.6% 0.107 37.1)

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

#D4445B

Vermilion · Tomato · Passion Red

HEX

#D4445B

RGB

rgb(212, 68, 91)

HSL

hsl(350, 63%, 55%)

HSB

hsb(350, 68%, 83%)

CMYK

cmyk(0%, 68%, 57%, 17%)

Oklch

oklch(59.6% 0.180 15.3)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8C9EA2

A28F8B

Analogous

8BA29B

8C9EA2

8B92A2

Triadic

8C9EA2

A28B9E

9EA28B

Split-Comp.

8C9EA2

A28B92

A29B8B

Tetradic

8C9EA2

9B8BA2

A28F8B

92A28B

Contrast Matrix WCAG 2.1 Contrast

8C9EA2	B7BDB3	E0C3B3	DD8B73	D4445B
—	1.5 Fail	1.7 Fail	1.1 Fail	1.6 Fail
1.5 Fail	—	1.2 Fail	1.4 Fail	2.3 Fail
1.7 Fail	1.2 Fail	—	1.6 Fail	2.6 Fail
1.1 Fail	1.4 Fail	1.6 Fail	—	1.7 Fail
1.6 Fail	2.3 Fail	2.6 Fail	1.7 Fail	—

White BG

2.8Fail

1.9Fail

1.7Fail

2.6Fail

4.4AA Large

Black BG

7.5AAA

10.9AAA

12.6AAA

8.0AAA

4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9494A1

BABAB5

D3D3B7

B9B979

969455

Deuteranopia

9391A1

B9B9B6

D5D7B8

BEC47A

9EA954

Tritanopia

8DA0A0

B7B7B8

DFBABB

D97D7E

CD5150

Achromatopsia

999999

BABABA

CACACA

A1A1A1

727272

Shades & Tints Shades & Tints

#8C9EA2

Dark

Light

#B7BDB3

Dark

Light

#E0C3B3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8c9ea2;
  --color-2: #b7bdb3;
  --color-3: #e0c3b3;
  --color-4: #dd8b73;
  --color-5: #d4445b;
}

SCSS

$color-1: #8c9ea2;
$color-2: #b7bdb3;
$color-3: #e0c3b3;
$color-4: #dd8b73;
$color-5: #d4445b;

TAILWIND

colors: {
  'brand-1': '#8c9ea2',
  'brand-2': '#b7bdb3',
  'brand-3': '#e0c3b3',
  'brand-4': '#dd8b73',
  'brand-5': '#d4445b',
}

RGB Array

[140, 158, 162], [183, 189, 179], [224, 195, 179], [221, 139, 115], [212, 68, 91]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8C9EA2, #B7BDB3, #E0C3B3, #DD8B73, #D4445B 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: #8c9ea2; --color-2: #b7bdb3; --color-3: #e0c3b3; --color-4: #dd8b73; --color-5: #d4445b. 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