#8D9598 + #9FB0CA + #ECA4B8 + #F4B3AD + #DCBEBC - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8D9598

Ash · LightSlateGray · Silver Sand

HEX

#8D9598

RGB

rgb(141, 149, 152)

HSL

hsl(196, 5%, 57%)

HSB

hsb(196, 7%, 60%)

CMYK

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

Oklch

oklch(66.4% 0.010 222.1)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#9FB0CA

Azure · LightSteelBlue · Cobalt Blue

HEX

#9FB0CA

RGB

rgb(159, 176, 202)

HSL

hsl(216, 29%, 71%)

HSB

hsb(216, 21%, 79%)

CMYK

cmyk(21%, 13%, 0%, 21%)

Oklch

oklch(75.3% 0.042 258.8)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#ECA4B8

Rouge · LightPink · Cherry Blossom

HEX

#ECA4B8

RGB

rgb(236, 164, 184)

HSL

hsl(343, 65%, 78%)

HSB

hsb(343, 31%, 93%)

CMYK

cmyk(0%, 31%, 22%, 7%)

Oklch

oklch(79.3% 0.088 1.1)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#F4B3AD

Peach Pink · LightPink · Cherry Blossom

HEX

#F4B3AD

RGB

rgb(244, 179, 173)

HSL

hsl(5, 76%, 82%)

HSB

hsb(5, 29%, 96%)

CMYK

cmyk(0%, 27%, 29%, 4%)

Oklch

oklch(82.5% 0.077 24.8)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#DCBEBC

Peach Pink · Silver · Coral Red

HEX

#DCBEBC

RGB

rgb(220, 190, 188)

HSL

hsl(4, 31%, 80%)

HSB

hsb(4, 15%, 86%)

CMYK

cmyk(0%, 14%, 15%, 14%)

Oklch

oklch(82.7% 0.034 22.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8D9598

978F8C

Analogous

8C9794

8D9598

8C8E97

Triadic

8D9598

978C94

94978C

Split-Comp.

8D9598

978C8E

97948C

Tetradic

8D9598

948C97

978F8C

8E978C

Contrast Matrix WCAG 2.1 Contrast

8D9598	9FB0CA	ECA4B8	F4B3AD	DCBEBC
—	1.4 Fail	1.5 Fail	1.7 Fail	1.8 Fail
1.4 Fail	—	1.1 Fail	1.2 Fail	1.3 Fail
1.5 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
1.7 Fail	1.2 Fail	1.1 Fail	—	1.0 Fail
1.8 Fail	1.3 Fail	1.1 Fail	1.0 Fail	—

White BG

3.1AA Large

2.2Fail

2.0Fail

1.8Fail

1.7Fail

Black BG

6.9AA

9.5AAA

10.6AAA

11.9AAA

12.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

909197

A6A7C4

CDCCB3

D8D7AE

CFCFBC

Deuteranopia

908F97

A5A4C2

D1D6B2

DCE0AF

D1D3BD

Tritanopia

8D9797

A0BFBE

E8AFAF

F1B0B0

DBBDBD

Achromatopsia

939393

AEAEAE

BCBCBC

C6C6C6

C7C7C7

Shades & Tints Shades & Tints

#8D9598

Dark

Light

#9FB0CA

Dark

Light

#ECA4B8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8d9598;
  --color-2: #9fb0ca;
  --color-3: #eca4b8;
  --color-4: #f4b3ad;
  --color-5: #dcbebc;
}

SCSS

$color-1: #8d9598;
$color-2: #9fb0ca;
$color-3: #eca4b8;
$color-4: #f4b3ad;
$color-5: #dcbebc;

TAILWIND

colors: {
  'brand-1': '#8d9598',
  'brand-2': '#9fb0ca',
  'brand-3': '#eca4b8',
  'brand-4': '#f4b3ad',
  'brand-5': '#dcbebc',
}

RGB Array

[141, 149, 152], [159, 176, 202], [236, 164, 184], [244, 179, 173], [220, 190, 188]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8D9598, #9FB0CA, #ECA4B8, #F4B3AD, #DCBEBC 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: #8d9598; --color-2: #9fb0ca; --color-3: #eca4b8; --color-4: #f4b3ad; --color-5: #dcbebc. 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