#F7FDFA + #EDF7F5 + #D5EAEB + #C5DDE3 + #B6C9D6 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F7FDFA

Jade · Snow · Mint Green

HEX

#F7FDFA

RGB

rgb(247, 253, 250)

HSL

hsl(150, 60%, 98%)

HSB

hsb(150, 2%, 99%)

CMYK

cmyk(2%, 0%, 1%, 1%)

Oklch

oklch(98.9% 0.007 164.9)

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

#EDF7F5

Jade · Snow · Glacier Blue

HEX

#EDF7F5

RGB

rgb(237, 247, 245)

HSL

hsl(168, 38%, 95%)

HSB

hsb(168, 4%, 97%)

CMYK

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

Oklch

oklch(96.8% 0.011 182.9)

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

#D5EAEB

Sky Blue · Lavender · Glacier Blue

HEX

#D5EAEB

RGB

rgb(213, 234, 235)

HSL

hsl(183, 35%, 88%)

HSB

hsb(183, 9%, 92%)

CMYK

cmyk(9%, 0%, 0%, 8%)

Oklch

oklch(92.2% 0.022 200.2)

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

#C5DDE3

Sky Blue · LightGray · Glacier Blue

HEX

#C5DDE3

RGB

rgb(197, 221, 227)

HSL

hsl(192, 35%, 83%)

HSB

hsb(192, 13%, 89%)

CMYK

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

Oklch

oklch(88.2% 0.027 214.4)

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

#B6C9D6

Sky Blue · LightSteelBlue · Cobalt Blue

HEX

#B6C9D6

RGB

rgb(182, 201, 214)

HSL

hsl(204, 28%, 78%)

HSB

hsb(204, 15%, 84%)

CMYK

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

Oklch

oklch(82.6% 0.028 237.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7FDFA

FDF7FA

Analogous

F7FDF7

F7FDFA

F7FDFD

Triadic

F7FDFA

FAF7FD

FDFAF7

Split-Comp.

F7FDFA

FDF7FD

FDF7F7

Tetradic

F7FDFA

F7F7FD

FDF7FA

FDFDF7

Contrast Matrix WCAG 2.1 Contrast

F7FDFA	EDF7F5	D5EAEB	C5DDE3	B6C9D6
—	1.1 Fail	1.2 Fail	1.4 Fail	1.7 Fail
1.1 Fail	—	1.1 Fail	1.3 Fail	1.6 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.4 Fail
1.4 Fail	1.3 Fail	1.1 Fail	—	1.2 Fail
1.7 Fail	1.6 Fail	1.4 Fail	1.2 Fail	—

White BG

1.0Fail

1.1Fail

1.3Fail

1.4Fail

1.7Fail

Black BG

20.4AAA

19.2AAA

16.8AAA

14.8AAA

12.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FAFAFB

F1F1F5

DEDEEB

CFD0E2

BEBED3

Deuteranopia

F9F9FB

F1F0F6

DDDBEB

CECCE1

BDBCD2

Tritanopia

F7FBFB

EDF6F6

D6EBEB

C6E0E0

B7D0D0

Achromatopsia

FBFBFB

F4F4F4

E4E4E4

D7D7D7

C5C5C5

Shades & Tints Shades & Tints

#F7FDFA

Dark

Light

#EDF7F5

Dark

Light

#D5EAEB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7fdfa;
  --color-2: #edf7f5;
  --color-3: #d5eaeb;
  --color-4: #c5dde3;
  --color-5: #b6c9d6;
}

SCSS

$color-1: #f7fdfa;
$color-2: #edf7f5;
$color-3: #d5eaeb;
$color-4: #c5dde3;
$color-5: #b6c9d6;

TAILWIND

colors: {
  'brand-1': '#f7fdfa',
  'brand-2': '#edf7f5',
  'brand-3': '#d5eaeb',
  'brand-4': '#c5dde3',
  'brand-5': '#b6c9d6',
}

RGB Array

[247, 253, 250], [237, 247, 245], [213, 234, 235], [197, 221, 227], [182, 201, 214]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #F7FDFA, #EDF7F5, #D5EAEB, #C5DDE3, #B6C9D6 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: #f7fdfa; --color-2: #edf7f5; --color-3: #d5eaeb; --color-4: #c5dde3; --color-5: #b6c9d6. 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