#EBF5DA + #D7F5E4 + #BCF7ED + #ACDAE6 + #9BBDDE · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#EBF5DA

Willow Green · Beige · Mint Green

HEX

#EBF5DA

RGB

rgb(235, 245, 218)

HSL

hsl(82, 57%, 91%)

HSB

hsb(82, 11%, 96%)

CMYK

cmyk(4%, 0%, 11%, 4%)

Oklch

oklch(95.5% 0.037 123.7)

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

#D7F5E4

Emerald · Lavender · Mint Green

HEX

#D7F5E4

RGB

rgb(215, 245, 228)

HSL

hsl(146, 60%, 90%)

HSB

hsb(146, 12%, 96%)

CMYK

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

Oklch

oklch(94.4% 0.039 160.8)

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

#BCF7ED

Jade · LightBlue · Glacier Blue

HEX

#BCF7ED

RGB

rgb(188, 247, 237)

HSL

hsl(170, 79%, 85%)

HSB

hsb(170, 24%, 97%)

CMYK

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

Oklch

oklch(93.3% 0.061 183.4)

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

#ACDAE6

Sky Blue · LightBlue · Glacier Blue

HEX

#ACDAE6

RGB

rgb(172, 218, 230)

HSL

hsl(192, 54%, 79%)

HSB

hsb(192, 25%, 90%)

CMYK

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

Oklch

oklch(86.0% 0.051 215.4)

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

#9BBDDE

Azure · LightSteelBlue · Cobalt Blue

HEX

#9BBDDE

RGB

rgb(155, 189, 222)

HSL

hsl(210, 50%, 74%)

HSB

hsb(210, 30%, 87%)

CMYK

cmyk(30%, 15%, 0%, 13%)

Oklch

oklch(78.5% 0.060 247.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EBF5DA

E5DBF5

Analogous

F5F2DB

EBF5DA

DEF5DB

Triadic

EBF5DA

DBECF5

F5DBEC

Split-Comp.

EBF5DA

DBDEF5

F2DBF5

Tetradic

EBF5DA

DBF5F2

E5DBF5

F5DBDE

Contrast Matrix WCAG 2.1 Contrast

EBF5DA	D7F5E4	BCF7ED	ACDAE6	9BBDDE
—	1.0 Fail	1.1 Fail	1.3 Fail	1.7 Fail
1.0 Fail	—	1.0 Fail	1.3 Fail	1.7 Fail
1.1 Fail	1.0 Fail	—	1.3 Fail	1.6 Fail
1.3 Fail	1.3 Fail	1.3 Fail	—	1.3 Fail
1.7 Fail	1.7 Fail	1.6 Fail	1.3 Fail	—

White BG

1.1Fail

1.2Fail

1.5Fail

2.0Fail

Black BG

18.6AAA

18.1AAA

17.7AAA

13.9AAA

10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFEFE1

E4E4E8

D6D6EF

C0C0E3

AAAAD6

Deuteranopia

EFEEE2

E2E0E9

D2CEF0

BDBAE2

A8A5D4

Tritanopia

ECE6E7

D9EBEC

BFF1F2

AEE1E0

9DD0CE

Achromatopsia

EFEFEF

EAEAEA

E4E4E4

CECECE

B7B7B7

Shades & Tints Shades & Tints

#EBF5DA

Dark

Light

#D7F5E4

Dark

Light

#BCF7ED

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ebf5da;
  --color-2: #d7f5e4;
  --color-3: #bcf7ed;
  --color-4: #acdae6;
  --color-5: #9bbdde;
}

SCSS

$color-1: #ebf5da;
$color-2: #d7f5e4;
$color-3: #bcf7ed;
$color-4: #acdae6;
$color-5: #9bbdde;

TAILWIND

colors: {
  'brand-1': '#ebf5da',
  'brand-2': '#d7f5e4',
  'brand-3': '#bcf7ed',
  'brand-4': '#acdae6',
  'brand-5': '#9bbdde',
}

RGB Array

[235, 245, 218], [215, 245, 228], [188, 247, 237], [172, 218, 230], [155, 189, 222]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #EBF5DA, #D7F5E4, #BCF7ED, #ACDAE6, #9BBDDE 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: #ebf5da; --color-2: #d7f5e4; --color-3: #bcf7ed; --color-4: #acdae6; --color-5: #9bbdde. 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