← Back to Editor

#D3E6DE · #B4B7BF · #846E8F · #523657 · #5E5E5C

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

#D3E6DE

Jade · LightGray · Mint Green

HEX
#D3E6DE
RGB
rgb(211, 230, 222)
HSL
hsl(155, 28%, 86%)
HSB
hsb(155, 8%, 90%)
CMYK
cmyk(8%, 0%, 3%, 10%)
Oklch
oklch(90.9% 0.023 168.7)

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

#B4B7BF

Azure · Silver · Pearl Gray

HEX
#B4B7BF
RGB
rgb(180, 183, 191)
HSL
hsl(224, 8%, 73%)
HSB
hsb(224, 6%, 75%)
CMYK
cmyk(6%, 4%, 0%, 25%)
Oklch
oklch(77.9% 0.012 269.5)

Traditional「Azure」· Paint「Pearl Gray」· Creative Silver Lining

#846E8F

Dark Plum · Gray · Violet

HEX
#846E8F
RGB
rgb(132, 110, 143)
HSL
hsl(280, 13%, 50%)
HSB
hsb(280, 23%, 56%)
CMYK
cmyk(8%, 23%, 0%, 44%)
Oklch
oklch(57.1% 0.056 314.3)

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

#523657

Dark Plum · DarkSlateGray · Eggplant

HEX
#523657
RGB
rgb(82, 54, 87)
HSL
hsl(291, 23%, 28%)
HSB
hsb(291, 38%, 34%)
CMYK
cmyk(6%, 38%, 0%, 66%)
Oklch
oklch(37.9% 0.065 321.3)

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

#5E5E5C

Ink Gray · DimGray · Charcoal

HEX
#5E5E5C
RGB
rgb(94, 94, 92)
HSL
hsl(60, 1%, 36%)
HSB
hsb(60, 2%, 37%)
CMYK
cmyk(0%, 0%, 2%, 63%)
Oklch
oklch(48.1% 0.003 106.5)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D3E6DE
E5D1DA

Analogous

D1E5D3
D3E6DE
D1E4E5

Triadic

D3E6DE
DDD1E5
E5DDD1

Split-Comp.

D3E6DE
E5D1E4
E5D3D1

Tetradic

D3E6DE
D3D1E5
E5D1DA
E4E5D1

Contrast Matrix WCAG 2.1 Contrast

D3E6DE
B4B7BF
846E8F
523657
5E5E5C
—
1.5
Fail
3.5
AA Large
8.0
AAA
5.0
AA
1.5
Fail
—
2.3
Fail
5.2
AA
3.2
AA Large
3.5
AA Large
2.3
Fail
—
2.3
Fail
1.4
Fail
8.0
AAA
5.2
AA
2.3
Fail
—
1.6
Fail
5.0
AA
3.2
AA Large
1.4
Fail
1.6
Fail
—
White BG
1.3Fail
2.0Fail
4.6AA
10.4AAA
6.5AA
Black BG
16.1AAA
10.5AAA
4.6AA
2.0Fail
3.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDBE0
B5B5BD
7A7A87
46464F
5E5E5C

Deuteranopia

DAD9E0
B5B5BD
7C7D85
484A4D
5E5E5D

Tritanopia

D4E1E2
B4BCBB
83817F
514947
5E5D5D

Achromatopsia

DFDFDF
B7B7B7
787878
424242
5E5E5E

Shades & Tints Shades & Tints

#D3E6DE

Dark
Light

#B4B7BF

Dark
Light

#846E8F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d3e6de;
  --color-2: #b4b7bf;
  --color-3: #846e8f;
  --color-4: #523657;
  --color-5: #5e5e5c;
}

SCSS

$color-1: #d3e6de;
$color-2: #b4b7bf;
$color-3: #846e8f;
$color-4: #523657;
$color-5: #5e5e5c;

TAILWIND

colors: {
  'brand-1': '#d3e6de',
  'brand-2': '#b4b7bf',
  'brand-3': '#846e8f',
  'brand-4': '#523657',
  'brand-5': '#5e5e5c',
}

RGB Array

[211, 230, 222], [180, 183, 191], [132, 110, 143], [82, 54, 87], [94, 94, 92]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D3E6DE, #B4B7BF, #846E8F, #523657, #5E5E5C 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: #d3e6de; --color-2: #b4b7bf; --color-3: #846e8f; --color-4: #523657; --color-5: #5e5e5c. 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