← Back to Editor

#E4C2C7 · #CBC3C4 · #AFBAB8 · #8DA9AA · #424A4A

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

#E4C2C7

Peach Pink · LightGray · Cherry Blossom

HEX
#E4C2C7
RGB
rgb(228, 194, 199)
HSL
hsl(351, 39%, 83%)
HSB
hsb(351, 15%, 89%)
CMYK
cmyk(0%, 15%, 13%, 11%)
Oklch
oklch(84.5% 0.039 7.9)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#CBC3C4

Silver Gray · Silver · Pearl Gray

HEX
#CBC3C4
RGB
rgb(203, 195, 196)
HSL
hsl(352, 7%, 78%)
HSB
hsb(352, 4%, 80%)
CMYK
cmyk(0%, 4%, 3%, 20%)
Oklch
oklch(82.4% 0.009 8.6)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#AFBAB8

Silver Gray · Silver · Pearl Gray

HEX
#AFBAB8
RGB
rgb(175, 186, 184)
HSL
hsl(169, 7%, 71%)
HSB
hsb(169, 6%, 73%)
CMYK
cmyk(6%, 0%, 1%, 27%)
Oklch
oklch(78.0% 0.013 184.0)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#8DA9AA

Sky Blue · DarkGray · Lake Green

HEX
#8DA9AA
RGB
rgb(141, 169, 170)
HSL
hsl(182, 15%, 61%)
HSB
hsb(182, 17%, 67%)
CMYK
cmyk(17%, 1%, 0%, 33%)
Oklch
oklch(71.4% 0.031 199.1)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#424A4A

Dark Cyan · DarkSlateGray · Charcoal

HEX
#424A4A
RGB
rgb(66, 74, 74)
HSL
hsl(180, 6%, 27%)
HSB
hsb(180, 11%, 29%)
CMYK
cmyk(11%, 0%, 0%, 71%)
Oklch
oklch(40.2% 0.010 196.7)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E4C2C7
C3E5DF

Analogous

E5C3D9
E4C2C7
E5CFC3

Triadic

E4C2C7
C8E5C3
C3C8E5

Split-Comp.

E4C2C7
C3E5CF
C3D9E5

Tetradic

E4C2C7
D9E5C3
C3E5DF
CFC3E5

Contrast Matrix WCAG 2.1 Contrast

E4C2C7
CBC3C4
AFBAB8
8DA9AA
424A4A
—
1.1
Fail
1.2
Fail
1.5
Fail
5.6
AA
1.1
Fail
—
1.2
Fail
1.4
Fail
5.3
AA
1.2
Fail
1.2
Fail
—
1.3
Fail
4.6
AA
1.5
Fail
1.4
Fail
1.3
Fail
—
3.6
AA Large
5.6
AA
5.3
AA
4.6
AA
3.6
AA Large
—
White BG
1.6Fail
1.7Fail
2.0Fail
2.5Fail
9.1AAA
Black BG
12.8AAA
12.1AAA
10.5AAA
8.4AAA
2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D5D5C6
C8C7C4
B4B4B8
9999AA
45464A

Deuteranopia

D7DAC5
C8C9C4
B3B2B9
9895AA
45444A

Tritanopia

E2C5C5
CBC4C4
B0B9B9
8EAAAA
424A4A

Achromatopsia

CDCDCD
C6C6C6
B6B6B6
A1A1A1
484848

Shades & Tints Shades & Tints

#E4C2C7

Dark
Light

#CBC3C4

Dark
Light

#AFBAB8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e4c2c7;
  --color-2: #cbc3c4;
  --color-3: #afbab8;
  --color-4: #8da9aa;
  --color-5: #424a4a;
}

SCSS

$color-1: #e4c2c7;
$color-2: #cbc3c4;
$color-3: #afbab8;
$color-4: #8da9aa;
$color-5: #424a4a;

TAILWIND

colors: {
  'brand-1': '#e4c2c7',
  'brand-2': '#cbc3c4',
  'brand-3': '#afbab8',
  'brand-4': '#8da9aa',
  'brand-5': '#424a4a',
}

RGB Array

[228, 194, 199], [203, 195, 196], [175, 186, 184], [141, 169, 170], [66, 74, 74]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E4C2C7, #CBC3C4, #AFBAB8, #8DA9AA, #424A4A 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: #e4c2c7; --color-2: #cbc3c4; --color-3: #afbab8; --color-4: #8da9aa; --color-5: #424a4a. 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