← Back to Editor

#E3EDEC · #ECD9D9 · #9CB4B8 · #8B9F9E · #97617B

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#E3EDEC

Jade · Lavender · Glacier Blue

HEX
#E3EDEC
RGB
rgb(227, 237, 236)
HSL
hsl(174, 22%, 91%)
HSB
hsb(174, 4%, 93%)
CMYK
cmyk(4%, 0%, 0%, 7%)
Oklch
oklch(93.8% 0.011 189.8)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#ECD9D9

Peach Pink · LightGray · Cherry Blossom

HEX
#ECD9D9
RGB
rgb(236, 217, 217)
HSL
hsl(0, 33%, 89%)
HSB
hsb(0, 8%, 93%)
CMYK
cmyk(0%, 8%, 8%, 7%)
Oklch
oklch(90.1% 0.021 17.5)

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

#9CB4B8

Sky Blue · DarkGray · Lake Green

HEX
#9CB4B8
RGB
rgb(156, 180, 184)
HSL
hsl(189, 16%, 67%)
HSB
hsb(189, 15%, 72%)
CMYK
cmyk(15%, 2%, 0%, 28%)
Oklch
oklch(75.3% 0.027 208.7)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#8B9F9E

Mineral Blue · LightSlateGray · Silver Sand

HEX
#8B9F9E
RGB
rgb(139, 159, 158)
HSL
hsl(177, 9%, 58%)
HSB
hsb(177, 13%, 62%)
CMYK
cmyk(13%, 0%, 1%, 38%)
Oklch
oklch(68.7% 0.023 193.0)

Traditional「Mineral Blue」· Paint「Silver Sand」· Creative Urban Concrete

#97617B

Dark Violet · Gray · Camellia

HEX
#97617B
RGB
rgb(151, 97, 123)
HSL
hsl(331, 22%, 49%)
HSB
hsb(331, 36%, 59%)
CMYK
cmyk(0%, 36%, 19%, 41%)
Oklch
oklch(55.9% 0.078 349.6)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E3EDEC
EDE3E4

Analogous

E3EDE7
E3EDEC
E3E9ED

Triadic

E3EDEC
ECE3ED
EDECE3

Split-Comp.

E3EDEC
EDE3E9
EDE7E3

Tetradic

E3EDEC
E7E3ED
EDE3E4
E9EDE3

Contrast Matrix WCAG 2.1 Contrast

E3EDEC
ECD9D9
9CB4B8
8B9F9E
97617B
—
1.1
Fail
1.8
Fail
2.3
Fail
4.1
AA Large
1.1
Fail
—
1.6
Fail
2.1
Fail
3.6
AA Large
1.8
Fail
1.6
Fail
—
1.3
Fail
2.2
Fail
2.3
Fail
2.1
Fail
1.3
Fail
—
1.8
Fail
4.1
AA Large
3.6
AA Large
2.2
Fail
1.8
Fail
—
White BG
1.2Fail
1.4Fail
2.2Fail
2.8Fail
4.9AA
Black BG
17.6AAA
15.5AAA
9.6AAA
7.6AAA
4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E7EC
E4E4D9
A6A7B7
94949E
807F75

Deuteranopia

E7E6EC
E5E6D9
A5A3B7
93919E
838773

Tritanopia

E3ECEC
EBD9D9
9DB6B6
8C9E9E
94706F

Achromatopsia

EAEAEA
DFDFDF
ADADAD
999999
747474

Shades & Tints Shades & Tints

#E3EDEC

Dark
Light

#ECD9D9

Dark
Light

#9CB4B8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e3edec;
  --color-2: #ecd9d9;
  --color-3: #9cb4b8;
  --color-4: #8b9f9e;
  --color-5: #97617b;
}

SCSS

$color-1: #e3edec;
$color-2: #ecd9d9;
$color-3: #9cb4b8;
$color-4: #8b9f9e;
$color-5: #97617b;

TAILWIND

colors: {
  'brand-1': '#e3edec',
  'brand-2': '#ecd9d9',
  'brand-3': '#9cb4b8',
  'brand-4': '#8b9f9e',
  'brand-5': '#97617b',
}

RGB Array

[227, 237, 236], [236, 217, 217], [156, 180, 184], [139, 159, 158], [151, 97, 123]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E3EDEC, #ECD9D9, #9CB4B8, #8B9F9E, #97617B is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #e3edec; --color-2: #ecd9d9; --color-3: #9cb4b8; --color-4: #8b9f9e; --color-5: #97617b. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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