← Back to Editor

#E2DCE6 · #CCC8CF · #B0A0BA · #705085 · #2C292E

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatile

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#E2DCE6

Lilac · Lavender · Lavender

HEX
#E2DCE6
RGB
rgb(226, 220, 230)
HSL
hsl(276, 17%, 88%)
HSB
hsb(276, 4%, 90%)
CMYK
cmyk(2%, 4%, 0%, 10%)
Oklch
oklch(90.2% 0.015 312.2)

Traditional「Lilac」· Paint「Lavender」· Creative Lavender Dream

#CCC8CF

Silver Gray · LightGray · Pearl Gray

HEX
#CCC8CF
RGB
rgb(204, 200, 207)
HSL
hsl(274, 7%, 80%)
HSB
hsb(274, 3%, 81%)
CMYK
cmyk(1%, 3%, 0%, 19%)
Oklch
oklch(83.8% 0.011 311.2)

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

#B0A0BA

Lilac · DarkGray · Lilac Purple

HEX
#B0A0BA
RGB
rgb(176, 160, 186)
HSL
hsl(277, 16%, 68%)
HSB
hsb(277, 14%, 73%)
CMYK
cmyk(5%, 14%, 0%, 27%)
Oklch
oklch(72.8% 0.041 312.6)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#705085

Dark Plum · DimGray · Violet

HEX
#705085
RGB
rgb(112, 80, 133)
HSL
hsl(276, 25%, 42%)
HSB
hsb(276, 40%, 52%)
CMYK
cmyk(16%, 40%, 0%, 48%)
Oklch
oklch(48.7% 0.090 311.1)

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

#2C292E

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#2C292E
RGB
rgb(44, 41, 46)
HSL
hsl(276, 6%, 17%)
HSB
hsb(276, 11%, 18%)
CMYK
cmyk(4%, 11%, 0%, 82%)
Oklch
oklch(28.6% 0.010 312.1)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E2DCE6
DFE6DB

Analogous

DCDBE6
E2DCE6
E6DBE5

Triadic

E2DCE6
E6E1DB
DBE6E1

Split-Comp.

E2DCE6
E5E6DB
DBE6DC

Tetradic

E2DCE6
E6DCDB
DFE6DB
DBE5E6

Contrast Matrix WCAG 2.1 Contrast

E2DCE6
CCC8CF
B0A0BA
705085
2C292E
—
1.2
Fail
1.8
Fail
4.9
AA
10.7
AAA
1.2
Fail
—
1.5
Fail
4.0
AA Large
8.7
AAA
1.8
Fail
1.5
Fail
—
2.7
Fail
5.9
AA
4.9
AA
4.0
AA Large
2.7
Fail
—
2.2
Fail
10.7
AAA
8.7
AAA
5.9
AA
2.2
Fail
—
White BG
1.3Fail
1.6Fail
2.4Fail
6.6AA
14.3AAA
Black BG
15.6AAA
12.7AAA
8.6AAA
3.2AA Large
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DFDFE4
CACACD
A9A9B4
626278
2B2B2D

Deuteranopia

E0E0E3
CBCBCD
AAABB2
646675
2B2B2C

Tritanopia

E2E2E1
CCCCCC
AFAFAE
6E6E6C
2C2C2C

Achromatopsia

DFDFDF
CACACA
A8A8A8
606060
2A2A2A

Shades & Tints Shades & Tints

#E2DCE6

Dark
Light

#CCC8CF

Dark
Light

#B0A0BA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e2dce6;
  --color-2: #ccc8cf;
  --color-3: #b0a0ba;
  --color-4: #705085;
  --color-5: #2c292e;
}

SCSS

$color-1: #e2dce6;
$color-2: #ccc8cf;
$color-3: #b0a0ba;
$color-4: #705085;
$color-5: #2c292e;

TAILWIND

colors: {
  'brand-1': '#e2dce6',
  'brand-2': '#ccc8cf',
  'brand-3': '#b0a0ba',
  'brand-4': '#705085',
  'brand-5': '#2c292e',
}

RGB Array

[226, 220, 230], [204, 200, 207], [176, 160, 186], [112, 80, 133], [44, 41, 46]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E2DCE6, #CCC8CF, #B0A0BA, #705085, #2C292E 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: #e2dce6; --color-2: #ccc8cf; --color-3: #b0a0ba; --color-4: #705085; --color-5: #2c292e. 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