#ECF1F6 + #E9C1D0 + #EFABB8 + #C3D0E0 + #A9BADE - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ECF1F6

Azure · Lavender · Sky Blue

HEX

#ECF1F6

RGB

rgb(236, 241, 246)

HSL

hsl(210, 36%, 95%)

HSB

hsb(210, 4%, 96%)

CMYK

cmyk(4%, 2%, 0%, 4%)

Oklch

oklch(95.6% 0.009 247.9)

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

#E9C1D0

Rouge · Pink · Cherry Blossom

HEX

#E9C1D0

RGB

rgb(233, 193, 208)

HSL

hsl(338, 48%, 84%)

HSB

hsb(338, 17%, 91%)

CMYK

cmyk(0%, 17%, 11%, 9%)

Oklch

oklch(85.0% 0.049 353.7)

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

#EFABB8

Peach Pink · LightPink · Coral Red

HEX

#EFABB8

RGB

rgb(239, 171, 184)

HSL

hsl(349, 68%, 80%)

HSB

hsb(349, 28%, 94%)

CMYK

cmyk(0%, 28%, 23%, 6%)

Oklch

oklch(80.9% 0.081 6.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#C3D0E0

Azure · LightGray · Sky Blue

HEX

#C3D0E0

RGB

rgb(195, 208, 224)

HSL

hsl(213, 32%, 82%)

HSB

hsb(213, 13%, 88%)

CMYK

cmyk(13%, 7%, 0%, 12%)

Oklch

oklch(85.3% 0.026 253.6)

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

#A9BADE

Azure · LightSteelBlue · Cobalt Blue

HEX

#A9BADE

RGB

rgb(169, 186, 222)

HSL

hsl(221, 45%, 77%)

HSB

hsb(221, 24%, 87%)

CMYK

cmyk(24%, 16%, 0%, 13%)

Oklch

oklch(78.8% 0.055 265.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECF1F6

F7F2EE

Analogous

EEF7F7

ECF1F6

EEEEF7

Triadic

ECF1F6

F7EEF2

F2F7EE

Split-Comp.

ECF1F6

F7EEEE

F7F7EE

Tetradic

ECF1F6

F7EEF7

F7F2EE

EEF7EE

Contrast Matrix WCAG 2.1 Contrast

ECF1F6	E9C1D0	EFABB8	C3D0E0	A9BADE
—	1.4 Fail	1.7 Fail	1.4 Fail	1.7 Fail
1.4 Fail	—	1.2 Fail	1.0 Fail	1.2 Fail
1.7 Fail	1.2 Fail	—	1.2 Fail	1.0 Fail
1.4 Fail	1.0 Fail	1.2 Fail	—	1.2 Fail
1.7 Fail	1.2 Fail	1.0 Fail	1.2 Fail	—

White BG

1.1Fail

1.6Fail

1.9Fail

1.6Fail

2.0Fail

Black BG

18.5AAA

13.0AAA

11.2AAA

13.4AAA

10.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EEEEF5

D8D7CC

D2D1B5

C9C9DC

B0B1D5

Deuteranopia

EEEEF5

DADDCC

D6DBB4

C8C7DB

AFAED3

Tritanopia

ECF4F4

E7CAC9

ECB2B2

C4D9D8

AACECD

Achromatopsia

F0F0F0

CFCFCF

C1C1C1

CECECE

B9B9B9

Shades & Tints Shades & Tints

#ECF1F6

Dark

Light

#E9C1D0

Dark

Light

#EFABB8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecf1f6;
  --color-2: #e9c1d0;
  --color-3: #efabb8;
  --color-4: #c3d0e0;
  --color-5: #a9bade;
}

SCSS

$color-1: #ecf1f6;
$color-2: #e9c1d0;
$color-3: #efabb8;
$color-4: #c3d0e0;
$color-5: #a9bade;

TAILWIND

colors: {
  'brand-1': '#ecf1f6',
  'brand-2': '#e9c1d0',
  'brand-3': '#efabb8',
  'brand-4': '#c3d0e0',
  'brand-5': '#a9bade',
}

RGB Array

[236, 241, 246], [233, 193, 208], [239, 171, 184], [195, 208, 224], [169, 186, 222]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ECF1F6, #E9C1D0, #EFABB8, #C3D0E0, #A9BADE 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: #ecf1f6; --color-2: #e9c1d0; --color-3: #efabb8; --color-4: #c3d0e0; --color-5: #a9bade. 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