#F4FADA + #E6F5D8 + #D6EED7 + #C1E6D7 + #A9DED8 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F4FADA

Willow Green · Beige · Mint Green

HEX

#F4FADA

RGB

rgb(244, 250, 218)

HSL

hsl(71, 76%, 92%)

HSB

hsb(71, 13%, 98%)

CMYK

cmyk(2%, 0%, 13%, 2%)

Oklch

oklch(97.2% 0.042 115.8)

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

#E6F5D8

Emerald · Beige · Mint Green

HEX

#E6F5D8

RGB

rgb(230, 245, 216)

HSL

hsl(91, 59%, 90%)

HSB

hsb(91, 12%, 96%)

CMYK

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

Oklch

oklch(95.1% 0.041 129.6)

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

#D6EED7

Celadon · LightGray · Mint Green

HEX

#D6EED7

RGB

rgb(214, 238, 215)

HSL

hsl(122, 41%, 89%)

HSB

hsb(122, 10%, 93%)

CMYK

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

Oklch

oklch(92.5% 0.040 146.4)

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

#C1E6D7

Jade · LightGray · Mint Green

HEX

#C1E6D7

RGB

rgb(193, 230, 215)

HSL

hsl(156, 43%, 83%)

HSB

hsb(156, 16%, 90%)

CMYK

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

Oklch

oklch(89.4% 0.044 168.8)

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

#A9DED8

Jade · LightBlue · Glacier Blue

HEX

#A9DED8

RGB

rgb(169, 222, 216)

HSL

hsl(173, 45%, 77%)

HSB

hsb(173, 24%, 87%)

CMYK

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

Oklch

oklch(86.2% 0.055 187.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4FADA

E1DBFA

Analogous

FAF0DB

F4FADA

E5FADB

Triadic

F4FADA

DBF4FA

FADBF4

Split-Comp.

F4FADA

DBE5FA

F0DBFA

Tetradic

F4FADA

DBFAF0

E1DBFA

FADBE5

Contrast Matrix WCAG 2.1 Contrast

F4FADA	E6F5D8	D6EED7	C1E6D7	A9DED8
—	1.1 Fail	1.1 Fail	1.3 Fail	1.4 Fail
1.1 Fail	—	1.1 Fail	1.2 Fail	1.3 Fail
1.1 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.3 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
1.4 Fail	1.3 Fail	1.2 Fail	1.1 Fail	—

White BG

1.1Fail

1.2Fail

1.3Fail

1.5Fail

Black BG

19.5AAA

18.4AAA

17.1AAA

15.6AAA

14.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F7F7E2

ECEDDF

E0E1DD

D1D1DB

C0C0D9

Deuteranopia

F6F6E4

ECEBE1

DFDDDE

CFCCDC

BDB9DA

Tritanopia

F4E8E9

E7E5E6

D7E1E2

C3DDDE

ACDBDB

Achromatopsia

F5F5F5

EDEDED

E4E4E4

D9D9D9

CDCDCD

Shades & Tints Shades & Tints

#F4FADA

Dark

Light

#E6F5D8

Dark

Light

#D6EED7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4fada;
  --color-2: #e6f5d8;
  --color-3: #d6eed7;
  --color-4: #c1e6d7;
  --color-5: #a9ded8;
}

SCSS

$color-1: #f4fada;
$color-2: #e6f5d8;
$color-3: #d6eed7;
$color-4: #c1e6d7;
$color-5: #a9ded8;

TAILWIND

colors: {
  'brand-1': '#f4fada',
  'brand-2': '#e6f5d8',
  'brand-3': '#d6eed7',
  'brand-4': '#c1e6d7',
  'brand-5': '#a9ded8',
}

RGB Array

[244, 250, 218], [230, 245, 216], [214, 238, 215], [193, 230, 215], [169, 222, 216]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #F4FADA, #E6F5D8, #D6EED7, #C1E6D7, #A9DED8 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: #f4fada; --color-2: #e6f5d8; --color-3: #d6eed7; --color-4: #c1e6d7; --color-5: #a9ded8. 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