← Back to Editor

#E7D684 · #CFB45B · #A49E50 · #635457 · #61464B

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

#E7D684

Fresh Green · Khaki · Sunflower

HEX
#E7D684
RGB
rgb(231, 214, 132)
HSL
hsl(50, 67%, 71%)
HSB
hsb(50, 43%, 91%)
CMYK
cmyk(0%, 7%, 43%, 9%)
Oklch
oklch(87.2% 0.104 97.9)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#CFB45B

Ginger · SandyBrown · Sunflower

HEX
#CFB45B
RGB
rgb(207, 180, 91)
HSL
hsl(46, 55%, 58%)
HSB
hsb(46, 56%, 81%)
CMYK
cmyk(0%, 13%, 56%, 19%)
Oklch
oklch(77.5% 0.113 92.7)

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

#A49E50

Autumn Sage · Gray · Honey Gold

HEX
#A49E50
RGB
rgb(164, 158, 80)
HSL
hsl(56, 34%, 48%)
HSB
hsb(56, 51%, 64%)
CMYK
cmyk(0%, 4%, 51%, 36%)
Oklch
oklch(68.8% 0.101 104.8)

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

#635457

Crimson · DimGray · Charcoal

HEX
#635457
RGB
rgb(99, 84, 87)
HSL
hsl(348, 8%, 36%)
HSB
hsb(348, 15%, 39%)
CMYK
cmyk(0%, 15%, 12%, 61%)
Oklch
oklch(46.2% 0.020 4.4)

Traditional「Crimson」· Paint「Charcoal」· Creative Midnight Shadow

#61464B

Crimson · DimGray · Wine Red

HEX
#61464B
RGB
rgb(97, 70, 75)
HSL
hsl(349, 16%, 33%)
HSB
hsb(349, 28%, 38%)
CMYK
cmyk(0%, 28%, 23%, 62%)
Oklch
oklch(42.5% 0.038 6.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E7D684
8494E7

Analogous

E7A584
E7D684
C6E784

Triadic

E7D684
84E7D6
D684E7

Split-Comp.

E7D684
84C6E7
A584E7

Tetradic

E7D684
84E7A5
8494E7
E784C6

Contrast Matrix WCAG 2.1 Contrast

E7D684
CFB45B
A49E50
635457
61464B
—
1.4
Fail
1.9
Fail
4.9
AA
5.8
AA
1.4
Fail
—
1.4
Fail
3.5
AA Large
4.2
AA Large
1.9
Fail
1.4
Fail
—
2.6
Fail
3.1
AA Large
4.9
AA
3.5
AA Large
2.6
Fail
—
1.2
Fail
5.8
AA
4.2
AA Large
3.1
AA Large
1.2
Fail
—
White BG
1.5Fail
2.0Fail
2.8Fail
7.2AAA
8.4AAA
Black BG
14.3AAA
10.3AAA
7.6AAA
2.9Fail
2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0DF98
C3C371
A1A163
5D5C56
55554A

Deuteranopia

E1E29D
C5C776
A2A267
5D5F56
57594A

Tritanopia

E6A8AB
CE8285
A47275
625656
604949

Achromatopsia

D2D2D2
B2B2B2
979797
595959
4F4F4F

Shades & Tints Shades & Tints

#E7D684

Dark
Light

#CFB45B

Dark
Light

#A49E50

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e7d684;
  --color-2: #cfb45b;
  --color-3: #a49e50;
  --color-4: #635457;
  --color-5: #61464b;
}

SCSS

$color-1: #e7d684;
$color-2: #cfb45b;
$color-3: #a49e50;
$color-4: #635457;
$color-5: #61464b;

TAILWIND

colors: {
  'brand-1': '#e7d684',
  'brand-2': '#cfb45b',
  'brand-3': '#a49e50',
  'brand-4': '#635457',
  'brand-5': '#61464b',
}

RGB Array

[231, 214, 132], [207, 180, 91], [164, 158, 80], [99, 84, 87], [97, 70, 75]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E7D684, #CFB45B, #A49E50, #635457, #61464B 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: #e7d684; --color-2: #cfb45b; --color-3: #a49e50; --color-4: #635457; --color-5: #61464b. 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