← Back to Editor

#D8E6DE · #BFC7D4 · #AAACCF · #9B8ABD · #8F7A7F

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D8E6DE

Celadon · LightGray · Mint Green

HEX
#D8E6DE
RGB
rgb(216, 230, 222)
HSL
hsl(146, 22%, 87%)
HSB
hsb(146, 6%, 90%)
CMYK
cmyk(6%, 0%, 3%, 10%)
Oklch
oklch(91.2% 0.018 161.1)

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

#BFC7D4

Azure · LightSteelBlue · Cobalt Blue

HEX
#BFC7D4
RGB
rgb(191, 199, 212)
HSL
hsl(217, 20%, 79%)
HSB
hsb(217, 10%, 83%)
CMYK
cmyk(10%, 6%, 0%, 17%)
Oklch
oklch(82.7% 0.020 260.2)

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

#AAACCF

Azure · LightSteelBlue · Cobalt Blue

HEX
#AAACCF
RGB
rgb(170, 172, 207)
HSL
hsl(237, 28%, 74%)
HSB
hsb(237, 18%, 81%)
CMYK
cmyk(18%, 17%, 0%, 19%)
Oklch
oklch(75.5% 0.050 282.5)

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

#9B8ABD

Wisteria · DarkGray · Lilac Purple

HEX
#9B8ABD
RGB
rgb(155, 138, 189)
HSL
hsl(260, 28%, 64%)
HSB
hsb(260, 27%, 74%)
CMYK
cmyk(18%, 27%, 0%, 26%)
Oklch
oklch(66.7% 0.077 299.6)

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

#8F7A7F

Crimson · Gray · Warm Gray

HEX
#8F7A7F
RGB
rgb(143, 122, 127)
HSL
hsl(346, 9%, 52%)
HSB
hsb(346, 15%, 56%)
CMYK
cmyk(0%, 15%, 11%, 44%)
Oklch
oklch(60.1% 0.027 1.9)

Traditional「Crimson」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8E6DE
E5D7DF

Analogous

D8E5D7
D8E6DE
D7E5E4

Triadic

D8E6DE
DDD7E5
E5DDD7

Split-Comp.

D8E6DE
E4D7E5
E5D7D8

Tetradic

D8E6DE
D7D8E5
E5D7DF
E5E4D7

Contrast Matrix WCAG 2.1 Contrast

D8E6DE
BFC7D4
AAACCF
9B8ABD
8F7A7F
—
1.3
Fail
1.7
Fail
2.4
Fail
3.1
AA Large
1.3
Fail
—
1.3
Fail
1.8
Fail
2.3
Fail
1.7
Fail
1.3
Fail
—
1.4
Fail
1.8
Fail
2.4
Fail
1.8
Fail
1.4
Fail
—
1.3
Fail
3.1
AA Large
2.3
Fail
1.8
Fail
1.3
Fail
—
White BG
1.3Fail
1.7Fail
2.2Fail
3.1AA Large
4.0AA Large
Black BG
16.3AAA
12.3AAA
9.5AAA
6.8AA
5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DEDEE0
C2C3D1
ABABC7
9493B1
86867E

Deuteranopia

DDDCE0
C2C1D0
ABABC4
9596AE
87897E

Tritanopia

D9E1E2
BFCECE
AAC0BE
9AA7A5
8E7D7D

Achromatopsia

E1E1E1
C6C6C6
AFAFAF
959595
818181

Shades & Tints Shades & Tints

#D8E6DE

Dark
Light

#BFC7D4

Dark
Light

#AAACCF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8e6de;
  --color-2: #bfc7d4;
  --color-3: #aaaccf;
  --color-4: #9b8abd;
  --color-5: #8f7a7f;
}

SCSS

$color-1: #d8e6de;
$color-2: #bfc7d4;
$color-3: #aaaccf;
$color-4: #9b8abd;
$color-5: #8f7a7f;

TAILWIND

colors: {
  'brand-1': '#d8e6de',
  'brand-2': '#bfc7d4',
  'brand-3': '#aaaccf',
  'brand-4': '#9b8abd',
  'brand-5': '#8f7a7f',
}

RGB Array

[216, 230, 222], [191, 199, 212], [170, 172, 207], [155, 138, 189], [143, 122, 127]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D8E6DE, #BFC7D4, #AAACCF, #9B8ABD, #8F7A7F is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. 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: #d8e6de; --color-2: #bfc7d4; --color-3: #aaaccf; --color-4: #9b8abd; --color-5: #8f7a7f. 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 beauty, lifestyle, arts 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