← Back to Editor

#ECF4E7 · #EDF2F8 · #E1EFEE · #CFF0F1 · #F4F2F4

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ECF4E7

Celadon · Beige · Mint Green

HEX
#ECF4E7
RGB
rgb(236, 244, 231)
HSL
hsl(97, 37%, 93%)
HSB
hsb(97, 5%, 96%)
CMYK
cmyk(3%, 0%, 5%, 4%)
Oklch
oklch(95.8% 0.019 133.1)

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

#EDF2F8

Azure · Lavender · Sky Blue

HEX
#EDF2F8
RGB
rgb(237, 242, 248)
HSL
hsl(213, 44%, 95%)
HSB
hsb(213, 4%, 97%)
CMYK
cmyk(4%, 2%, 0%, 3%)
Oklch
oklch(95.9% 0.010 252.8)

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

#E1EFEE

Jade · Lavender · Glacier Blue

HEX
#E1EFEE
RGB
rgb(225, 239, 238)
HSL
hsl(176, 30%, 91%)
HSB
hsb(176, 6%, 94%)
CMYK
cmyk(6%, 0%, 0%, 6%)
Oklch
oklch(94.1% 0.015 191.8)

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

#CFF0F1

Sky Blue · Lavender · Glacier Blue

HEX
#CFF0F1
RGB
rgb(207, 240, 241)
HSL
hsl(182, 55%, 88%)
HSB
hsb(182, 14%, 95%)
CMYK
cmyk(14%, 0%, 0%, 5%)
Oklch
oklch(93.2% 0.034 198.8)

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

#F4F2F4

Mauve · SeaShell · Cloud White

HEX
#F4F2F4
RGB
rgb(244, 242, 244)
HSL
hsl(300, 8%, 95%)
HSB
hsb(300, 1%, 96%)
CMYK
cmyk(0%, 1%, 0%, 4%)
Oklch
oklch(96.3% 0.003 325.6)

Traditional「Mauve」· Paint「Cloud White」· Creative Morning Mist

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECF4E7
EFE7F4

Analogous

F2F4E7
ECF4E7
E7F4E8

Triadic

ECF4E7
E7ECF4
F4E7EC

Split-Comp.

ECF4E7
E8E7F4
F4E7F2

Tetradic

ECF4E7
E7F2F4
EFE7F4
F4E8E7

Contrast Matrix WCAG 2.1 Contrast

ECF4E7
EDF2F8
E1EFEE
CFF0F1
F4F2F4
—
1.0
Fail
1.0
Fail
1.1
Fail
1.0
Fail
1.0
Fail
—
1.0
Fail
1.1
Fail
1.0
Fail
1.0
Fail
1.0
Fail
—
1.0
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.0
Fail
—
1.1
Fail
1.0
Fail
1.0
Fail
1.1
Fail
1.1
Fail
—
White BG
1.1Fail
1.1Fail
1.2Fail
1.2Fail
1.1Fail
Black BG
18.7AAA
18.7AAA
17.8AAA
17.4AAA
18.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFF0EA
EFEFF7
E7E7EE
DDDEF1
F3F3F4

Deuteranopia

EFEEEB
EFEEF6
E6E5EE
DBD9F1
F3F3F3

Tritanopia

ECEDED
EDF5F5
E2EEEE
D1F1F1
F4F3F3

Achromatopsia

F0F0F0
F1F1F1
EBEBEB
E6E6E6
F3F3F3

Shades & Tints Shades & Tints

#ECF4E7

Dark
Light

#EDF2F8

Dark
Light

#E1EFEE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecf4e7;
  --color-2: #edf2f8;
  --color-3: #e1efee;
  --color-4: #cff0f1;
  --color-5: #f4f2f4;
}

SCSS

$color-1: #ecf4e7;
$color-2: #edf2f8;
$color-3: #e1efee;
$color-4: #cff0f1;
$color-5: #f4f2f4;

TAILWIND

colors: {
  'brand-1': '#ecf4e7',
  'brand-2': '#edf2f8',
  'brand-3': '#e1efee',
  'brand-4': '#cff0f1',
  'brand-5': '#f4f2f4',
}

RGB Array

[236, 244, 231], [237, 242, 248], [225, 239, 238], [207, 240, 241], [244, 242, 244]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ECF4E7, #EDF2F8, #E1EFEE, #CFF0F1, #F4F2F4 is ideal for: health products, baby brands, fresh-style blogs. 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: #ecf4e7; --color-2: #edf2f8; --color-3: #e1efee; --color-4: #cff0f1; --color-5: #f4f2f4. 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 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