← Back to Editor

#E7DDE0 · #DAE4E4 · #BCDADD · #62ADA6 · #0E0C1A

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

#E7DDE0

Rouge · LightGray · Cherry Blossom

HEX
#E7DDE0
RGB
rgb(231, 221, 224)
HSL
hsl(342, 17%, 89%)
HSB
hsb(342, 4%, 91%)
CMYK
cmyk(0%, 4%, 3%, 9%)
Oklch
oklch(90.6% 0.012 357.0)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#DAE4E4

Sky Blue · LightGray · Glacier Blue

HEX
#DAE4E4
RGB
rgb(218, 228, 228)
HSL
hsl(180, 16%, 87%)
HSB
hsb(180, 4%, 89%)
CMYK
cmyk(4%, 0%, 0%, 11%)
Oklch
oklch(91.1% 0.011 197.0)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#BCDADD

Sky Blue · LightBlue · Glacier Blue

HEX
#BCDADD
RGB
rgb(188, 218, 221)
HSL
hsl(185, 33%, 80%)
HSB
hsb(185, 15%, 87%)
CMYK
cmyk(15%, 1%, 0%, 13%)
Oklch
oklch(86.7% 0.032 204.0)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#62ADA6

Mineral Blue · CadetBlue · Lake Green

HEX
#62ADA6
RGB
rgb(98, 173, 166)
HSL
hsl(174, 31%, 53%)
HSB
hsb(174, 43%, 68%)
CMYK
cmyk(43%, 0%, 4%, 32%)
Oklch
oklch(69.7% 0.076 187.8)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#0E0C1A

Deep Indigo · Black · Deep Sea Blue

HEX
#0E0C1A
RGB
rgb(14, 12, 26)
HSL
hsl(249, 37%, 7%)
HSB
hsb(249, 54%, 10%)
CMYK
cmyk(46%, 54%, 0%, 90%)
Oklch
oklch(16.5% 0.029 289.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E7DDE0
DEE8E5

Analogous

E8DEE6
E7DDE0
E8E0DE

Triadic

E7DDE0
E1E8DE
DEE1E8

Split-Comp.

E7DDE0
DEE8E0
DEE6E8

Tetradic

E7DDE0
E6E8DE
DEE8E5
E0DEE8

Contrast Matrix WCAG 2.1 Contrast

E7DDE0
DAE4E4
BCDADD
62ADA6
0E0C1A
—
1.0
Fail
1.1
Fail
2.0
Fail
14.6
AAA
1.0
Fail
—
1.1
Fail
2.0
Fail
14.9
AAA
1.1
Fail
1.1
Fail
—
1.8
Fail
13.1
AAA
2.0
Fail
2.0
Fail
1.8
Fail
—
7.4
AAA
14.6
AAA
14.9
AAA
13.1
AAA
7.4
AAA
—
White BG
1.3Fail
1.3Fail
1.5Fail
2.6Fail
19.3AAA
Black BG
15.8AAA
16.2AAA
14.2AAA
8.0AAA
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E3DF
DEDEE4
C9C9DC
8283A8
0D0D17

Deuteranopia

E3E4DF
DEDDE4
C7C5DC
7E79A8
0D0D16

Tritanopia

E7DFDF
DBE4E4
BEDCDC
66A9A9
0E1413

Achromatopsia

E0E0E0
E1E1E1
D1D1D1
969696
0E0E0E

Shades & Tints Shades & Tints

#E7DDE0

Dark
Light

#DAE4E4

Dark
Light

#BCDADD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e7dde0;
  --color-2: #dae4e4;
  --color-3: #bcdadd;
  --color-4: #62ada6;
  --color-5: #0e0c1a;
}

SCSS

$color-1: #e7dde0;
$color-2: #dae4e4;
$color-3: #bcdadd;
$color-4: #62ada6;
$color-5: #0e0c1a;

TAILWIND

colors: {
  'brand-1': '#e7dde0',
  'brand-2': '#dae4e4',
  'brand-3': '#bcdadd',
  'brand-4': '#62ada6',
  'brand-5': '#0e0c1a',
}

RGB Array

[231, 221, 224], [218, 228, 228], [188, 218, 221], [98, 173, 166], [14, 12, 26]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E7DDE0, #DAE4E4, #BCDADD, #62ADA6, #0E0C1A 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: #e7dde0; --color-2: #dae4e4; --color-3: #bcdadd; --color-4: #62ada6; --color-5: #0e0c1a. 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