#F4E5CE + #E3D8B8 + #FDB3A6 + #7AB3AD + #8B7E6E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F4E5CE

Goose Yellow · Bisque · Peach Orange

HEX

#F4E5CE

RGB

rgb(244, 229, 206)

HSL

hsl(36, 63%, 88%)

HSB

hsb(36, 16%, 96%)

CMYK

cmyk(0%, 6%, 16%, 4%)

Oklch

oklch(92.8% 0.035 78.7)

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

#E3D8B8

Goose Yellow · Wheat · Lemon Cream

HEX

#E3D8B8

RGB

rgb(227, 216, 184)

HSL

hsl(45, 43%, 81%)

HSB

hsb(45, 19%, 89%)

CMYK

cmyk(0%, 5%, 19%, 11%)

Oklch

oklch(88.3% 0.044 91.3)

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

#FDB3A6

Peach Pink · LightPink · Cherry Blossom

HEX

#FDB3A6

RGB

rgb(253, 179, 166)

HSL

hsl(9, 96%, 82%)

HSB

hsb(9, 34%, 99%)

CMYK

cmyk(0%, 29%, 34%, 1%)

Oklch

oklch(83.3% 0.089 30.2)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#7AB3AD

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#7AB3AD

RGB

rgb(122, 179, 173)

HSL

hsl(174, 27%, 59%)

HSB

hsb(174, 32%, 70%)

CMYK

cmyk(32%, 0%, 3%, 30%)

Oklch

oklch(72.6% 0.060 187.7)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#8B7E6E

Ochre · Gray · Amber Brown

HEX

#8B7E6E

RGB

rgb(139, 126, 110)

HSL

hsl(33, 12%, 49%)

HSB

hsb(33, 21%, 55%)

CMYK

cmyk(0%, 9%, 21%, 45%)

Oklch

oklch(60.0% 0.028 73.0)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4E5CE

CDDDF4

Analogous

F4D1CD

F4E5CE

F0F4CD

Triadic

F4E5CE

CDF4E4

E4CDF4

Split-Comp.

F4E5CE

CDF0F4

D1CDF4

Tetradic

F4E5CE

CDF4D1

CDDDF4

F4CDF0

Contrast Matrix WCAG 2.1 Contrast

F4E5CE	E3D8B8	FDB3A6	7AB3AD	8B7E6E
—	1.1 Fail	1.4 Fail	1.9 Fail	3.2 AA Large
1.1 Fail	—	1.2 Fail	1.7 Fail	2.8 Fail
1.4 Fail	1.2 Fail	—	1.4 Fail	2.3 Fail
1.9 Fail	1.7 Fail	1.4 Fail	—	1.7 Fail
3.2 AA Large	2.8 Fail	2.3 Fail	1.7 Fail	—

White BG

1.2Fail

1.4Fail

1.7Fail

2.4Fail

4.0AA Large

Black BG

16.9AAA

14.8AAA

12.2AAA

8.9AAA

5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EEEDD4

DEDEC0

DDDCA9

9393AE

858572

Deuteranopia

EEF0D5

DFE0C2

E1E7AA

8F8BAF

868773

Tritanopia

F3D8D9

E2C6C7

F9ACAC

7DB0B0

8A7576

Achromatopsia

E7E7E7

D8D8D8

C8C8C8

A1A1A1

808080

Shades & Tints Shades & Tints

#F4E5CE

Dark

Light

#E3D8B8

Dark

Light

#FDB3A6

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4e5ce;
  --color-2: #e3d8b8;
  --color-3: #fdb3a6;
  --color-4: #7ab3ad;
  --color-5: #8b7e6e;
}

SCSS

$color-1: #f4e5ce;
$color-2: #e3d8b8;
$color-3: #fdb3a6;
$color-4: #7ab3ad;
$color-5: #8b7e6e;

TAILWIND

colors: {
  'brand-1': '#f4e5ce',
  'brand-2': '#e3d8b8',
  'brand-3': '#fdb3a6',
  'brand-4': '#7ab3ad',
  'brand-5': '#8b7e6e',
}

RGB Array

[244, 229, 206], [227, 216, 184], [253, 179, 166], [122, 179, 173], [139, 126, 110]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4E5CE, #E3D8B8, #FDB3A6, #7AB3AD, #8B7E6E 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: #f4e5ce; --color-2: #e3d8b8; --color-3: #fdb3a6; --color-4: #7ab3ad; --color-5: #8b7e6e. 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