#9D8F9A + #D9A9C0 + #FAC8C8 + #FFE5DE + #D8E6D9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9D8F9A

Ash · DarkGray · Silver Sand

HEX

#9D8F9A

RGB

rgb(157, 143, 154)

HSL

hsl(313, 7%, 59%)

HSB

hsb(313, 9%, 62%)

CMYK

cmyk(0%, 9%, 2%, 38%)

Oklch

oklch(66.6% 0.023 333.0)

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

#D9A9C0

Rouge · Silver · Cherry Blossom

HEX

#D9A9C0

RGB

rgb(217, 169, 192)

HSL

hsl(331, 39%, 76%)

HSB

hsb(331, 22%, 85%)

CMYK

cmyk(0%, 22%, 12%, 15%)

Oklch

oklch(78.5% 0.064 348.3)

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

#FAC8C8

Peach Pink · Pink · Cherry Blossom

HEX

#FAC8C8

RGB

rgb(250, 200, 200)

HSL

hsl(0, 83%, 88%)

HSB

hsb(0, 20%, 98%)

CMYK

cmyk(0%, 20%, 20%, 2%)

Oklch

oklch(87.7% 0.057 18.3)

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

#FFE5DE

Peach Pink · Linen · Cherry Blossom

HEX

#FFE5DE

RGB

rgb(255, 229, 222)

HSL

hsl(13, 100%, 94%)

HSB

hsb(13, 13%, 100%)

CMYK

cmyk(0%, 10%, 13%, 0%)

Oklch

oklch(94.1% 0.030 35.5)

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

#D8E6D9

Celadon · LightGray · Mint Green

HEX

#D8E6D9

RGB

rgb(216, 230, 217)

HSL

hsl(124, 22%, 87%)

HSB

hsb(124, 6%, 90%)

CMYK

cmyk(6%, 0%, 6%, 10%)

Oklch

oklch(91.1% 0.023 147.4)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9D8F9A

8F9E92

Analogous

9A8F9E

9D8F9A

9E8F93

Triadic

9D8F9A

9B9E8F

8F9B9E

Split-Comp.

9D8F9A

939E8F

8F9E9A

Tetradic

9D8F9A

9E9A8F

8F9E92

8F939E

Contrast Matrix WCAG 2.1 Contrast

9D8F9A	D9A9C0	FAC8C8	FFE5DE	D8E6D9
—	1.5 Fail	2.1 Fail	2.6 Fail	2.4 Fail
1.5 Fail	—	1.4 Fail	1.7 Fail	1.6 Fail
2.1 Fail	1.4 Fail	—	1.2 Fail	1.1 Fail
2.6 Fail	1.7 Fail	1.2 Fail	—	1.1 Fail
2.4 Fail	1.6 Fail	1.1 Fail	1.1 Fail	—

White BG

3.1AA Large

2.0Fail

1.5Fail

1.2Fail

1.3Fail

Black BG

6.8AA

10.4AAA

14.2AAA

17.5AAA

16.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

979797

C4C4BA

E4E4C8

F4F4E0

DEDEDC

Deuteranopia

989997

C7CBB9

E7EBC8

F5F7E0

DDDCDD

Tritanopia

9C9595

D7B6B5

F8C8C8

FEE1E1

D9DFDF

Achromatopsia

949494

BABABA

D7D7D7

ECECEC

E0E0E0

Shades & Tints Shades & Tints

#9D8F9A

Dark

Light

#D9A9C0

Dark

Light

#FAC8C8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9d8f9a;
  --color-2: #d9a9c0;
  --color-3: #fac8c8;
  --color-4: #ffe5de;
  --color-5: #d8e6d9;
}

SCSS

$color-1: #9d8f9a;
$color-2: #d9a9c0;
$color-3: #fac8c8;
$color-4: #ffe5de;
$color-5: #d8e6d9;

TAILWIND

colors: {
  'brand-1': '#9d8f9a',
  'brand-2': '#d9a9c0',
  'brand-3': '#fac8c8',
  'brand-4': '#ffe5de',
  'brand-5': '#d8e6d9',
}

RGB Array

[157, 143, 154], [217, 169, 192], [250, 200, 200], [255, 229, 222], [216, 230, 217]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9D8F9A, #D9A9C0, #FAC8C8, #FFE5DE, #D8E6D9 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: #9d8f9a; --color-2: #d9a9c0; --color-3: #fac8c8; --color-4: #ffe5de; --color-5: #d8e6d9. 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