#ECEBF7 + #CBF0DE + #E7E4ED + #A0D8DF + #5EE2E8 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ECEBF7

Wisteria · Lavender · Sky Blue

HEX

#ECEBF7

RGB

rgb(236, 235, 247)

HSL

hsl(245, 43%, 95%)

HSB

hsb(245, 5%, 97%)

CMYK

cmyk(4%, 5%, 0%, 3%)

Oklch

oklch(94.4% 0.016 289.9)

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

#CBF0DE

Jade · LightGray · Mint Green

HEX

#CBF0DE

RGB

rgb(203, 240, 222)

HSL

hsl(151, 55%, 87%)

HSB

hsb(151, 15%, 94%)

CMYK

cmyk(15%, 0%, 7%, 6%)

Oklch

oklch(92.4% 0.045 164.5)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

#E7E4ED

Wisteria · Lavender · Lavender

HEX

#E7E4ED

RGB

rgb(231, 228, 237)

HSL

hsl(260, 20%, 91%)

HSB

hsb(260, 4%, 93%)

CMYK

cmyk(3%, 4%, 0%, 7%)

Oklch

oklch(92.4% 0.012 301.3)

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

#A0D8DF

Sky Blue · LightBlue · Lake Green

HEX

#A0D8DF

RGB

rgb(160, 216, 223)

HSL

hsl(187, 50%, 75%)

HSB

hsb(187, 28%, 87%)

CMYK

cmyk(28%, 3%, 0%, 13%)

Oklch

oklch(84.6% 0.058 205.7)

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

#5EE2E8

Sky Blue · Turquoise · Lake Green

HEX

#5EE2E8

RGB

rgb(94, 226, 232)

HSL

hsl(183, 75%, 64%)

HSB

hsb(183, 59%, 91%)

CMYK

cmyk(59%, 3%, 0%, 9%)

Oklch

oklch(84.3% 0.115 199.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECEBF7

F7F8ED

Analogous

EDF1F8

ECEBF7

F3EDF8

Triadic

ECEBF7

F8EEED

EDF8EE

Split-Comp.

ECEBF7

F8F3ED

F1F8ED

Tetradic

ECEBF7

F8EDF1

F7F8ED

EDF8F3

Contrast Matrix WCAG 2.1 Contrast

ECEBF7	CBF0DE	E7E4ED	A0D8DF	5EE2E8
—	1.0 Fail	1.1 Fail	1.3 Fail	1.3 Fail
1.0 Fail	—	1.0 Fail	1.3 Fail	1.3 Fail
1.1 Fail	1.0 Fail	—	1.2 Fail	1.2 Fail
1.3 Fail	1.3 Fail	1.2 Fail	—	1.0 Fail
1.3 Fail	1.3 Fail	1.2 Fail	1.0 Fail	—

White BG

1.2Fail

1.3Fail

1.6Fail

Black BG

17.8AAA

17.1AAA

16.7AAA

13.4AAA

13.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECECF4

DBDBE2

E6E6EB

B8B9DD

9798E7

Deuteranopia

ECECF3

D9D6E3

E6E6EA

B5B1DD

9086E6

Tritanopia

ECF2F1

CDE6E7

E7E9E9

A3DCDC

65E5E5

Achromatopsia

EDEDED

E3E3E3

E6E6E6

C8C8C8

BBBBBB

Shades & Tints Shades & Tints

#ECEBF7

Dark

Light

#CBF0DE

Dark

Light

#E7E4ED

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecebf7;
  --color-2: #cbf0de;
  --color-3: #e7e4ed;
  --color-4: #a0d8df;
  --color-5: #5ee2e8;
}

SCSS

$color-1: #ecebf7;
$color-2: #cbf0de;
$color-3: #e7e4ed;
$color-4: #a0d8df;
$color-5: #5ee2e8;

TAILWIND

colors: {
  'brand-1': '#ecebf7',
  'brand-2': '#cbf0de',
  'brand-3': '#e7e4ed',
  'brand-4': '#a0d8df',
  'brand-5': '#5ee2e8',
}

RGB Array

[236, 235, 247], [203, 240, 222], [231, 228, 237], [160, 216, 223], [94, 226, 232]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #ECEBF7, #CBF0DE, #E7E4ED, #A0D8DF, #5EE2E8 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: #ecebf7; --color-2: #cbf0de; --color-3: #e7e4ed; --color-4: #a0d8df; --color-5: #5ee2e8. 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 cool-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