← Back to Editor

#E1C469 · #C4B656 · #9EA653 · #726C76 · #524954

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#E1C469

Ginger · BurlyWood · Sunflower

HEX
#E1C469
RGB
rgb(225, 196, 105)
HSL
hsl(46, 67%, 65%)
HSB
hsb(46, 53%, 88%)
CMYK
cmyk(0%, 13%, 53%, 12%)
Oklch
oklch(82.7% 0.116 92.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#C4B656

Autumn Sage · SandyBrown · Sunflower

HEX
#C4B656
RGB
rgb(196, 182, 86)
HSL
hsl(52, 48%, 55%)
HSB
hsb(52, 56%, 77%)
CMYK
cmyk(0%, 7%, 56%, 23%)
Oklch
oklch(76.9% 0.118 101.1)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#9EA653

Autumn Sage · DarkSeaGreen · Honey Gold

HEX
#9EA653
RGB
rgb(158, 166, 83)
HSL
hsl(66, 33%, 49%)
HSB
hsb(66, 50%, 65%)
CMYK
cmyk(5%, 0%, 50%, 35%)
Oklch
oklch(70.1% 0.108 113.7)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#726C76

Ink Gray · DimGray · Warm Gray

HEX
#726C76
RGB
rgb(114, 108, 118)
HSL
hsl(276, 4%, 44%)
HSB
hsb(276, 8%, 46%)
CMYK
cmyk(3%, 8%, 0%, 54%)
Oklch
oklch(54.0% 0.017 312.1)

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

#524954

Ink Gray · DarkSlateGray · Charcoal

HEX
#524954
RGB
rgb(82, 73, 84)
HSL
hsl(289, 7%, 31%)
HSB
hsb(289, 13%, 33%)
CMYK
cmyk(2%, 13%, 0%, 67%)
Oklch
oklch(41.8% 0.021 320.1)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E1C469
6A86E2

Analogous

E28A6A
E1C469
C2E26A

Triadic

E1C469
6AE2C6
C66AE2

Split-Comp.

E1C469
6AC2E2
8A6AE2

Tetradic

E1C469
6AE28A
6A86E2
E26AC2

Contrast Matrix WCAG 2.1 Contrast

E1C469
C4B656
9EA653
726C76
524954
—
1.2
Fail
1.5
Fail
3.0
Fail
5.0
AA
1.2
Fail
—
1.3
Fail
2.5
Fail
4.2
AA Large
1.5
Fail
1.3
Fail
—
1.9
Fail
3.3
AA Large
3.0
Fail
2.5
Fail
1.9
Fail
—
1.7
Fail
5.0
AA
4.2
AA Large
3.3
AA Large
1.7
Fail
—
White BG
1.7Fail
2.1Fail
2.6Fail
5.1AA
8.6AAA
Black BG
12.3AAA
10.2AAA
8.0AAA
4.1AA Large
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D4D47F
BEBE6D
A1A267
6F6F74
4E4E51

Deuteranopia

D6D884
BFC073
A1A06C
707073
4F4F51

Tritanopia

E09094
C38084
9E777A
727271
524F4F

Achromatopsia

C2C2C2
AFAFAF
9A9A9A
6F6F6F
4D4D4D

Shades & Tints Shades & Tints

#E1C469

Dark
Light

#C4B656

Dark
Light

#9EA653

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e1c469;
  --color-2: #c4b656;
  --color-3: #9ea653;
  --color-4: #726c76;
  --color-5: #524954;
}

SCSS

$color-1: #e1c469;
$color-2: #c4b656;
$color-3: #9ea653;
$color-4: #726c76;
$color-5: #524954;

TAILWIND

colors: {
  'brand-1': '#e1c469',
  'brand-2': '#c4b656',
  'brand-3': '#9ea653',
  'brand-4': '#726c76',
  'brand-5': '#524954',
}

RGB Array

[225, 196, 105], [196, 182, 86], [158, 166, 83], [114, 108, 118], [82, 73, 84]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E1C469, #C4B656, #9EA653, #726C76, #524954 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: #e1c469; --color-2: #c4b656; --color-3: #9ea653; --color-4: #726c76; --color-5: #524954. 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