#EFF0F1 + #FAFDFF + #F6F3CA + #DCD1AE + #F4EEC6 · muted - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#EFF0F1

Plain White · Linen · Cloud White

HEX

#EFF0F1

RGB

rgb(239, 240, 241)

HSL

hsl(210, 7%, 94%)

HSB

hsb(210, 1%, 95%)

CMYK

cmyk(1%, 0%, 0%, 5%)

Oklch

oklch(95.5% 0.002 247.8)

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

#FAFDFF

Sky Blue · White · Sky Blue

HEX

#FAFDFF

RGB

rgb(250, 253, 255)

HSL

hsl(204, 100%, 99%)

HSB

hsb(204, 2%, 100%)

CMYK

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

Oklch

oklch(99.2% 0.004 236.5)

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

#F6F3CA

Fresh Green · Beige · Lemon Cream

HEX

#F6F3CA

RGB

rgb(246, 243, 202)

HSL

hsl(56, 71%, 88%)

HSB

hsb(56, 18%, 96%)

CMYK

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

Oklch

oklch(95.6% 0.053 103.9)

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

#DCD1AE

Goose Yellow · Wheat · Lemon Cream

HEX

#DCD1AE

RGB

rgb(220, 209, 174)

HSL

hsl(46, 40%, 77%)

HSB

hsb(46, 21%, 86%)

CMYK

cmyk(0%, 5%, 21%, 14%)

Oklch

oklch(86.1% 0.048 92.6)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#F4EEC6

Fresh Green · Bisque · Lemon Cream

HEX

#F4EEC6

RGB

rgb(244, 238, 198)

HSL

hsl(52, 68%, 87%)

HSB

hsb(52, 19%, 96%)

CMYK

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

Oklch

oklch(94.4% 0.052 100.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EFF0F1

F1F0EF

Analogous

EFF1F1

EFF0F1

EFEFF1

Triadic

EFF0F1

F1EFF0

F0F1EF

Split-Comp.

EFF0F1

F1EFEF

F1F1EF

Tetradic

EFF0F1

F1EFF1

F1F0EF

EFF1EF

Contrast Matrix WCAG 2.1 Contrast

EFF0F1	FAFDFF	F6F3CA	DCD1AE	F4EEC6
—	1.1 Fail	1.0 Fail	1.3 Fail	1.0 Fail
1.1 Fail	—	1.1 Fail	1.5 Fail	1.1 Fail
1.0 Fail	1.1 Fail	—	1.3 Fail	1.0 Fail
1.3 Fail	1.5 Fail	1.3 Fail	—	1.3 Fail
1.0 Fail	1.1 Fail	1.0 Fail	1.3 Fail	—

White BG

1.1Fail

1.0Fail

1.1Fail

1.5Fail

1.2Fail

Black BG

18.4AAA

20.6AAA

18.6AAA

13.8AAA

17.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFEFF1

FBFBFF

F5F5D4

D7D7B6

F1F1D0

Deuteranopia

EFEFF1

FBFBFE

F5F5D6

D8D9B9

F2F2D2

Tritanopia

EFF1F1

FAFEFE

F6DCDD

DBBDBF

F4D7D9

Achromatopsia

F0F0F0

FCFCFC

EFEFEF

D0D0D0

EBEBEB

Shades & Tints Shades & Tints

#EFF0F1

Dark

Light

#FAFDFF

Dark

Light

#F6F3CA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #eff0f1;
  --color-2: #fafdff;
  --color-3: #f6f3ca;
  --color-4: #dcd1ae;
  --color-5: #f4eec6;
}

SCSS

$color-1: #eff0f1;
$color-2: #fafdff;
$color-3: #f6f3ca;
$color-4: #dcd1ae;
$color-5: #f4eec6;

TAILWIND

colors: {
  'brand-1': '#eff0f1',
  'brand-2': '#fafdff',
  'brand-3': '#f6f3ca',
  'brand-4': '#dcd1ae',
  'brand-5': '#f4eec6',
}

RGB Array

[239, 240, 241], [250, 253, 255], [246, 243, 202], [220, 209, 174], [244, 238, 198]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This muted-style palette of #EFF0F1, #FAFDFF, #F6F3CA, #DCD1AE, #F4EEC6 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: #eff0f1; --color-2: #fafdff; --color-3: #f6f3ca; --color-4: #dcd1ae; --color-5: #f4eec6. 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 muted-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