#E3DCC8 + #E3CFAA + #E2C18B + #9FBDA2 + #5BB9B8 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E3DCC8

Goose Yellow · LightGray · Lemon Cream

HEX

#E3DCC8

RGB

rgb(227, 220, 200)

HSL

hsl(44, 33%, 84%)

HSB

hsb(44, 12%, 89%)

CMYK

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

Oklch

oklch(89.5% 0.028 90.9)

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

#E3CFAA

Goose Yellow · Wheat · Peach Orange

HEX

#E3CFAA

RGB

rgb(227, 207, 170)

HSL

hsl(39, 50%, 78%)

HSB

hsb(39, 25%, 89%)

CMYK

cmyk(0%, 9%, 25%, 11%)

Oklch

oklch(86.2% 0.054 82.8)

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

#E2C18B

Goose Yellow · BurlyWood · Warm Sun

HEX

#E2C18B

RGB

rgb(226, 193, 139)

HSL

hsl(37, 60%, 72%)

HSB

hsb(37, 38%, 89%)

CMYK

cmyk(0%, 15%, 38%, 11%)

Oklch

oklch(82.7% 0.080 79.6)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#9FBDA2

Celadon · DarkGray · Apple Green

HEX

#9FBDA2

RGB

rgb(159, 189, 162)

HSL

hsl(126, 19%, 68%)

HSB

hsb(126, 16%, 74%)

CMYK

cmyk(16%, 0%, 14%, 26%)

Oklch

oklch(76.8% 0.050 147.8)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#5BB9B8

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#5BB9B8

RGB

rgb(91, 185, 184)

HSL

hsl(179, 40%, 54%)

HSB

hsb(179, 51%, 73%)

CMYK

cmyk(51%, 0%, 1%, 27%)

Oklch

oklch(72.9% 0.089 194.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E3DCC8

C9D0E4

Analogous

E4CFC9

E3DCC8

DDE4C9

Triadic

E3DCC8

C9E4DC

DCC9E4

Split-Comp.

E3DCC8

C9DDE4

CFC9E4

Tetradic

E3DCC8

C9E4CF

C9D0E4

E4C9DD

Contrast Matrix WCAG 2.1 Contrast

E3DCC8	E3CFAA	E2C18B	9FBDA2	5BB9B8
—	1.1 Fail	1.3 Fail	1.5 Fail	1.7 Fail
1.1 Fail	—	1.1 Fail	1.3 Fail	1.5 Fail
1.3 Fail	1.1 Fail	—	1.2 Fail	1.3 Fail
1.5 Fail	1.3 Fail	1.2 Fail	—	1.1 Fail
1.7 Fail	1.5 Fail	1.3 Fail	1.1 Fail	—

White BG

1.4Fail

1.5Fail

1.7Fail

2.0Fail

2.3Fail

Black BG

15.3AAA

13.8AAA

12.2AAA

10.3AAA

9.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E0CD

DADAB3

D4D398

ACACA9

8485B8

Deuteranopia

E0E1CE

DCDDB5

D6D89B

AAA8AA

7E77B8

Tritanopia

E3D1D2

E2BABC

E0A2A5

A0AEAF

60B8B8

Achromatopsia

DCDCDC

D1D1D1

C5C5C5

B1B1B1

9D9D9D

Shades & Tints Shades & Tints

#E3DCC8

Dark

Light

#E3CFAA

Dark

Light

#E2C18B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e3dcc8;
  --color-2: #e3cfaa;
  --color-3: #e2c18b;
  --color-4: #9fbda2;
  --color-5: #5bb9b8;
}

SCSS

$color-1: #e3dcc8;
$color-2: #e3cfaa;
$color-3: #e2c18b;
$color-4: #9fbda2;
$color-5: #5bb9b8;

TAILWIND

colors: {
  'brand-1': '#e3dcc8',
  'brand-2': '#e3cfaa',
  'brand-3': '#e2c18b',
  'brand-4': '#9fbda2',
  'brand-5': '#5bb9b8',
}

RGB Array

[227, 220, 200], [227, 207, 170], [226, 193, 139], [159, 189, 162], [91, 185, 184]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E3DCC8, #E3CFAA, #E2C18B, #9FBDA2, #5BB9B8 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: #e3dcc8; --color-2: #e3cfaa; --color-3: #e2c18b; --color-4: #9fbda2; --color-5: #5bb9b8. 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