← Back to Editor

#E4CB9E · #AC8478 · #474E57 · #99917C · #747368

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#E4CB9E

Goose Yellow · BurlyWood · Peach Orange

HEX
#E4CB9E
RGB
rgb(228, 203, 158)
HSL
hsl(39, 56%, 76%)
HSB
hsb(39, 31%, 89%)
CMYK
cmyk(0%, 11%, 31%, 11%)
Oklch
oklch(85.2% 0.065 82.1)

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

#AC8478

Crimson · Gray · Passion Red

HEX
#AC8478
RGB
rgb(172, 132, 120)
HSL
hsl(14, 24%, 57%)
HSB
hsb(14, 30%, 67%)
CMYK
cmyk(0%, 23%, 30%, 33%)
Oklch
oklch(64.9% 0.053 37.3)

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

#474E57

Indigo · DarkSlateGray · Prussian Blue

HEX
#474E57
RGB
rgb(71, 78, 87)
HSL
hsl(214, 10%, 31%)
HSB
hsb(214, 18%, 34%)
CMYK
cmyk(18%, 10%, 0%, 66%)
Oklch
oklch(42.1% 0.018 254.7)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#99917C

Ginger · Gray · Sunflower

HEX
#99917C
RGB
rgb(153, 145, 124)
HSL
hsl(43, 12%, 54%)
HSB
hsb(43, 19%, 60%)
CMYK
cmyk(0%, 5%, 19%, 40%)
Oklch
oklch(65.8% 0.032 89.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#747368

Ink Gray · DimGray · Warm Gray

HEX
#747368
RGB
rgb(116, 115, 104)
HSL
hsl(55, 5%, 43%)
HSB
hsb(55, 10%, 45%)
CMYK
cmyk(0%, 1%, 10%, 55%)
Oklch
oklch(55.3% 0.017 102.7)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E4CB9E
A0B8E4

Analogous

E4AAA0
E4CB9E
DAE4A0

Triadic

E4CB9E
A0E4CC
CCA0E4

Split-Comp.

E4CB9E
A0DAE4
AAA0E4

Tetradic

E4CB9E
A0E4AA
A0B8E4
E4A0DA

Contrast Matrix WCAG 2.1 Contrast

E4CB9E
AC8478
474E57
99917C
747368
—
2.1
Fail
5.3
AA
2.0
Fail
3.0
AA Large
2.1
Fail
—
2.5
Fail
1.1
Fail
1.4
Fail
5.3
AA
2.5
Fail
—
2.7
Fail
1.8
Fail
2.0
Fail
1.1
Fail
2.7
Fail
—
1.5
Fail
3.0
AA Large
1.4
Fail
1.8
Fail
1.5
Fail
—
White BG
1.6Fail
3.3AA Large
8.4AAA
3.1AA Large
4.8AA
Black BG
13.3AAA
6.3AA
2.5Fail
6.7AA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D9D9A9
9B9A7B
4A4A55
969581
74746B

Deuteranopia

DBDDAC
9DA07C
4A4954
969782
74746B

Tritanopia

E3B1B3
AA7D7E
475353
998586
746D6D

Achromatopsia

CDCDCD
8F8F8F
4D4D4D
919191
727272

Shades & Tints Shades & Tints

#E4CB9E

Dark
Light

#AC8478

Dark
Light

#474E57

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e4cb9e;
  --color-2: #ac8478;
  --color-3: #474e57;
  --color-4: #99917c;
  --color-5: #747368;
}

SCSS

$color-1: #e4cb9e;
$color-2: #ac8478;
$color-3: #474e57;
$color-4: #99917c;
$color-5: #747368;

TAILWIND

colors: {
  'brand-1': '#e4cb9e',
  'brand-2': '#ac8478',
  'brand-3': '#474e57',
  'brand-4': '#99917c',
  'brand-5': '#747368',
}

RGB Array

[228, 203, 158], [172, 132, 120], [71, 78, 87], [153, 145, 124], [116, 115, 104]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E4CB9E, #AC8478, #474E57, #99917C, #747368 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #e4cb9e; --color-2: #ac8478; --color-3: #474e57; --color-4: #99917c; --color-5: #747368. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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. Restrained colors convey professionalism and trust. 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