← Back to Editor

#D2CDD2 · #8A8BAC · #5E4F58 · #E9404B · #BBA696

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#D2CDD2

Silver Gray · LightGray · Pearl Gray

HEX
#D2CDD2
RGB
rgb(210, 205, 210)
HSL
hsl(300, 5%, 81%)
HSB
hsb(300, 2%, 82%)
CMYK
cmyk(0%, 2%, 0%, 18%)
Oklch
oklch(85.4% 0.009 325.7)

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

#8A8BAC

Azure · LightSlateGray · Cobalt Blue

HEX
#8A8BAC
RGB
rgb(138, 139, 172)
HSL
hsl(238, 17%, 61%)
HSB
hsb(238, 20%, 67%)
CMYK
cmyk(20%, 19%, 0%, 33%)
Oklch
oklch(64.8% 0.049 283.6)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#5E4F58

Rose Purple · DimGray · Charcoal

HEX
#5E4F58
RGB
rgb(94, 79, 88)
HSL
hsl(324, 9%, 34%)
HSB
hsb(324, 16%, 37%)
CMYK
cmyk(0%, 16%, 6%, 63%)
Oklch
oklch(44.6% 0.024 341.4)

Traditional「Rose Purple」· Paint「Charcoal」· Creative Midnight Shadow

#E9404B

Vermilion · Tomato · Passion Red

HEX
#E9404B
RGB
rgb(233, 64, 75)
HSL
hsl(356, 79%, 58%)
HSB
hsb(356, 73%, 91%)
CMYK
cmyk(0%, 73%, 68%, 9%)
Oklch
oklch(62.4% 0.205 22.1)

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

#BBA696

Apricot · DarkGray · Warm Sun

HEX
#BBA696
RGB
rgb(187, 166, 150)
HSL
hsl(26, 21%, 66%)
HSB
hsb(26, 20%, 73%)
CMYK
cmyk(0%, 11%, 20%, 27%)
Oklch
oklch(73.9% 0.033 59.5)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D2CDD2
CCD1CC

Analogous

CFCCD1
D2CDD2
D1CCCF

Triadic

D2CDD2
D1D1CC
CCD1D1

Split-Comp.

D2CDD2
CFD1CC
CCD1CF

Tetradic

D2CDD2
D1CFCC
CCD1CC
CCCFD1

Contrast Matrix WCAG 2.1 Contrast

D2CDD2
8A8BAC
5E4F58
E9404B
BBA696
—
2.1
Fail
4.9
AA
2.5
Fail
1.5
Fail
2.1
Fail
—
2.3
Fail
1.2
Fail
1.4
Fail
4.9
AA
2.3
Fail
—
1.9
Fail
3.3
AA Large
2.5
Fail
1.2
Fail
1.9
Fail
—
1.7
Fail
1.5
Fail
1.4
Fail
3.3
AA Large
1.7
Fail
—
White BG
1.6Fail
3.3AA Large
7.7AAA
4.0AA Large
2.3Fail
Black BG
13.4AAA
6.4AA
2.7Fail
5.3AA
9.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D0D0D1
8A8AA4
585756
A09E48
B2B29A

Deuteranopia

D0D1D1
8A8AA2
585A55
AAB648
B3B59B

Tritanopia

D2D0D0
8A9E9C
5D5454
E14646
BA9D9E

Achromatopsia

CFCFCF
8E8E8E
555555
747474
AAAAAA

Shades & Tints Shades & Tints

#D2CDD2

Dark
Light

#8A8BAC

Dark
Light

#5E4F58

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d2cdd2;
  --color-2: #8a8bac;
  --color-3: #5e4f58;
  --color-4: #e9404b;
  --color-5: #bba696;
}

SCSS

$color-1: #d2cdd2;
$color-2: #8a8bac;
$color-3: #5e4f58;
$color-4: #e9404b;
$color-5: #bba696;

TAILWIND

colors: {
  'brand-1': '#d2cdd2',
  'brand-2': '#8a8bac',
  'brand-3': '#5e4f58',
  'brand-4': '#e9404b',
  'brand-5': '#bba696',
}

RGB Array

[210, 205, 210], [138, 139, 172], [94, 79, 88], [233, 64, 75], [187, 166, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D2CDD2, #8A8BAC, #5E4F58, #E9404B, #BBA696 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: #d2cdd2; --color-2: #8a8bac; --color-3: #5e4f58; --color-4: #e9404b; --color-5: #bba696. 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