← Back to Editor

#D7EDE5 · #9DCCCA · #7D709C · #64456E · #2A172B

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#D7EDE5

Jade · Lavender · Mint Green

HEX
#D7EDE5
RGB
rgb(215, 237, 229)
HSL
hsl(158, 38%, 89%)
HSB
hsb(158, 9%, 93%)
CMYK
cmyk(9%, 0%, 3%, 7%)
Oklch
oklch(92.8% 0.026 171.9)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

#9DCCCA

Jade · LightSteelBlue · Lake Green

HEX
#9DCCCA
RGB
rgb(157, 204, 202)
HSL
hsl(177, 32%, 71%)
HSB
hsb(177, 23%, 80%)
CMYK
cmyk(23%, 0%, 1%, 20%)
Oklch
oklch(81.2% 0.049 193.0)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#7D709C

Deep Indigo · SlateGray · Navy Blue

HEX
#7D709C
RGB
rgb(125, 112, 156)
HSL
hsl(258, 18%, 53%)
HSB
hsb(258, 28%, 61%)
CMYK
cmyk(20%, 28%, 0%, 39%)
Oklch
oklch(57.4% 0.068 297.8)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#64456E

Dark Plum · DimGray · Eggplant

HEX
#64456E
RGB
rgb(100, 69, 110)
HSL
hsl(285, 23%, 35%)
HSB
hsb(285, 37%, 43%)
CMYK
cmyk(9%, 37%, 0%, 57%)
Oklch
oklch(44.1% 0.075 317.7)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#2A172B

Dark Plum · Black · Dark Purple

HEX
#2A172B
RGB
rgb(42, 23, 43)
HSL
hsl(297, 30%, 13%)
HSB
hsb(297, 47%, 17%)
CMYK
cmyk(2%, 47%, 0%, 83%)
Oklch
oklch(23.9% 0.046 325.1)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D7EDE5
EED8E0

Analogous

D8EEDB
D7EDE5
D8EBEE

Triadic

D7EDE5
E6D8EE
EEE6D8

Split-Comp.

D7EDE5
EED8EB
EEDBD8

Tetradic

D7EDE5
DBD8EE
EED8E0
EBEED8

Contrast Matrix WCAG 2.1 Contrast

D7EDE5
9DCCCA
7D709C
64456E
2A172B
—
1.4
Fail
3.7
AA Large
6.5
AA
13.6
AAA
1.4
Fail
—
2.6
Fail
4.6
AA
9.5
AAA
3.7
AA Large
2.6
Fail
—
1.8
Fail
3.7
AA Large
6.5
AA
4.6
AA
1.8
Fail
—
2.1
Fail
13.6
AAA
9.5
AAA
3.7
AA Large
2.1
Fail
—
White BG
1.2Fail
1.8Fail
4.5AA Large
8.0AAA
16.7AAA
Black BG
17.1AAA
11.9AAA
4.7AA
2.6Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E1E1E7
B1B2CA
777791
575664
222226

Deuteranopia

DFDEE7
AFABCB
78798F
585B62
232425

Tritanopia

D8E8E9
9FCBCB
7C8987
625C5B
292222

Achromatopsia

E6E6E6
BEBEBE
797979
535353
1F1F1F

Shades & Tints Shades & Tints

#D7EDE5

Dark
Light

#9DCCCA

Dark
Light

#7D709C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d7ede5;
  --color-2: #9dccca;
  --color-3: #7d709c;
  --color-4: #64456e;
  --color-5: #2a172b;
}

SCSS

$color-1: #d7ede5;
$color-2: #9dccca;
$color-3: #7d709c;
$color-4: #64456e;
$color-5: #2a172b;

TAILWIND

colors: {
  'brand-1': '#d7ede5',
  'brand-2': '#9dccca',
  'brand-3': '#7d709c',
  'brand-4': '#64456e',
  'brand-5': '#2a172b',
}

RGB Array

[215, 237, 229], [157, 204, 202], [125, 112, 156], [100, 69, 110], [42, 23, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D7EDE5, #9DCCCA, #7D709C, #64456E, #2A172B is ideal for: brand design, premium product pages, magazine layouts, 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: #d7ede5; --color-2: #9dccca; --color-3: #7d709c; --color-4: #64456e; --color-5: #2a172b. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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 tech, SaaS, healthcare, eco 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