#F8EFDE + #F1E7CC + #EAD6B1 + #AFA075 + #B0B191 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F8EFDE

Goose Yellow · Beige · Peach Orange

HEX

#F8EFDE

RGB

rgb(248, 239, 222)

HSL

hsl(39, 65%, 92%)

HSB

hsb(39, 10%, 97%)

CMYK

cmyk(0%, 4%, 10%, 3%)

Oklch

oklch(95.5% 0.024 83.4)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#F1E7CC

Goose Yellow · Bisque · Lemon Cream

HEX

#F1E7CC

RGB

rgb(241, 231, 204)

HSL

hsl(44, 57%, 87%)

HSB

hsb(44, 15%, 95%)

CMYK

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

Oklch

oklch(92.9% 0.037 90.1)

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

#EAD6B1

Goose Yellow · Wheat · Peach Orange

HEX

#EAD6B1

RGB

rgb(234, 214, 177)

HSL

hsl(39, 58%, 81%)

HSB

hsb(39, 24%, 92%)

CMYK

cmyk(0%, 9%, 24%, 8%)

Oklch

oklch(88.3% 0.054 82.9)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#AFA075

Ginger · Tan · Sunflower

HEX

#AFA075

RGB

rgb(175, 160, 117)

HSL

hsl(44, 27%, 57%)

HSB

hsb(44, 33%, 69%)

CMYK

cmyk(0%, 9%, 33%, 31%)

Oklch

oklch(70.8% 0.061 91.1)

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

#B0B191

Fresh Green · DarkGray · Sunflower

HEX

#B0B191

RGB

rgb(176, 177, 145)

HSL

hsl(62, 17%, 63%)

HSB

hsb(62, 18%, 69%)

CMYK

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

Oklch

oklch(75.1% 0.044 108.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8EFDE

DDE7F8

Analogous

F8E1DD

F8EFDE

F4F8DD

Triadic

F8EFDE

DDF8EF

EFDDF8

Split-Comp.

F8EFDE

DDF4F8

E1DDF8

Tetradic

F8EFDE

DDF8E1

DDE7F8

F8DDF4

Contrast Matrix WCAG 2.1 Contrast

F8EFDE	F1E7CC	EAD6B1	AFA075	B0B191
—	1.1 Fail	1.2 Fail	2.3 Fail	1.9 Fail
1.1 Fail	—	1.2 Fail	2.1 Fail	1.8 Fail
1.2 Fail	1.2 Fail	—	1.8 Fail	1.5 Fail
2.3 Fail	2.1 Fail	1.8 Fail	—	1.2 Fail
1.9 Fail	1.8 Fail	1.5 Fail	1.2 Fail	—

White BG

1.1Fail

1.2Fail

1.4Fail

2.6Fail

2.2Fail

Black BG

18.4AAA

17.0AAA

14.8AAA

8.1AAA

9.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F4F4E2

EDEDD3

E1E1BA

A9A87F

B0B099

Deuteranopia

F5F5E3

EDEED4

E3E4BC

A9AB82

B0B09B

Tritanopia

F8E5E6

F1D8D9

E9C1C3

AE8889

B09FA0

Achromatopsia

F0F0F0

E7E7E7

D8D8D8

A0A0A0

ADADAD

Shades & Tints Shades & Tints

#F8EFDE

Dark

Light

#F1E7CC

Dark

Light

#EAD6B1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8efde;
  --color-2: #f1e7cc;
  --color-3: #ead6b1;
  --color-4: #afa075;
  --color-5: #b0b191;
}

SCSS

$color-1: #f8efde;
$color-2: #f1e7cc;
$color-3: #ead6b1;
$color-4: #afa075;
$color-5: #b0b191;

TAILWIND

colors: {
  'brand-1': '#f8efde',
  'brand-2': '#f1e7cc',
  'brand-3': '#ead6b1',
  'brand-4': '#afa075',
  'brand-5': '#b0b191',
}

RGB Array

[248, 239, 222], [241, 231, 204], [234, 214, 177], [175, 160, 117], [176, 177, 145]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F8EFDE, #F1E7CC, #EAD6B1, #AFA075, #B0B191 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: #f8efde; --color-2: #f1e7cc; --color-3: #ead6b1; --color-4: #afa075; --color-5: #b0b191. 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