← Back to Editor

#CCE3E0 · #C8D1BE · #DEA4BB · #AB87A4 · #9B7E8A

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

#CCE3E0

Jade · LightGray · Glacier Blue

HEX
#CCE3E0
RGB
rgb(204, 227, 224)
HSL
hsl(172, 29%, 85%)
HSB
hsb(172, 10%, 89%)
CMYK
cmyk(10%, 0%, 1%, 11%)
Oklch
oklch(89.8% 0.025 187.3)

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

#C8D1BE

Willow Green · Silver · Apple Green

HEX
#C8D1BE
RGB
rgb(200, 209, 190)
HSL
hsl(88, 17%, 78%)
HSB
hsb(88, 9%, 82%)
CMYK
cmyk(4%, 0%, 9%, 18%)
Oklch
oklch(84.8% 0.028 127.8)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#DEA4BB

Rouge · LightPink · Cherry Blossom

HEX
#DEA4BB
RGB
rgb(222, 164, 187)
HSL
hsl(336, 47%, 76%)
HSB
hsb(336, 26%, 87%)
CMYK
cmyk(0%, 26%, 16%, 13%)
Oklch
oklch(78.0% 0.074 353.4)

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

#AB87A4

Rose Purple · DarkGray · Violet

HEX
#AB87A4
RGB
rgb(171, 135, 164)
HSL
hsl(312, 18%, 60%)
HSB
hsb(312, 21%, 67%)
CMYK
cmyk(0%, 21%, 4%, 33%)
Oklch
oklch(66.7% 0.059 333.0)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#9B7E8A

Dark Violet · Gray · Rose Pink

HEX
#9B7E8A
RGB
rgb(155, 126, 138)
HSL
hsl(335, 13%, 55%)
HSB
hsb(335, 19%, 61%)
CMYK
cmyk(0%, 19%, 11%, 39%)
Oklch
oklch(62.4% 0.039 351.5)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCE3E0
E4CED1

Analogous

CEE4D6
CCE3E0
CEDCE4

Triadic

CCE3E0
E1CEE4
E4E1CE

Split-Comp.

CCE3E0
E4CEDC
E4D6CE

Tetradic

CCE3E0
D6CEE4
E4CED1
DCE4CE

Contrast Matrix WCAG 2.1 Contrast

CCE3E0
C8D1BE
DEA4BB
AB87A4
9B7E8A
—
1.2
Fail
1.5
Fail
2.3
Fail
2.7
Fail
1.2
Fail
—
1.3
Fail
2.0
Fail
2.3
Fail
1.5
Fail
1.3
Fail
—
1.5
Fail
1.8
Fail
2.3
Fail
2.0
Fail
1.5
Fail
—
1.2
Fail
2.7
Fail
2.3
Fail
1.8
Fail
1.2
Fail
—
White BG
1.3Fail
1.6Fail
2.1Fail
3.1AA Large
3.7AA Large
Black BG
15.6AAA
13.3AAA
10.1AAA
6.7AA
5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D6E1
CCCCC3
C5C4B5
9B9B9D
8E8E87

Deuteranopia

D5D3E1
CBCBC4
C8CDB4
9EA09B
909286

Tritanopia

CDE1E1
C8C6C7
DBB1B0
A99796
9A8584

Achromatopsia

DCDCDC
CCCCCC
B8B8B8
959595
888888

Shades & Tints Shades & Tints

#CCE3E0

Dark
Light

#C8D1BE

Dark
Light

#DEA4BB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cce3e0;
  --color-2: #c8d1be;
  --color-3: #dea4bb;
  --color-4: #ab87a4;
  --color-5: #9b7e8a;
}

SCSS

$color-1: #cce3e0;
$color-2: #c8d1be;
$color-3: #dea4bb;
$color-4: #ab87a4;
$color-5: #9b7e8a;

TAILWIND

colors: {
  'brand-1': '#cce3e0',
  'brand-2': '#c8d1be',
  'brand-3': '#dea4bb',
  'brand-4': '#ab87a4',
  'brand-5': '#9b7e8a',
}

RGB Array

[204, 227, 224], [200, 209, 190], [222, 164, 187], [171, 135, 164], [155, 126, 138]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCE3E0, #C8D1BE, #DEA4BB, #AB87A4, #9B7E8A 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: #cce3e0; --color-2: #c8d1be; --color-3: #dea4bb; --color-4: #ab87a4; --color-5: #9b7e8a. 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