← Back to Editor

#D7E0DA · #B8E6D2 · #D2CCE3 · #DCB1FC · #A4AFAE

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D7E0DA

Celadon · LightGray · Mint Green

HEX
#D7E0DA
RGB
rgb(215, 224, 218)
HSL
hsl(140, 13%, 86%)
HSB
hsb(140, 4%, 88%)
CMYK
cmyk(4%, 0%, 3%, 12%)
Oklch
oklch(89.8% 0.013 157.0)

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

#B8E6D2

Jade · LightBlue · Mint Green

HEX
#B8E6D2
RGB
rgb(184, 230, 210)
HSL
hsl(154, 48%, 81%)
HSB
hsb(154, 20%, 90%)
CMYK
cmyk(20%, 0%, 9%, 10%)
Oklch
oklch(88.7% 0.055 166.8)

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

#D2CCE3

Wisteria · LightGray · Sky Blue

HEX
#D2CCE3
RGB
rgb(210, 204, 227)
HSL
hsl(256, 29%, 85%)
HSB
hsb(256, 10%, 89%)
CMYK
cmyk(7%, 10%, 0%, 11%)
Oklch
oklch(85.7% 0.032 297.6)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

#DCB1FC

Lilac · Violet · Lavender

HEX
#DCB1FC
RGB
rgb(220, 177, 252)
HSL
hsl(274, 93%, 84%)
HSB
hsb(274, 30%, 99%)
CMYK
cmyk(13%, 30%, 0%, 1%)
Oklch
oklch(82.4% 0.112 310.2)

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

#A4AFAE

Ash · DarkGray · Silver Sand

HEX
#A4AFAE
RGB
rgb(164, 175, 174)
HSL
hsl(175, 6%, 66%)
HSB
hsb(175, 6%, 69%)
CMYK
cmyk(6%, 0%, 1%, 31%)
Oklch
oklch(74.5% 0.012 190.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D7E0DA
E0D7DD

Analogous

D8E0D7
D7E0DA
D7E0DE

Triadic

D7E0DA
DAD7E0
E0DAD7

Split-Comp.

D7E0DA
DED7E0
E0D7D8

Tetradic

D7E0DA
D7D8E0
E0D7DD
E0DED7

Contrast Matrix WCAG 2.1 Contrast

D7E0DA
B8E6D2
D2CCE3
DCB1FC
A4AFAE
—
1.0
Fail
1.2
Fail
1.3
Fail
1.7
Fail
1.0
Fail
—
1.1
Fail
1.3
Fail
1.6
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.4
Fail
1.3
Fail
1.3
Fail
1.1
Fail
—
1.3
Fail
1.7
Fail
1.6
Fail
1.4
Fail
1.3
Fail
—
White BG
1.3Fail
1.4Fail
1.6Fail
1.8Fail
2.3Fail
Black BG
15.6AAA
15.3AAA
13.5AAA
11.7AAA
9.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDBDB
CCCCD7
CFCFDD
C9C9EA
A9A9AE

Deuteranopia

DADADC
C9C6D8
D0D0DC
CCCFE5
A8A7AE

Tritanopia

D7DDDD
BADBDC
D2D9D8
DADCD8
A5AEAE

Achromatopsia

DDDDDD
D6D6D6
D0D0D0
C6C6C6
ACACAC

Shades & Tints Shades & Tints

#D7E0DA

Dark
Light

#B8E6D2

Dark
Light

#D2CCE3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d7e0da;
  --color-2: #b8e6d2;
  --color-3: #d2cce3;
  --color-4: #dcb1fc;
  --color-5: #a4afae;
}

SCSS

$color-1: #d7e0da;
$color-2: #b8e6d2;
$color-3: #d2cce3;
$color-4: #dcb1fc;
$color-5: #a4afae;

TAILWIND

colors: {
  'brand-1': '#d7e0da',
  'brand-2': '#b8e6d2',
  'brand-3': '#d2cce3',
  'brand-4': '#dcb1fc',
  'brand-5': '#a4afae',
}

RGB Array

[215, 224, 218], [184, 230, 210], [210, 204, 227], [220, 177, 252], [164, 175, 174]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D7E0DA, #B8E6D2, #D2CCE3, #DCB1FC, #A4AFAE is ideal for: health products, baby brands, fresh-style blogs. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #d7e0da; --color-2: #b8e6d2; --color-3: #d2cce3; --color-4: #dcb1fc; --color-5: #a4afae. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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. 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