#EDF0F0 + #6CDFEA + #DEE3E3 + #EDF0F0 + #F2FEFF · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#EDF0F0

Sky Blue · Lavender · Cloud White

HEX

#EDF0F0

RGB

rgb(237, 240, 240)

HSL

hsl(180, 9%, 94%)

HSB

hsb(180, 1%, 94%)

CMYK

cmyk(1%, 0%, 0%, 6%)

Oklch

oklch(95.3% 0.003 197.1)

Traditional「Sky Blue」· Paint「Cloud White」· Creative Morning Mist

#6CDFEA

Sky Blue · SkyBlue · Lake Green

HEX

#6CDFEA

RGB

rgb(108, 223, 234)

HSL

hsl(185, 75%, 67%)

HSB

hsb(185, 54%, 92%)

CMYK

cmyk(54%, 5%, 0%, 8%)

Oklch

oklch(84.1% 0.105 203.8)

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

#DEE3E3

Sky Blue · Lavender · Cloud White

HEX

#DEE3E3

RGB

rgb(222, 227, 227)

HSL

hsl(180, 8%, 88%)

HSB

hsb(180, 2%, 89%)

CMYK

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

Oklch

oklch(91.2% 0.005 197.1)

Traditional「Sky Blue」· Paint「Cloud White」· Creative Silver Lining

#EDF0F0

Sky Blue · Lavender · Cloud White

HEX

#EDF0F0

RGB

rgb(237, 240, 240)

HSL

hsl(180, 9%, 94%)

HSB

hsb(180, 1%, 94%)

CMYK

cmyk(1%, 0%, 0%, 6%)

Oklch

oklch(95.3% 0.003 197.1)

Traditional「Sky Blue」· Paint「Cloud White」· Creative Morning Mist

#F2FEFF

Sky Blue · White · Glacier Blue

HEX

#F2FEFF

RGB

rgb(242, 254, 255)

HSL

hsl(185, 100%, 97%)

HSB

hsb(185, 5%, 100%)

CMYK

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

Oklch

oklch(98.8% 0.013 202.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EDF0F0

F1EEEE

Analogous

EEF1F0

EDF0F0

EEF0F1

Triadic

EDF0F0

F1EEF1

F1F1EE

Split-Comp.

EDF0F0

F1EEF0

F1F0EE

Tetradic

EDF0F0

F0EEF1

F1EEEE

F0F1EE

Contrast Matrix WCAG 2.1 Contrast

EDF0F0	6CDFEA	DEE3E3	EDF0F0	F2FEFF
—	1.4 Fail	1.1 Fail	—	1.1 Fail
1.4 Fail	—	1.2 Fail	1.4 Fail	1.5 Fail
1.1 Fail	1.2 Fail	—	1.1 Fail	1.3 Fail
—	1.4 Fail	1.1 Fail	—	1.1 Fail
1.1 Fail	1.5 Fail	1.3 Fail	1.1 Fail	—

White BG

1.1Fail

1.6Fail

1.3Fail

1.1Fail

1.0Fail

Black BG

18.3AAA

13.4AAA

16.2AAA

18.3AAA

20.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EEEEF0

9E9FE7

E0E0E3

EEEEF0

F7F7FF

Deuteranopia

EEEEF0

978FE7

E0DFE3

EEEEF0

F7F6FF

Tritanopia

EDF0F0

72E5E5

DEE3E3

EDF0F0

F3FFFF

Achromatopsia

EFEFEF

BEBEBE

E2E2E2

EFEFEF

FBFBFB

Shades & Tints Shades & Tints

#EDF0F0

Dark

Light

#6CDFEA

Dark

Light

#DEE3E3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #edf0f0;
  --color-2: #6cdfea;
  --color-3: #dee3e3;
  --color-4: #edf0f0;
  --color-5: #f2feff;
}

SCSS

$color-1: #edf0f0;
$color-2: #6cdfea;
$color-3: #dee3e3;
$color-4: #edf0f0;
$color-5: #f2feff;

TAILWIND

colors: {
  'brand-1': '#edf0f0',
  'brand-2': '#6cdfea',
  'brand-3': '#dee3e3',
  'brand-4': '#edf0f0',
  'brand-5': '#f2feff',
}

RGB Array

[237, 240, 240], [108, 223, 234], [222, 227, 227], [237, 240, 240], [242, 254, 255]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #EDF0F0, #6CDFEA, #DEE3E3, #EDF0F0, #F2FEFF 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: #edf0f0; --color-2: #6cdfea; --color-3: #dee3e3; --color-4: #edf0f0; --color-5: #f2feff. 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