#E3D3B7 + #EDB49F + #F77B86 + #BE6F88 + #706B87 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E3D3B7

Goose Yellow · Wheat · Peach Orange

HEX

#E3D3B7

RGB

rgb(227, 211, 183)

HSL

hsl(38, 44%, 80%)

HSB

hsb(38, 19%, 89%)

CMYK

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

Oklch

oklch(87.3% 0.041 81.7)

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

#EDB49F

Apricot · BurlyWood · Peach Orange

HEX

#EDB49F

RGB

rgb(237, 180, 159)

HSL

hsl(16, 68%, 78%)

HSB

hsb(16, 33%, 93%)

CMYK

cmyk(0%, 24%, 33%, 7%)

Oklch

oklch(81.7% 0.073 41.1)

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

#F77B86

Peach Pink · LightCoral · Coral Red

HEX

#F77B86

RGB

rgb(247, 123, 134)

HSL

hsl(355, 89%, 73%)

HSB

hsb(355, 50%, 97%)

CMYK

cmyk(0%, 50%, 46%, 3%)

Oklch

oklch(72.8% 0.152 16.1)

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

#BE6F88

Dark Violet · LightCoral · Rose Pink

HEX

#BE6F88

RGB

rgb(190, 111, 136)

HSL

hsl(341, 38%, 59%)

HSB

hsb(341, 42%, 75%)

CMYK

cmyk(0%, 42%, 28%, 25%)

Oklch

oklch(63.6% 0.104 0.1)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#706B87

Deep Indigo · SlateGray · Navy Blue

HEX

#706B87

RGB

rgb(112, 107, 135)

HSL

hsl(251, 12%, 47%)

HSB

hsb(251, 21%, 53%)

CMYK

cmyk(17%, 21%, 0%, 47%)

Oklch

oklch(54.3% 0.044 293.1)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E3D3B7

B6C6E2

Analogous

E2BCB6

E3D3B7

DCE2B6

Triadic

E3D3B7

B6E2D2

D2B6E2

Split-Comp.

E3D3B7

B6DCE2

BCB6E2

Tetradic

E3D3B7

B6E2BC

B6C6E2

E2B6DC

Contrast Matrix WCAG 2.1 Contrast

E3D3B7	EDB49F	F77B86	BE6F88	706B87
—	1.2 Fail	1.8 Fail	2.5 Fail	3.4 AA Large
1.2 Fail	—	1.4 Fail	2.0 Fail	2.8 Fail
1.8 Fail	1.4 Fail	—	1.4 Fail	2.0 Fail
2.5 Fail	2.0 Fail	1.4 Fail	—	1.4 Fail
3.4 AA Large	2.8 Fail	2.0 Fail	1.4 Fail	—

White BG

1.5Fail

1.8Fail

2.6Fail

3.6AA Large

5.1AA

Black BG

14.3AAA

11.6AAA

8.1AAA

5.8AA

4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDCBE

D4D4A4

C1C083

9C9B82

6E6E80

Deuteranopia

DDDEBF

D8DCA5

C9D283

A0A681

6E6F7F

Tritanopia

E2C3C4

EAA8A9

F18181

BA7D7C

707B7A

Achromatopsia

D5D5D5

C3C3C3

A1A1A1

898989

707070

Shades & Tints Shades & Tints

#E3D3B7

Dark

Light

#EDB49F

Dark

Light

#F77B86

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e3d3b7;
  --color-2: #edb49f;
  --color-3: #f77b86;
  --color-4: #be6f88;
  --color-5: #706b87;
}

SCSS

$color-1: #e3d3b7;
$color-2: #edb49f;
$color-3: #f77b86;
$color-4: #be6f88;
$color-5: #706b87;

TAILWIND

colors: {
  'brand-1': '#e3d3b7',
  'brand-2': '#edb49f',
  'brand-3': '#f77b86',
  'brand-4': '#be6f88',
  'brand-5': '#706b87',
}

RGB Array

[227, 211, 183], [237, 180, 159], [247, 123, 134], [190, 111, 136], [112, 107, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #E3D3B7, #EDB49F, #F77B86, #BE6F88, #706B87 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: #e3d3b7; --color-2: #edb49f; --color-3: #f77b86; --color-4: #be6f88; --color-5: #706b87. 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 cool-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