← Back to Editor

#E7C525 · #C0AC29 · #3E3234 · #717197 · #AD9D8E

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 Library

Color Details Color Details

#E7C525

Ginger · GoldenRod · Sunflower

HEX
#E7C525
RGB
rgb(231, 197, 37)
HSL
hsl(49, 80%, 53%)
HSB
hsb(49, 84%, 91%)
CMYK
cmyk(0%, 15%, 84%, 9%)
Oklch
oklch(82.9% 0.163 95.7)

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

#C0AC29

Autumn Sage · GoldenRod · Honey Gold

HEX
#C0AC29
RGB
rgb(192, 172, 41)
HSL
hsl(52, 65%, 46%)
HSB
hsb(52, 79%, 75%)
CMYK
cmyk(0%, 10%, 79%, 25%)
Oklch
oklch(74.0% 0.142 100.0)

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

#3E3234

Crimson · DarkSlateGray · Wine Red

HEX
#3E3234
RGB
rgb(62, 50, 52)
HSL
hsl(350, 11%, 22%)
HSB
hsb(350, 19%, 24%)
CMYK
cmyk(0%, 19%, 16%, 76%)
Oklch
oklch(33.1% 0.018 6.8)

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

#717197

Deep Indigo · SlateGray · Navy Blue

HEX
#717197
RGB
rgb(113, 113, 151)
HSL
hsl(240, 15%, 52%)
HSB
hsb(240, 25%, 59%)
CMYK
cmyk(25%, 25%, 0%, 41%)
Oklch
oklch(56.3% 0.058 284.4)

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

#AD9D8E

Apricot · DarkGray · Warm Sun

HEX
#AD9D8E
RGB
rgb(173, 157, 142)
HSL
hsl(29, 16%, 62%)
HSB
hsb(29, 18%, 68%)
CMYK
cmyk(0%, 9%, 18%, 32%)
Oklch
oklch(70.6% 0.028 65.5)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E7C525
274AE7

Analogous

E76427
E7C525
AAE727

Triadic

E7C525
27E7C4
C427E7

Split-Comp.

E7C525
27AAE7
6427E7

Tetradic

E7C525
27E764
274AE7
E727AA

Contrast Matrix WCAG 2.1 Contrast

E7C525
C0AC29
3E3234
717197
AD9D8E
—
1.4
Fail
7.3
AAA
2.8
Fail
1.6
Fail
1.4
Fail
—
5.4
AA
2.0
Fail
1.1
Fail
7.3
AAA
5.4
AA
—
2.6
Fail
4.7
AA
2.8
Fail
2.0
Fail
2.6
Fail
—
1.8
Fail
1.6
Fail
1.1
Fail
4.7
AA
1.8
Fail
—
White BG
1.7Fail
2.3Fail
12.3AAA
4.7AA
2.6Fail
Black BG
12.4AAA
9.2AAA
1.7Fail
4.5AA
8.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D8D84C
B7B749
393934
71718E
A6A692

Deuteranopia

DADD55
B9BA50
3A3A33
71718C
A7A893

Tritanopia

E56A71
BF6267
3D3333
718785
AC9495

Achromatopsia

BDBDBD
A3A3A3
363636
757575
A0A0A0

Shades & Tints Shades & Tints

#E7C525

Dark
Light

#C0AC29

Dark
Light

#3E3234

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e7c525;
  --color-2: #c0ac29;
  --color-3: #3e3234;
  --color-4: #717197;
  --color-5: #ad9d8e;
}

SCSS

$color-1: #e7c525;
$color-2: #c0ac29;
$color-3: #3e3234;
$color-4: #717197;
$color-5: #ad9d8e;

TAILWIND

colors: {
  'brand-1': '#e7c525',
  'brand-2': '#c0ac29',
  'brand-3': '#3e3234',
  'brand-4': '#717197',
  'brand-5': '#ad9d8e',
}

RGB Array

[231, 197, 37], [192, 172, 41], [62, 50, 52], [113, 113, 151], [173, 157, 142]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E7C525, #C0AC29, #3E3234, #717197, #AD9D8E 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: #e7c525; --color-2: #c0ac29; --color-3: #3e3234; --color-4: #717197; --color-5: #ad9d8e. 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