#E7EBC8 + #4F8B95 + #DE8589 + #F7B59D + #F4D6BA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E7EBC8

Fresh Green · Bisque · Lemon Cream

HEX

#E7EBC8

RGB

rgb(231, 235, 200)

HSL

hsl(67, 47%, 85%)

HSB

hsb(67, 15%, 92%)

CMYK

cmyk(2%, 0%, 15%, 8%)

Oklch

oklch(92.8% 0.046 112.6)

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

#4F8B95

Slate Blue · CadetBlue · Mint Ice

HEX

#4F8B95

RGB

rgb(79, 139, 149)

HSL

hsl(189, 31%, 45%)

HSB

hsb(189, 47%, 58%)

CMYK

cmyk(47%, 7%, 0%, 42%)

Oklch

oklch(60.0% 0.064 209.3)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#DE8589

Peach Pink · LightCoral · Coral Red

HEX

#DE8589

RGB

rgb(222, 133, 137)

HSL

hsl(357, 57%, 70%)

HSB

hsb(357, 40%, 87%)

CMYK

cmyk(0%, 40%, 38%, 13%)

Oklch

oklch(71.2% 0.110 17.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#F7B59D

Apricot · BurlyWood · Peach Orange

HEX

#F7B59D

RGB

rgb(247, 181, 157)

HSL

hsl(16, 85%, 79%)

HSB

hsb(16, 36%, 97%)

CMYK

cmyk(0%, 27%, 36%, 3%)

Oklch

oklch(82.8% 0.084 40.8)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#F4D6BA

Apricot · Wheat · Peach Orange

HEX

#F4D6BA

RGB

rgb(244, 214, 186)

HSL

hsl(29, 73%, 84%)

HSB

hsb(29, 24%, 96%)

CMYK

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

Oklch

oklch(89.4% 0.050 65.2)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E7EBC8

CBC7EB

Analogous

EBDDC7

E7EBC8

D5EBC7

Triadic

E7EBC8

C7E7EB

EBC7E7

Split-Comp.

E7EBC8

C7D5EB

DDC7EB

Tetradic

E7EBC8

C7EBDD

CBC7EB

EBC7D5

Contrast Matrix WCAG 2.1 Contrast

E7EBC8	4F8B95	DE8589	F7B59D	F4D6BA
—	3.1 AA Large	2.2 Fail	1.4 Fail	1.1 Fail
3.1 AA Large	—	1.4 Fail	2.2 Fail	2.8 Fail
2.2 Fail	1.4 Fail	—	1.5 Fail	1.9 Fail
1.4 Fail	2.2 Fail	1.5 Fail	—	1.3 Fail
1.1 Fail	2.8 Fail	1.9 Fail	1.3 Fail	—

White BG

1.2Fail

3.8AA Large

2.7Fail

1.7Fail

1.4Fail

Black BG

17.1AAA

5.5AA

7.8AAA

12.1AAA

15.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E9E9D0

696A93

B7B788

DADAA3

E7E7C1

Deuteranopia

E9E8D3

666192

BDC388

DEE3A4

E9EBC2

Tritanopia

E7D7D9

529190

DA8787

F4A7A8

F2C6C7

Achromatopsia

E6E6E6

7A7A7A

A0A0A0

C6C6C6

DCDCDC

Shades & Tints Shades & Tints

#E7EBC8

Dark

Light

#4F8B95

Dark

Light

#DE8589

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e7ebc8;
  --color-2: #4f8b95;
  --color-3: #de8589;
  --color-4: #f7b59d;
  --color-5: #f4d6ba;
}

SCSS

$color-1: #e7ebc8;
$color-2: #4f8b95;
$color-3: #de8589;
$color-4: #f7b59d;
$color-5: #f4d6ba;

TAILWIND

colors: {
  'brand-1': '#e7ebc8',
  'brand-2': '#4f8b95',
  'brand-3': '#de8589',
  'brand-4': '#f7b59d',
  'brand-5': '#f4d6ba',
}

RGB Array

[231, 235, 200], [79, 139, 149], [222, 133, 137], [247, 181, 157], [244, 214, 186]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E7EBC8, #4F8B95, #DE8589, #F7B59D, #F4D6BA 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: #e7ebc8; --color-2: #4f8b95; --color-3: #de8589; --color-4: #f7b59d; --color-5: #f4d6ba. 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