#F0F4E6 + #DBE4D3 + #CBD7BF + #DBE2D0 + #FFE3ED · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F0F4E6

Willow Green · Linen · Mint Green

HEX

#F0F4E6

RGB

rgb(240, 244, 230)

HSL

hsl(77, 39%, 93%)

HSB

hsb(77, 6%, 96%)

CMYK

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

Oklch

oklch(96.0% 0.019 119.7)

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

#DBE4D3

Celadon · LightGray · Mint Green

HEX

#DBE4D3

RGB

rgb(219, 228, 211)

HSL

hsl(92, 24%, 86%)

HSB

hsb(92, 7%, 89%)

CMYK

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

Oklch

oklch(90.7% 0.025 129.9)

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

#CBD7BF

Celadon · LightGray · Apple Green

HEX

#CBD7BF

RGB

rgb(203, 215, 191)

HSL

hsl(90, 23%, 80%)

HSB

hsb(90, 11%, 84%)

CMYK

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

Oklch

oklch(86.3% 0.035 128.9)

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

#DBE2D0

Willow Green · LightGray · Mint Green

HEX

#DBE2D0

RGB

rgb(219, 226, 208)

HSL

hsl(83, 24%, 85%)

HSB

hsb(83, 8%, 89%)

CMYK

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

Oklch

oklch(90.3% 0.025 124.3)

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

#FFE3ED

Rouge · Linen · Cherry Blossom

HEX

#FFE3ED

RGB

rgb(255, 227, 237)

HSL

hsl(339, 100%, 95%)

HSB

hsb(339, 11%, 100%)

CMYK

cmyk(0%, 11%, 7%, 0%)

Oklch

oklch(94.1% 0.033 354.1)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0F4E6

EAE6F4

Analogous

F4F1E6

F0F4E6

E9F4E6

Triadic

F0F4E6

E6F0F4

F4E6F0

Split-Comp.

F0F4E6

E6E9F4

F1E6F4

Tetradic

F0F4E6

E6F4F1

EAE6F4

F4E6E9

Contrast Matrix WCAG 2.1 Contrast

F0F4E6	DBE4D3	CBD7BF	DBE2D0	FFE3ED
—	1.2 Fail	1.3 Fail	1.2 Fail	1.1 Fail
1.2 Fail	—	1.1 Fail	1.0 Fail	1.1 Fail
1.3 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.2 Fail	1.0 Fail	1.1 Fail	—	1.1 Fail
1.1 Fail	1.1 Fail	1.2 Fail	1.1 Fail	—

White BG

1.1Fail

1.3Fail

1.5Fail

1.3Fail

1.2Fail

Black BG

18.8AAA

16.1AAA

14.0AAA

15.8AAA

17.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F2F2E9

DFDFD7

D0D0C5

DEDED4

F3F3EB

Deuteranopia

F2F1EA

DEDED8

D0CFC6

DEDDD5

F5F7EA

Tritanopia

F0ECED

DBDADB

CCC9CA

DBD8D9

FEE9E8

Achromatopsia

F1F1F1

DFDFDF

D1D1D1

DEDEDE

EDEDED

Shades & Tints Shades & Tints

#F0F4E6

Dark

Light

#DBE4D3

Dark

Light

#CBD7BF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0f4e6;
  --color-2: #dbe4d3;
  --color-3: #cbd7bf;
  --color-4: #dbe2d0;
  --color-5: #ffe3ed;
}

SCSS

$color-1: #f0f4e6;
$color-2: #dbe4d3;
$color-3: #cbd7bf;
$color-4: #dbe2d0;
$color-5: #ffe3ed;

TAILWIND

colors: {
  'brand-1': '#f0f4e6',
  'brand-2': '#dbe4d3',
  'brand-3': '#cbd7bf',
  'brand-4': '#dbe2d0',
  'brand-5': '#ffe3ed',
}

RGB Array

[240, 244, 230], [219, 228, 211], [203, 215, 191], [219, 226, 208], [255, 227, 237]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #F0F4E6, #DBE4D3, #CBD7BF, #DBE2D0, #FFE3ED 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: #f0f4e6; --color-2: #dbe4d3; --color-3: #cbd7bf; --color-4: #dbe2d0; --color-5: #ffe3ed. 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