#E8E3D5 + #7FB0AB + #C44531 + #C46A31 + #C4A431 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#E8E3D5

Goose Yellow · Beige · Lemon Cream

HEX

#E8E3D5

RGB

rgb(232, 227, 213)

HSL

hsl(44, 29%, 87%)

HSB

hsb(44, 8%, 91%)

CMYK

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

Oklch

oklch(91.6% 0.019 90.5)

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

#7FB0AB

Mineral Blue · DarkSeaGreen · Lake Green

HEX

#7FB0AB

RGB

rgb(127, 176, 171)

HSL

hsl(174, 24%, 59%)

HSB

hsb(174, 28%, 69%)

CMYK

cmyk(28%, 0%, 3%, 31%)

Oklch

oklch(72.1% 0.052 188.2)

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

#C44531

Crimson · Sienna · Passion Red

HEX

#C44531

RGB

rgb(196, 69, 49)

HSL

hsl(8, 60%, 48%)

HSB

hsb(8, 75%, 77%)

CMYK

cmyk(0%, 65%, 75%, 23%)

Oklch

oklch(56.4% 0.166 31.5)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#C46A31

Tangerine · Chocolate · Amber Brown

HEX

#C46A31

RGB

rgb(196, 106, 49)

HSL

hsl(23, 60%, 48%)

HSB

hsb(23, 75%, 77%)

CMYK

cmyk(0%, 46%, 75%, 23%)

Oklch

oklch(61.8% 0.134 50.1)

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

#C4A431

Ochre · GoldenRod · Honey Gold

HEX

#C4A431

RGB

rgb(196, 164, 49)

HSL

hsl(47, 60%, 48%)

HSB

hsb(47, 75%, 77%)

CMYK

cmyk(0%, 16%, 75%, 23%)

Oklch

oklch(72.8% 0.133 92.7)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E8E3D5

D4D9E7

Analogous

E7D9D4

E8E3D5

E3E7D4

Triadic

E8E3D5

D4E7E2

E2D4E7

Split-Comp.

E8E3D5

D4E3E7

D9D4E7

Tetradic

E8E3D5

D4E7D9

D4D9E7

E7D4E3

Contrast Matrix WCAG 2.1 Contrast

E8E3D5	7FB0AB	C44531	C46A31	C4A431
—	1.9 Fail	3.9 AA Large	3.0 AA Large	1.9 Fail
1.9 Fail	—	2.1 Fail	1.6 Fail	1.0 Fail
3.9 AA Large	2.1 Fail	—	1.3 Fail	2.1 Fail
3.0 AA Large	1.6 Fail	1.3 Fail	—	1.6 Fail
1.9 Fail	1.0 Fail	2.1 Fail	1.6 Fail	—

White BG

1.3Fail

2.4Fail

4.9AA

3.9AA Large

2.4Fail

Black BG

16.4AAA

8.7AAA

4.2AA Large

5.5AA

8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E6E6D8

9495AC

8D8C36

9D9C3F

B6B64D

Deuteranopia

E6E6D9

918EAD

949E37

A2A942

B8BA54

Tritanopia

E8DBDC

81ADAD

BE3A3B

C04A4C

C26368

Achromatopsia

E3E3E3

A1A1A1

696969

7E7E7E

A0A0A0

Shades & Tints Shades & Tints

#E8E3D5

Dark

Light

#7FB0AB

Dark

Light

#C44531

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e8e3d5;
  --color-2: #7fb0ab;
  --color-3: #c44531;
  --color-4: #c46a31;
  --color-5: #c4a431;
}

SCSS

$color-1: #e8e3d5;
$color-2: #7fb0ab;
$color-3: #c44531;
$color-4: #c46a31;
$color-5: #c4a431;

TAILWIND

colors: {
  'brand-1': '#e8e3d5',
  'brand-2': '#7fb0ab',
  'brand-3': '#c44531',
  'brand-4': '#c46a31',
  'brand-5': '#c4a431',
}

RGB Array

[232, 227, 213], [127, 176, 171], [196, 69, 49], [196, 106, 49], [196, 164, 49]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E8E3D5, #7FB0AB, #C44531, #C46A31, #C4A431 is ideal for: corporate websites, product showcases, portfolios. 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: #e8e3d5; --color-2: #7fb0ab; --color-3: #c44531; --color-4: #c46a31; --color-5: #c4a431. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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