← Back to Editor

#EECABE · #CCBBB5 · #ABAFAB · #937C91 · #696874

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

#EECABE

Apricot · Pink · Peach Orange

HEX
#EECABE
RGB
rgb(238, 202, 190)
HSL
hsl(15, 59%, 84%)
HSB
hsb(15, 20%, 93%)
CMYK
cmyk(0%, 15%, 20%, 7%)
Oklch
oklch(86.6% 0.044 39.3)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#CCBBB5

Apricot · Silver · Warm Sun

HEX
#CCBBB5
RGB
rgb(204, 187, 181)
HSL
hsl(16, 18%, 75%)
HSB
hsb(16, 11%, 80%)
CMYK
cmyk(0%, 8%, 11%, 20%)
Oklch
oklch(80.5% 0.021 40.5)

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

#ABAFAB

Ash · DarkGray · Silver Sand

HEX
#ABAFAB
RGB
rgb(171, 175, 171)
HSL
hsl(120, 2%, 68%)
HSB
hsb(120, 2%, 69%)
CMYK
cmyk(2%, 0%, 2%, 31%)
Oklch
oklch(75.0% 0.007 145.5)

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

#937C91

Rose Purple · Gray · Violet

HEX
#937C91
RGB
rgb(147, 124, 145)
HSL
hsl(305, 10%, 53%)
HSB
hsb(305, 16%, 58%)
CMYK
cmyk(0%, 16%, 1%, 42%)
Oklch
oklch(61.5% 0.041 328.9)

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

#696874

Ink Gray · DimGray · Warm Gray

HEX
#696874
RGB
rgb(105, 104, 116)
HSL
hsl(245, 5%, 43%)
HSB
hsb(245, 10%, 45%)
CMYK
cmyk(9%, 10%, 0%, 55%)
Oklch
oklch(52.2% 0.019 289.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EECABE
BEE2EE

Analogous

EEBECA
EECABE
EEE2BE

Triadic

EECABE
BEEECA
CABEEE

Split-Comp.

EECABE
BEEEE2
BECAEE

Tetradic

EECABE
CAEEBE
BEE2EE
E2BEEE

Contrast Matrix WCAG 2.1 Contrast

EECABE
CCBBB5
ABAFAB
937C91
696874
—
1.2
Fail
1.5
Fail
2.5
Fail
3.6
AA Large
1.2
Fail
—
1.2
Fail
2.1
Fail
3.0
Fail
1.5
Fail
1.2
Fail
—
1.7
Fail
2.5
Fail
2.5
Fail
2.1
Fail
1.7
Fail
—
1.4
Fail
3.6
AA Large
3.0
Fail
2.5
Fail
1.4
Fail
—
White BG
1.5Fail
1.9Fail
2.2Fail
3.8AA Large
5.5AA
Black BG
13.8AAA
11.3AAA
9.5AAA
5.5AA
3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DEDEC1
C5C4B6
ADADAC
89898C
696971

Deuteranopia

E1E3C2
C6C7B7
ADACAC
8A8C8B
696970

Tritanopia

ECC3C4
CBB8B8
ABADAD
928887
696F6E

Achromatopsia

D3D3D3
BFBFBF
ADADAD
858585
6A6A6A

Shades & Tints Shades & Tints

#EECABE

Dark
Light

#CCBBB5

Dark
Light

#ABAFAB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #eecabe;
  --color-2: #ccbbb5;
  --color-3: #abafab;
  --color-4: #937c91;
  --color-5: #696874;
}

SCSS

$color-1: #eecabe;
$color-2: #ccbbb5;
$color-3: #abafab;
$color-4: #937c91;
$color-5: #696874;

TAILWIND

colors: {
  'brand-1': '#eecabe',
  'brand-2': '#ccbbb5',
  'brand-3': '#abafab',
  'brand-4': '#937c91',
  'brand-5': '#696874',
}

RGB Array

[238, 202, 190], [204, 187, 181], [171, 175, 171], [147, 124, 145], [105, 104, 116]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #EECABE, #CCBBB5, #ABAFAB, #937C91, #696874 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: #eecabe; --color-2: #ccbbb5; --color-3: #abafab; --color-4: #937c91; --color-5: #696874. 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