← Back to Editor

#E0E5DF · #2E3734 · #999D8E · #AEB4A8 · #C1C4BB

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

#E0E5DF

Celadon · LightGray · Mint Green

HEX
#E0E5DF
RGB
rgb(224, 229, 223)
HSL
hsl(110, 10%, 89%)
HSB
hsb(110, 3%, 90%)
CMYK
cmyk(2%, 0%, 3%, 10%)
Oklch
oklch(91.6% 0.010 140.5)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#2E3734

Mineral Blue · DarkSlateGray · Dark Stone

HEX
#2E3734
RGB
rgb(46, 55, 52)
HSL
hsl(160, 9%, 20%)
HSB
hsb(160, 16%, 22%)
CMYK
cmyk(16%, 0%, 5%, 78%)
Oklch
oklch(32.7% 0.013 173.4)

Traditional「Mineral Blue」· Paint「Dark Stone」· Creative Midnight Shadow

#999D8E

Ash · DarkSeaGreen · Silver Sand

HEX
#999D8E
RGB
rgb(153, 157, 142)
HSL
hsl(76, 7%, 59%)
HSB
hsb(76, 10%, 62%)
CMYK
cmyk(3%, 0%, 10%, 38%)
Oklch
oklch(68.8% 0.022 119.1)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#AEB4A8

Ash · DarkGray · Silver Sand

HEX
#AEB4A8
RGB
rgb(174, 180, 168)
HSL
hsl(90, 7%, 68%)
HSB
hsb(90, 7%, 71%)
CMYK
cmyk(3%, 0%, 7%, 29%)
Oklch
oklch(76.2% 0.018 128.7)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#C1C4BB

Silver Gray · Silver · Pearl Gray

HEX
#C1C4BB
RGB
rgb(193, 196, 187)
HSL
hsl(80, 7%, 75%)
HSB
hsb(80, 5%, 77%)
CMYK
cmyk(2%, 0%, 5%, 23%)
Oklch
oklch(81.5% 0.013 121.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E0E5DF
E5E0E6

Analogous

E4E6E0
E0E5DF
E0E6E2

Triadic

E0E5DF
E0E1E6
E6E0E1

Split-Comp.

E0E5DF
E2E0E6
E6E0E4

Tetradic

E0E5DF
E0E4E6
E5E0E6
E6E2E0

Contrast Matrix WCAG 2.1 Contrast

E0E5DF
2E3734
999D8E
AEB4A8
C1C4BB
—
9.6
AAA
2.2
Fail
1.7
Fail
1.4
Fail
9.6
AAA
—
4.4
AA Large
5.8
AA
6.9
AA
2.2
Fail
4.4
AA Large
—
1.3
Fail
1.6
Fail
1.7
Fail
5.8
AA
1.3
Fail
—
1.2
Fail
1.4
Fail
6.9
AA
1.6
Fail
1.2
Fail
—
White BG
1.3Fail
12.3AAA
2.8Fail
2.1Fail
1.8Fail
Black BG
16.4AAA
1.7Fail
7.6AAA
9.9AAA
11.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E2E0
323235
9B9B92
B1B1AB
C2C2BD

Deuteranopia

E2E2E1
313135
9B9A93
B0B0AC
C2C2BE

Tritanopia

E0E2E2
2E3535
999495
AEADAE
C1BFBF

Achromatopsia

E3E3E3
343434
9A9A9A
B1B1B1
C2C2C2

Shades & Tints Shades & Tints

#E0E5DF

Dark
Light

#2E3734

Dark
Light

#999D8E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e0e5df;
  --color-2: #2e3734;
  --color-3: #999d8e;
  --color-4: #aeb4a8;
  --color-5: #c1c4bb;
}

SCSS

$color-1: #e0e5df;
$color-2: #2e3734;
$color-3: #999d8e;
$color-4: #aeb4a8;
$color-5: #c1c4bb;

TAILWIND

colors: {
  'brand-1': '#e0e5df',
  'brand-2': '#2e3734',
  'brand-3': '#999d8e',
  'brand-4': '#aeb4a8',
  'brand-5': '#c1c4bb',
}

RGB Array

[224, 229, 223], [46, 55, 52], [153, 157, 142], [174, 180, 168], [193, 196, 187]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E0E5DF, #2E3734, #999D8E, #AEB4A8, #C1C4BB 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: #e0e5df; --color-2: #2e3734; --color-3: #999d8e; --color-4: #aeb4a8; --color-5: #c1c4bb. 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