#FBF9EC + #EDF2E8 + #C3F0DC + #AEDFE0 + #77D6E5 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FBF9EC

Fresh Green · SeaShell · Lemon Cream

HEX

#FBF9EC

RGB

rgb(251, 249, 236)

HSL

hsl(52, 65%, 95%)

HSB

hsb(52, 6%, 98%)

CMYK

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

Oklch

oklch(98.0% 0.017 99.6)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#EDF2E8

Celadon · Linen · Mint Green

HEX

#EDF2E8

RGB

rgb(237, 242, 232)

HSL

hsl(90, 28%, 93%)

HSB

hsb(90, 4%, 95%)

CMYK

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

Oklch

oklch(95.5% 0.014 128.6)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#C3F0DC

Jade · LightBlue · Mint Green

HEX

#C3F0DC

RGB

rgb(195, 240, 220)

HSL

hsl(153, 60%, 85%)

HSB

hsb(153, 19%, 94%)

CMYK

cmyk(19%, 0%, 8%, 6%)

Oklch

oklch(91.8% 0.054 166.4)

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

#AEDFE0

Sky Blue · LightBlue · Glacier Blue

HEX

#AEDFE0

RGB

rgb(174, 223, 224)

HSL

hsl(181, 45%, 78%)

HSB

hsb(181, 22%, 88%)

CMYK

cmyk(22%, 0%, 0%, 12%)

Oklch

oklch(87.0% 0.051 197.8)

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

#77D6E5

Sky Blue · SkyBlue · Lake Green

HEX

#77D6E5

RGB

rgb(119, 214, 229)

HSL

hsl(188, 68%, 68%)

HSB

hsb(188, 48%, 90%)

CMYK

cmyk(48%, 7%, 0%, 10%)

Oklch

oklch(82.3% 0.092 208.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FBF9EC

EAECFB

Analogous

FBF0EA

FBF9EC

F4FBEA

Triadic

FBF9EC

EAFBF8

F8EAFB

Split-Comp.

FBF9EC

EAF4FB

F0EAFB

Tetradic

FBF9EC

EAFBF0

EAECFB

FBEAF4

Contrast Matrix WCAG 2.1 Contrast

FBF9EC	EDF2E8	C3F0DC	AEDFE0	77D6E5
—	1.1 Fail	1.2 Fail	1.4 Fail	1.6 Fail
1.1 Fail	—	1.1 Fail	1.3 Fail	1.5 Fail
1.2 Fail	1.1 Fail	—	1.2 Fail	1.3 Fail
1.4 Fail	1.3 Fail	1.2 Fail	—	1.2 Fail
1.6 Fail	1.5 Fail	1.3 Fail	1.2 Fail	—

White BG

1.1Fail

1.2Fail

1.5Fail

1.7Fail

Black BG

19.9AAA

18.5AAA

16.8AAA

14.4AAA

12.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FAFAEF

EFEFEA

D6D7E1

C3C4E0

A0A1E1

Deuteranopia

FAFAF0

EFEEEB

D4D1E2

C0BDE0

9B94E1

Tritanopia

FBF2F2

EDECED

C5E5E6

B0E0E0

7CDFDE

Achromatopsia

F8F8F8

EFEFEF

E0E0E0

D0D0D0

BBBBBB

Shades & Tints Shades & Tints

#FBF9EC

Dark

Light

#EDF2E8

Dark

Light

#C3F0DC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fbf9ec;
  --color-2: #edf2e8;
  --color-3: #c3f0dc;
  --color-4: #aedfe0;
  --color-5: #77d6e5;
}

SCSS

$color-1: #fbf9ec;
$color-2: #edf2e8;
$color-3: #c3f0dc;
$color-4: #aedfe0;
$color-5: #77d6e5;

TAILWIND

colors: {
  'brand-1': '#fbf9ec',
  'brand-2': '#edf2e8',
  'brand-3': '#c3f0dc',
  'brand-4': '#aedfe0',
  'brand-5': '#77d6e5',
}

RGB Array

[251, 249, 236], [237, 242, 232], [195, 240, 220], [174, 223, 224], [119, 214, 229]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #FBF9EC, #EDF2E8, #C3F0DC, #AEDFE0, #77D6E5 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: #fbf9ec; --color-2: #edf2e8; --color-3: #c3f0dc; --color-4: #aedfe0; --color-5: #77d6e5. 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