#F4F6EC + #EEECEC + #E6E7DC + #D6DBDE + #D3FDBD · pastel - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#F4F6EC

Willow Green · Linen · Mint Green

HEX

#F4F6EC

RGB

rgb(244, 246, 236)

HSL

hsl(72, 36%, 95%)

HSB

hsb(72, 4%, 96%)

CMYK

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

Oklch

oklch(96.9% 0.013 115.8)

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

#EEECEC

Plain White · Linen · Cloud White

HEX

#EEECEC

RGB

rgb(238, 236, 236)

HSL

hsl(0, 6%, 93%)

HSB

hsb(0, 1%, 93%)

CMYK

cmyk(0%, 1%, 1%, 7%)

Oklch

oklch(94.5% 0.002 17.2)

Traditional「Plain White」· Paint「Cloud White」· Creative Morning Mist

#E6E7DC

Fresh Green · Beige · Lemon Cream

HEX

#E6E7DC

RGB

rgb(230, 231, 220)

HSL

hsl(65, 19%, 88%)

HSB

hsb(65, 5%, 91%)

CMYK

cmyk(0%, 0%, 5%, 9%)

Oklch

oklch(92.4% 0.015 110.9)

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

#D6DBDE

Sky Blue · LightGray · Sky Blue

HEX

#D6DBDE

RGB

rgb(214, 219, 222)

HSL

hsl(203, 11%, 85%)

HSB

hsb(203, 4%, 87%)

CMYK

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

Oklch

oklch(88.8% 0.007 233.7)

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

#D3FDBD

Emerald · Beige · Mint Green

HEX

#D3FDBD

RGB

rgb(211, 253, 189)

HSL

hsl(99, 94%, 87%)

HSB

hsb(99, 25%, 99%)

CMYK

cmyk(17%, 0%, 25%, 1%)

Oklch

oklch(94.9% 0.095 135.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4F6EC

EFEEF7

Analogous

F7F4EE

F4F6EC

F0F7EE

Triadic

F4F6EC

EEF5F7

F7EEF5

Split-Comp.

F4F6EC

EEF0F7

F4EEF7

Tetradic

F4F6EC

EEF7F4

EFEEF7

F7EEF0

Contrast Matrix WCAG 2.1 Contrast

F4F6EC	EEECEC	E6E7DC	D6DBDE	D3FDBD
—	1.1 Fail	1.1 Fail	1.3 Fail	1.0 Fail
1.1 Fail	—	1.1 Fail	1.2 Fail	1.0 Fail
1.1 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
1.3 Fail	1.2 Fail	1.1 Fail	—	1.2 Fail
1.0 Fail	1.0 Fail	1.1 Fail	1.2 Fail	—

White BG

1.1Fail

1.2Fail

1.4Fail

1.1Fail

Black BG

19.2AAA

17.8AAA

16.8AAA

15.0AAA

18.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F5F5EE

EDEDEC

E6E6DF

D8D8DD

E5E6CC

Deuteranopia

F5F5EF

EDEDEC

E6E6DF

D8D8DD

E3E0D0

Tritanopia

F4F0F1

EEECEC

E6E1E1

D6DDDD

D5D9DB

Achromatopsia

F4F4F4

EDEDED

E5E5E5

DADADA

E9E9E9

Shades & Tints Shades & Tints

#F4F6EC

Dark

Light

#EEECEC

Dark

Light

#E6E7DC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4f6ec;
  --color-2: #eeecec;
  --color-3: #e6e7dc;
  --color-4: #d6dbde;
  --color-5: #d3fdbd;
}

SCSS

$color-1: #f4f6ec;
$color-2: #eeecec;
$color-3: #e6e7dc;
$color-4: #d6dbde;
$color-5: #d3fdbd;

TAILWIND

colors: {
  'brand-1': '#f4f6ec',
  'brand-2': '#eeecec',
  'brand-3': '#e6e7dc',
  'brand-4': '#d6dbde',
  'brand-5': '#d3fdbd',
}

RGB Array

[244, 246, 236], [238, 236, 236], [230, 231, 220], [214, 219, 222], [211, 253, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #F4F6EC, #EEECEC, #E6E7DC, #D6DBDE, #D3FDBD 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: #f4f6ec; --color-2: #eeecec; --color-3: #e6e7dc; --color-4: #d6dbde; --color-5: #d3fdbd. 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 pastel-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