← Back to Editor

#ECF0E7 · #CDC7C9 · #FE016B · #C4C4C8 · #ECEBF4

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

WorkspaceReadingData Visualization

Color Details Color Details

#ECF0E7

Willow Green · Linen · Mint Green

HEX
#ECF0E7
RGB
rgb(236, 240, 231)
HSL
hsl(87, 23%, 92%)
HSB
hsb(87, 4%, 94%)
CMYK
cmyk(2%, 0%, 4%, 6%)
Oklch
oklch(95.0% 0.013 126.4)

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

#CDC7C9

Silver Gray · LightGray · Pearl Gray

HEX
#CDC7C9
RGB
rgb(205, 199, 201)
HSL
hsl(340, 6%, 79%)
HSB
hsb(340, 3%, 80%)
CMYK
cmyk(0%, 3%, 2%, 20%)
Oklch
oklch(83.5% 0.007 354.8)

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

#FE016B

Dark Violet · DeepPink · Camellia

HEX
#FE016B
RGB
rgb(254, 1, 107)
HSL
hsl(335, 99%, 50%)
HSB
hsb(335, 100%, 100%)
CMYK
cmyk(0%, 100%, 58%, 0%)
Oklch
oklch(63.8% 0.255 8.9)

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

#C4C4C8

Silver Gray · Silver · Pearl Gray

HEX
#C4C4C8
RGB
rgb(196, 196, 200)
HSL
hsl(240, 4%, 78%)
HSB
hsb(240, 2%, 78%)
CMYK
cmyk(2%, 2%, 0%, 22%)
Oklch
oklch(82.2% 0.006 286.3)

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

#ECEBF4

Wisteria · Lavender · Sky Blue

HEX
#ECEBF4
RGB
rgb(236, 235, 244)
HSL
hsl(247, 29%, 94%)
HSB
hsb(247, 4%, 96%)
CMYK
cmyk(3%, 4%, 0%, 4%)
Oklch
oklch(94.3% 0.012 291.3)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECF0E7
EAE6EF

Analogous

EFEFE6
ECF0E7
E6EFE6

Triadic

ECF0E7
E6EBEF
EFE6EB

Split-Comp.

ECF0E7
E6E6EF
EFE6EF

Tetradic

ECF0E7
E6EFEF
EAE6EF
EFE6E6

Contrast Matrix WCAG 2.1 Contrast

ECF0E7
CDC7C9
FE016B
C4C4C8
ECEBF4
—
1.4
Fail
3.3
AA Large
1.5
Fail
1.0
Fail
1.4
Fail
—
2.3
Fail
1.0
Fail
1.4
Fail
3.3
AA Large
2.3
Fail
—
2.2
Fail
3.3
AA Large
1.5
Fail
1.0
Fail
2.2
Fail
—
1.5
Fail
1.0
Fail
1.4
Fail
3.3
AA Large
1.5
Fail
—
White BG
1.2Fail
1.7Fail
3.9AA Large
1.7Fail
1.2Fail
Black BG
18.2AAA
12.6AAA
5.4AA
12.1AAA
17.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EEEEE9
CACAC9
908E51
C4C4C7
ECECF2

Deuteranopia

EEEDEA
CBCBC8
9FB24B
C4C4C7
ECECF1

Tritanopia

ECEBEB
CDC8C8
F13D39
C4C6C6
ECF0F0

Achromatopsia

EEEEEE
C9C9C9
595959
C4C4C4
ECECEC

Shades & Tints Shades & Tints

#ECF0E7

Dark
Light

#CDC7C9

Dark
Light

#FE016B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecf0e7;
  --color-2: #cdc7c9;
  --color-3: #fe016b;
  --color-4: #c4c4c8;
  --color-5: #ecebf4;
}

SCSS

$color-1: #ecf0e7;
$color-2: #cdc7c9;
$color-3: #fe016b;
$color-4: #c4c4c8;
$color-5: #ecebf4;

TAILWIND

colors: {
  'brand-1': '#ecf0e7',
  'brand-2': '#cdc7c9',
  'brand-3': '#fe016b',
  'brand-4': '#c4c4c8',
  'brand-5': '#ecebf4',
}

RGB Array

[236, 240, 231], [205, 199, 201], [254, 1, 107], [196, 196, 200], [236, 235, 244]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ECF0E7, #CDC7C9, #FE016B, #C4C4C8, #ECEBF4 is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ecf0e7; --color-2: #cdc7c9; --color-3: #fe016b; --color-4: #c4c4c8; --color-5: #ecebf4. 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. 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. 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