#9CC8AD + #D94F71 + #E18E98 + #ECBFA0 + #EDE1D1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9CC8AD

Celadon · DarkGray · Apple Green

HEX

#9CC8AD

RGB

rgb(156, 200, 173)

HSL

hsl(143, 29%, 70%)

HSB

hsb(143, 22%, 78%)

CMYK

cmyk(22%, 0%, 13%, 22%)

Oklch

oklch(79.4% 0.060 157.8)

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

#D94F71

Vermilion · LightCoral · Passion Red

HEX

#D94F71

RGB

rgb(217, 79, 113)

HSL

hsl(345, 64%, 58%)

HSB

hsb(345, 64%, 85%)

CMYK

cmyk(0%, 64%, 48%, 15%)

Oklch

oklch(62.2% 0.174 8.7)

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

#E18E98

Peach Pink · LightCoral · Coral Red

HEX

#E18E98

RGB

rgb(225, 142, 152)

HSL

hsl(353, 58%, 72%)

HSB

hsb(353, 37%, 88%)

CMYK

cmyk(0%, 37%, 32%, 12%)

Oklch

oklch(73.4% 0.101 12.0)

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

#ECBFA0

Apricot · BurlyWood · Peach Orange

HEX

#ECBFA0

RGB

rgb(236, 191, 160)

HSL

hsl(24, 67%, 78%)

HSB

hsb(24, 32%, 93%)

CMYK

cmyk(0%, 19%, 32%, 7%)

Oklch

oklch(83.7% 0.067 56.2)

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

#EDE1D1

Goose Yellow · Bisque · Peach Orange

HEX

#EDE1D1

RGB

rgb(237, 225, 209)

HSL

hsl(34, 44%, 87%)

HSB

hsb(34, 12%, 93%)

CMYK

cmyk(0%, 5%, 12%, 7%)

Oklch

oklch(91.5% 0.025 75.3)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9CC8AD

C99CB8

Analogous

A1C99C

9CC8AD

9CC9C4

Triadic

9CC8AD

AD9CC9

C9AD9C

Split-Comp.

9CC8AD

C49CC9

C99CA1

Tetradic

9CC8AD

9CA1C9

C99CB8

C9C49C

Contrast Matrix WCAG 2.1 Contrast

9CC8AD	D94F71	E18E98	ECBFA0	EDE1D1
—	2.1 Fail	1.3 Fail	1.1 Fail	1.4 Fail
2.1 Fail	—	1.6 Fail	2.4 Fail	3.1 AA Large
1.3 Fail	1.6 Fail	—	1.5 Fail	1.9 Fail
1.1 Fail	2.4 Fail	1.5 Fail	—	1.3 Fail
1.4 Fail	3.1 AA Large	1.9 Fail	1.3 Fail	—

White BG

1.9Fail

4.0AA Large

2.5Fail

1.7Fail

1.3Fail

Black BG

11.3AAA

5.3AA

8.5AAA

12.5AAA

16.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFAFB4

9D9C69

BDBC96

D9D8A8

E8E8D5

Deuteranopia

ADA9B5

A5B067

C2C895

DBDFA9

E9E9D6

Tritanopia

9EB9BA

D26261

DD9493

EAADAF

ECD8D9

Achromatopsia

B8B8B8

7C7C7C

A8A8A8

C9C9C9

E3E3E3

Shades & Tints Shades & Tints

#9CC8AD

Dark

Light

#D94F71

Dark

Light

#E18E98

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9cc8ad;
  --color-2: #d94f71;
  --color-3: #e18e98;
  --color-4: #ecbfa0;
  --color-5: #ede1d1;
}

SCSS

$color-1: #9cc8ad;
$color-2: #d94f71;
$color-3: #e18e98;
$color-4: #ecbfa0;
$color-5: #ede1d1;

TAILWIND

colors: {
  'brand-1': '#9cc8ad',
  'brand-2': '#d94f71',
  'brand-3': '#e18e98',
  'brand-4': '#ecbfa0',
  'brand-5': '#ede1d1',
}

RGB Array

[156, 200, 173], [217, 79, 113], [225, 142, 152], [236, 191, 160], [237, 225, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9CC8AD, #D94F71, #E18E98, #ECBFA0, #EDE1D1 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: #9cc8ad; --color-2: #d94f71; --color-3: #e18e98; --color-4: #ecbfa0; --color-5: #ede1d1. 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