#ECF7F8 + #DBF0F3 + #C2E4E0 + #A6D2CD + #8FC3BD - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ECF7F8

Sky Blue · Lavender · Glacier Blue

HEX

#ECF7F8

RGB

rgb(236, 247, 248)

HSL

hsl(185, 46%, 95%)

HSB

hsb(185, 5%, 97%)

CMYK

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

Oklch

oklch(96.8% 0.012 203.5)

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

#DBF0F3

Sky Blue · Lavender · Glacier Blue

HEX

#DBF0F3

RGB

rgb(219, 240, 243)

HSL

hsl(187, 50%, 91%)

HSB

hsb(187, 10%, 95%)

CMYK

cmyk(10%, 1%, 0%, 5%)

Oklch

oklch(94.1% 0.023 207.1)

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

#C2E4E0

Jade · LightBlue · Glacier Blue

HEX

#C2E4E0

RGB

rgb(194, 228, 224)

HSL

hsl(173, 39%, 83%)

HSB

hsb(173, 15%, 89%)

CMYK

cmyk(15%, 0%, 2%, 11%)

Oklch

oklch(89.3% 0.036 187.9)

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

#A6D2CD

Jade · LightSteelBlue · Lake Green

HEX

#A6D2CD

RGB

rgb(166, 210, 205)

HSL

hsl(173, 33%, 74%)

HSB

hsb(173, 21%, 82%)

CMYK

cmyk(21%, 0%, 2%, 18%)

Oklch

oklch(83.1% 0.047 187.8)

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

#8FC3BD

Jade · DarkGray · Lake Green

HEX

#8FC3BD

RGB

rgb(143, 195, 189)

HSL

hsl(173, 30%, 66%)

HSB

hsb(173, 27%, 76%)

CMYK

cmyk(27%, 0%, 3%, 24%)

Oklch

oklch(77.9% 0.055 187.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECF7F8

F8EDEC

Analogous

ECF8F3

ECF7F8

ECF1F8

Triadic

ECF7F8

F8ECF7

F7F8EC

Split-Comp.

ECF7F8

F8ECF1

F8F3EC

Tetradic

ECF7F8

F3ECF8

F8EDEC

F1F8EC

Contrast Matrix WCAG 2.1 Contrast

ECF7F8	DBF0F3	C2E4E0	A6D2CD	8FC3BD
—	1.1 Fail	1.2 Fail	1.5 Fail	1.8 Fail
1.1 Fail	—	1.1 Fail	1.4 Fail	1.7 Fail
1.2 Fail	1.1 Fail	—	1.2 Fail	1.4 Fail
1.5 Fail	1.4 Fail	1.2 Fail	—	1.2 Fail
1.8 Fail	1.7 Fail	1.4 Fail	1.2 Fail	—

White BG

1.1Fail

1.2Fail

1.4Fail

1.7Fail

2.0Fail

Black BG

19.2AAA

17.8AAA

15.5AAA

12.7AAA

10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F1F1F8

E4E4F2

D1D1E1

B9B9CE

A6A6BE

Deuteranopia

F0EFF8

E3E1F2

CFCCE1

B7B3CF

A39FBF

Tritanopia

EDF8F8

DCF2F2

C4E2E2

A8CFCF

92C0C0

Achromatopsia

F4F4F4

EAEAEA

D9D9D9

C4C4C4

B3B3B3

Shades & Tints Shades & Tints

#ECF7F8

Dark

Light

#DBF0F3

Dark

Light

#C2E4E0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecf7f8;
  --color-2: #dbf0f3;
  --color-3: #c2e4e0;
  --color-4: #a6d2cd;
  --color-5: #8fc3bd;
}

SCSS

$color-1: #ecf7f8;
$color-2: #dbf0f3;
$color-3: #c2e4e0;
$color-4: #a6d2cd;
$color-5: #8fc3bd;

TAILWIND

colors: {
  'brand-1': '#ecf7f8',
  'brand-2': '#dbf0f3',
  'brand-3': '#c2e4e0',
  'brand-4': '#a6d2cd',
  'brand-5': '#8fc3bd',
}

RGB Array

[236, 247, 248], [219, 240, 243], [194, 228, 224], [166, 210, 205], [143, 195, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ECF7F8, #DBF0F3, #C2E4E0, #A6D2CD, #8FC3BD 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: #ecf7f8; --color-2: #dbf0f3; --color-3: #c2e4e0; --color-4: #a6d2cd; --color-5: #8fc3bd. 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