#F4F1D7 + #DED8B0 + #D2BB98 + #E1AC94 + #9F9887 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F4F1D7

Fresh Green · Beige · Lemon Cream

HEX

#F4F1D7

RGB

rgb(244, 241, 215)

HSL

hsl(54, 57%, 90%)

HSB

hsb(54, 12%, 96%)

CMYK

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

Oklch

oklch(95.4% 0.034 101.6)

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

#DED8B0

Fresh Green · Wheat · Lemon Cream

HEX

#DED8B0

RGB

rgb(222, 216, 176)

HSL

hsl(52, 41%, 78%)

HSB

hsb(52, 21%, 87%)

CMYK

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

Oklch

oklch(87.7% 0.053 100.3)

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

#D2BB98

Goose Yellow · Tan · Warm Sun

HEX

#D2BB98

RGB

rgb(210, 187, 152)

HSL

hsl(36, 39%, 71%)

HSB

hsb(36, 28%, 82%)

CMYK

cmyk(0%, 11%, 28%, 18%)

Oklch

oklch(80.3% 0.054 78.2)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#E1AC94

Apricot · BurlyWood · Warm Sun

HEX

#E1AC94

RGB

rgb(225, 172, 148)

HSL

hsl(19, 56%, 73%)

HSB

hsb(19, 34%, 88%)

CMYK

cmyk(0%, 24%, 34%, 12%)

Oklch

oklch(78.7% 0.071 45.5)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#9F9887

Ginger · DarkGray · Sunflower

HEX

#9F9887

RGB

rgb(159, 152, 135)

HSL

hsl(42, 11%, 58%)

HSB

hsb(42, 15%, 62%)

CMYK

cmyk(0%, 4%, 15%, 38%)

Oklch

oklch(68.1% 0.026 88.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4F1D7

D7DAF4

Analogous

F4E3D7

F4F1D7

E8F4D7

Triadic

F4F1D7

D7F4F1

F1D7F4

Split-Comp.

F4F1D7

D7E8F4

E3D7F4

Tetradic

F4F1D7

D7F4E3

D7DAF4

F4D7E8

Contrast Matrix WCAG 2.1 Contrast

F4F1D7	DED8B0	D2BB98	E1AC94	9F9887
—	1.3 Fail	1.6 Fail	1.7 Fail	2.5 Fail
1.3 Fail	—	1.3 Fail	1.4 Fail	2.0 Fail
1.6 Fail	1.3 Fail	—	1.1 Fail	1.5 Fail
1.7 Fail	1.4 Fail	1.1 Fail	—	1.4 Fail
2.5 Fail	2.0 Fail	1.5 Fail	1.4 Fail	—

White BG

1.1Fail

1.4Fail

1.9Fail

2.0Fail

2.9Fail

Black BG

18.4AAA

14.6AAA

11.3AAA

10.5AAA

7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F3F3DD

DBDBBA

C8C8A0

CACA9A

9C9C8B

Deuteranopia

F3F3DF

DCDCBC

C9CBA3

CDD19B

9C9D8C

Tritanopia

F4E2E3

DEC1C3

D1A7A9

DE9E9F

9F8E8F

Achromatopsia

EFEFEF

D5D5D5

BEBEBE

B9B9B9

989898

Shades & Tints Shades & Tints

#F4F1D7

Dark

Light

#DED8B0

Dark

Light

#D2BB98

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4f1d7;
  --color-2: #ded8b0;
  --color-3: #d2bb98;
  --color-4: #e1ac94;
  --color-5: #9f9887;
}

SCSS

$color-1: #f4f1d7;
$color-2: #ded8b0;
$color-3: #d2bb98;
$color-4: #e1ac94;
$color-5: #9f9887;

TAILWIND

colors: {
  'brand-1': '#f4f1d7',
  'brand-2': '#ded8b0',
  'brand-3': '#d2bb98',
  'brand-4': '#e1ac94',
  'brand-5': '#9f9887',
}

RGB Array

[244, 241, 215], [222, 216, 176], [210, 187, 152], [225, 172, 148], [159, 152, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4F1D7, #DED8B0, #D2BB98, #E1AC94, #9F9887 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: #f4f1d7; --color-2: #ded8b0; --color-3: #d2bb98; --color-4: #e1ac94; --color-5: #9f9887. 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 general-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