#FFF3DB + #EFEBD2 + #E2D9C7 + #C7C4BD + #9E9C98 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFF3DB

Goose Yellow · Beige · Lemon Cream

HEX

#FFF3DB

RGB

rgb(255, 243, 219)

HSL

hsl(40, 100%, 93%)

HSB

hsb(40, 14%, 100%)

CMYK

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

Oklch

oklch(96.7% 0.034 84.6)

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

#EFEBD2

Fresh Green · Beige · Lemon Cream

HEX

#EFEBD2

RGB

rgb(239, 235, 210)

HSL

hsl(52, 48%, 88%)

HSB

hsb(52, 12%, 94%)

CMYK

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

Oklch

oklch(93.7% 0.033 99.6)

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

#E2D9C7

Goose Yellow · LightGray · Lemon Cream

HEX

#E2D9C7

RGB

rgb(226, 217, 199)

HSL

hsl(40, 32%, 83%)

HSB

hsb(40, 12%, 89%)

CMYK

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

Oklch

oklch(88.8% 0.026 84.6)

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

#C7C4BD

Goose Yellow · Silver · Pearl Gray

HEX

#C7C4BD

RGB

rgb(199, 196, 189)

HSL

hsl(42, 8%, 76%)

HSB

hsb(42, 5%, 78%)

CMYK

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

Oklch

oklch(82.1% 0.010 87.5)

Traditional「Goose Yellow」· Paint「Pearl Gray」· Creative Silver Lining

#9E9C98

Ash · DarkGray · Silver Sand

HEX

#9E9C98

RGB

rgb(158, 156, 152)

HSL

hsl(40, 3%, 61%)

HSB

hsb(40, 4%, 62%)

CMYK

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

Oklch

oklch(69.3% 0.006 84.6)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF3DB

DBE7FF

Analogous

FFE1DB

FFF3DB

F9FFDB

Triadic

FFF3DB

DBFFF3

F3DBFF

Split-Comp.

FFF3DB

DBF9FF

E1DBFF

Tetradic

FFF3DB

DBFFE1

DBE7FF

FFDBF9

Contrast Matrix WCAG 2.1 Contrast

FFF3DB	EFEBD2	E2D9C7	C7C4BD	9E9C98
—	1.1 Fail	1.3 Fail	1.6 Fail	2.5 Fail
1.1 Fail	—	1.2 Fail	1.4 Fail	2.3 Fail
1.3 Fail	1.2 Fail	—	1.2 Fail	2.0 Fail
1.6 Fail	1.4 Fail	1.2 Fail	—	1.6 Fail
2.5 Fail	2.3 Fail	2.0 Fail	1.6 Fail	—

White BG

1.1Fail

1.2Fail

1.4Fail

1.7Fail

2.7Fail

Black BG

19.1AAA

17.5AAA

15.0AAA

12.1AAA

7.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FAFAE1

EDEDD8

DEDECB

C6C6BF

9D9D99

Deuteranopia

FBFBE2

EEEEDA

DFDFCC

C6C6BF

9D9D99

Tritanopia

FEE5E6

EFDDDE

E2CFD0

C7C0C0

9E9A9A

Achromatopsia

F4F4F4

E9E9E9

DADADA

C4C4C4

9C9C9C

Shades & Tints Shades & Tints

#FFF3DB

Dark

Light

#EFEBD2

Dark

Light

#E2D9C7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff3db;
  --color-2: #efebd2;
  --color-3: #e2d9c7;
  --color-4: #c7c4bd;
  --color-5: #9e9c98;
}

SCSS

$color-1: #fff3db;
$color-2: #efebd2;
$color-3: #e2d9c7;
$color-4: #c7c4bd;
$color-5: #9e9c98;

TAILWIND

colors: {
  'brand-1': '#fff3db',
  'brand-2': '#efebd2',
  'brand-3': '#e2d9c7',
  'brand-4': '#c7c4bd',
  'brand-5': '#9e9c98',
}

RGB Array

[255, 243, 219], [239, 235, 210], [226, 217, 199], [199, 196, 189], [158, 156, 152]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFF3DB, #EFEBD2, #E2D9C7, #C7C4BD, #9E9C98 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: #fff3db; --color-2: #efebd2; --color-3: #e2d9c7; --color-4: #c7c4bd; --color-5: #9e9c98. 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