#FDF1D9 + #EFF5E9 + #B6A7AA + #DDC2C9 + #D9DDE0 · muted - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FDF1D9

Goose Yellow · Beige · Lemon Cream

HEX

#FDF1D9

RGB

rgb(253, 241, 217)

HSL

hsl(40, 90%, 92%)

HSB

hsb(40, 14%, 99%)

CMYK

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

Oklch

oklch(96.1% 0.034 84.6)

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

#EFF5E9

Celadon · Linen · Mint Green

HEX

#EFF5E9

RGB

rgb(239, 245, 233)

HSL

hsl(90, 38%, 94%)

HSB

hsb(90, 5%, 96%)

CMYK

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

Oklch

oklch(96.2% 0.017 128.7)

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

#B6A7AA

Peach Pink · DarkGray · Silver Sand

HEX

#B6A7AA

RGB

rgb(182, 167, 170)

HSL

hsl(348, 9%, 68%)

HSB

hsb(348, 8%, 71%)

CMYK

cmyk(0%, 8%, 7%, 29%)

Oklch

oklch(74.2% 0.018 3.8)

Traditional「Peach Pink」· Paint「Silver Sand」· Creative Urban Concrete

#DDC2C9

Rouge · LightGray · Cherry Blossom

HEX

#DDC2C9

RGB

rgb(221, 194, 201)

HSL

hsl(344, 28%, 81%)

HSB

hsb(344, 12%, 87%)

CMYK

cmyk(0%, 12%, 9%, 13%)

Oklch

oklch(83.9% 0.032 0.3)

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

#D9DDE0

Sky Blue · LightGray · Sky Blue

HEX

#D9DDE0

RGB

rgb(217, 221, 224)

HSL

hsl(206, 10%, 86%)

HSB

hsb(206, 3%, 88%)

CMYK

cmyk(3%, 1%, 0%, 12%)

Oklch

oklch(89.5% 0.006 239.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FDF1D9

D8E4FD

Analogous

FDDED8

FDF1D9

F7FDD8

Triadic

FDF1D9

D8FDF1

F1D8FD

Split-Comp.

FDF1D9

D8F7FD

DED8FD

Tetradic

FDF1D9

D8FDDE

D8E4FD

FDD8F7

Contrast Matrix WCAG 2.1 Contrast

FDF1D9	EFF5E9	B6A7AA	DDC2C9	D9DDE0
—	1.0 Fail	2.1 Fail	1.5 Fail	1.2 Fail
1.0 Fail	—	2.1 Fail	1.5 Fail	1.2 Fail
2.1 Fail	2.1 Fail	—	1.4 Fail	1.7 Fail
1.5 Fail	1.5 Fail	1.4 Fail	—	1.2 Fail
1.2 Fail	1.2 Fail	1.7 Fail	1.2 Fail	—

White BG

1.1Fail

2.3Fail

1.7Fail

1.4Fail

Black BG

18.8AAA

18.9AAA

9.1AAA

12.6AAA

15.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F8F8DF

F2F2EC

B0AFA9

D1D1C7

DBDBDF

Deuteranopia

F9F9E0

F1F1ED

B0B2A9

D3D5C7

DBDADF

Tritanopia

FCE3E4

EFEEEF

B5A9A9

DCC6C6

D9DFDF

Achromatopsia

F2F2F2

ACACAC

CBCBCB

DCDCDC

Shades & Tints Shades & Tints

#FDF1D9

Dark

Light

#EFF5E9

Dark

Light

#B6A7AA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fdf1d9;
  --color-2: #eff5e9;
  --color-3: #b6a7aa;
  --color-4: #ddc2c9;
  --color-5: #d9dde0;
}

SCSS

$color-1: #fdf1d9;
$color-2: #eff5e9;
$color-3: #b6a7aa;
$color-4: #ddc2c9;
$color-5: #d9dde0;

TAILWIND

colors: {
  'brand-1': '#fdf1d9',
  'brand-2': '#eff5e9',
  'brand-3': '#b6a7aa',
  'brand-4': '#ddc2c9',
  'brand-5': '#d9dde0',
}

RGB Array

[253, 241, 217], [239, 245, 233], [182, 167, 170], [221, 194, 201], [217, 221, 224]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This muted-style palette of #FDF1D9, #EFF5E9, #B6A7AA, #DDC2C9, #D9DDE0 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: #fdf1d9; --color-2: #eff5e9; --color-3: #b6a7aa; --color-4: #ddc2c9; --color-5: #d9dde0. 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