← Back to Editor

#ECCCD5 · #ADB8DA · #B59888 · #896778 · #BB8AB3

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

#ECCCD5

Rouge · Pink · Cherry Blossom

HEX
#ECCCD5
RGB
rgb(236, 204, 213)
HSL
hsl(343, 46%, 86%)
HSB
hsb(343, 14%, 93%)
CMYK
cmyk(0%, 14%, 10%, 7%)
Oklch
oklch(87.5% 0.038 359.1)

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

#ADB8DA

Azure · LightSteelBlue · Cobalt Blue

HEX
#ADB8DA
RGB
rgb(173, 184, 218)
HSL
hsl(225, 38%, 77%)
HSB
hsb(225, 21%, 85%)
CMYK
cmyk(21%, 16%, 0%, 15%)
Oklch
oklch(78.5% 0.050 271.1)

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

#B59888

Apricot · DarkGray · Warm Sun

HEX
#B59888
RGB
rgb(181, 152, 136)
HSL
hsl(21, 23%, 62%)
HSB
hsb(21, 25%, 71%)
CMYK
cmyk(0%, 16%, 25%, 29%)
Oklch
oklch(70.1% 0.042 50.6)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#896778

Dark Violet · Gray · Camellia

HEX
#896778
RGB
rgb(137, 103, 120)
HSL
hsl(330, 14%, 47%)
HSB
hsb(330, 25%, 54%)
CMYK
cmyk(0%, 25%, 12%, 46%)
Oklch
oklch(55.3% 0.050 347.4)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#BB8AB3

Mauve · DarkGray · Lilac Purple

HEX
#BB8AB3
RGB
rgb(187, 138, 179)
HSL
hsl(310, 26%, 64%)
HSB
hsb(310, 26%, 73%)
CMYK
cmyk(0%, 26%, 4%, 27%)
Oklch
oklch(69.4% 0.081 332.2)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECCCD5
CBECE2

Analogous

ECCBE5
ECCCD5
ECD2CB

Triadic

ECCCD5
D4ECCB
CBD4EC

Split-Comp.

ECCCD5
CBECD2
CBE5EC

Tetradic

ECCCD5
E5ECCB
CBECE2
D2CBEC

Contrast Matrix WCAG 2.1 Contrast

ECCCD5
ADB8DA
B59888
896778
BB8AB3
—
1.3
Fail
1.8
Fail
3.3
AA Large
1.9
Fail
1.3
Fail
—
1.4
Fail
2.5
Fail
1.4
Fail
1.8
Fail
1.4
Fail
—
1.8
Fail
1.1
Fail
3.3
AA Large
2.5
Fail
1.8
Fail
—
1.7
Fail
1.9
Fail
1.4
Fail
1.1
Fail
1.7
Fail
—
White BG
1.5Fail
2.0Fail
2.7Fail
4.9AA
2.8Fail
Black BG
14.2AAA
10.6AAA
7.8AAA
4.3AA Large
7.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DEDED3
B2B2D2
A8A88C
7A7A74
A6A5A9

Deuteranopia

E0E2D2
B1B0D0
AAAC8D
7C7F73
A9ACA7

Tritanopia

EAD1D1
AECBCA
B48F90
877170
B9A1A0

Achromatopsia

D7D7D7
B9B9B9
9F9F9F
737373
9D9D9D

Shades & Tints Shades & Tints

#ECCCD5

Dark
Light

#ADB8DA

Dark
Light

#B59888

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecccd5;
  --color-2: #adb8da;
  --color-3: #b59888;
  --color-4: #896778;
  --color-5: #bb8ab3;
}

SCSS

$color-1: #ecccd5;
$color-2: #adb8da;
$color-3: #b59888;
$color-4: #896778;
$color-5: #bb8ab3;

TAILWIND

colors: {
  'brand-1': '#ecccd5',
  'brand-2': '#adb8da',
  'brand-3': '#b59888',
  'brand-4': '#896778',
  'brand-5': '#bb8ab3',
}

RGB Array

[236, 204, 213], [173, 184, 218], [181, 152, 136], [137, 103, 120], [187, 138, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ECCCD5, #ADB8DA, #B59888, #896778, #BB8AB3 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: #ecccd5; --color-2: #adb8da; --color-3: #b59888; --color-4: #896778; --color-5: #bb8ab3. 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