← Back to Editor

#9EA6CA · #7D8085 · #A8984B · #DFC453 · #EAE2A4

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

#9EA6CA

Azure · DarkGray · Cobalt Blue

HEX
#9EA6CA
RGB
rgb(158, 166, 202)
HSL
hsl(229, 29%, 71%)
HSB
hsb(229, 22%, 79%)
CMYK
cmyk(22%, 18%, 0%, 21%)
Oklch
oklch(73.1% 0.053 275.2)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#7D8085

Ash · Gray · Warm Gray

HEX
#7D8085
RGB
rgb(125, 128, 133)
HSL
hsl(218, 3%, 51%)
HSB
hsb(218, 6%, 52%)
CMYK
cmyk(6%, 4%, 0%, 48%)
Oklch
oklch(59.9% 0.008 260.7)

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

#A8984B

Autumn Sage · GoldenRod · Honey Gold

HEX
#A8984B
RGB
rgb(168, 152, 75)
HSL
hsl(50, 38%, 48%)
HSB
hsb(50, 55%, 66%)
CMYK
cmyk(0%, 10%, 55%, 34%)
Oklch
oklch(67.7% 0.100 97.8)

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

#DFC453

Ginger · SandyBrown · Sunflower

HEX
#DFC453
RGB
rgb(223, 196, 83)
HSL
hsl(48, 69%, 60%)
HSB
hsb(48, 63%, 87%)
CMYK
cmyk(0%, 12%, 63%, 13%)
Oklch
oklch(82.2% 0.135 95.8)

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

#EAE2A4

Fresh Green · Wheat · Lemon Cream

HEX
#EAE2A4
RGB
rgb(234, 226, 164)
HSL
hsl(53, 62%, 78%)
HSB
hsb(53, 30%, 92%)
CMYK
cmyk(0%, 3%, 30%, 8%)
Oklch
oklch(90.5% 0.080 101.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9EA6CA
CAC3A0

Analogous

A0BDCA
9EA6CA
ADA0CA

Triadic

9EA6CA
CAA0A7
A7CAA0

Split-Comp.

9EA6CA
CAADA0
BDCAA0

Tetradic

9EA6CA
CAA0BD
CAC3A0
A0CAAD

Contrast Matrix WCAG 2.1 Contrast

9EA6CA
7D8085
A8984B
DFC453
EAE2A4
—
1.7
Fail
1.2
Fail
1.4
Fail
1.8
Fail
1.7
Fail
—
1.4
Fail
2.3
Fail
3.0
AA Large
1.2
Fail
1.4
Fail
—
1.7
Fail
2.2
Fail
1.4
Fail
2.3
Fail
1.7
Fail
—
1.3
Fail
1.8
Fail
3.0
AA Large
2.2
Fail
1.3
Fail
—
White BG
2.4Fail
4.0AA Large
2.9Fail
1.7Fail
1.3Fail
Black BG
8.8AAA
5.3AA
7.3AAA
12.2AAA
15.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A1A2C1
7E7E84
A1A15E
D3D36E
E7E6B3

Deuteranopia

A1A0BF
7E7E84
A2A362
D5D775
E7E8B7

Tritanopia

9EBAB9
7D8383
A76C70
DE8489
EABFC1

Achromatopsia

A8A8A8
808080
949494
BFBFBF
DDDDDD

Shades & Tints Shades & Tints

#9EA6CA

Dark
Light

#7D8085

Dark
Light

#A8984B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9ea6ca;
  --color-2: #7d8085;
  --color-3: #a8984b;
  --color-4: #dfc453;
  --color-5: #eae2a4;
}

SCSS

$color-1: #9ea6ca;
$color-2: #7d8085;
$color-3: #a8984b;
$color-4: #dfc453;
$color-5: #eae2a4;

TAILWIND

colors: {
  'brand-1': '#9ea6ca',
  'brand-2': '#7d8085',
  'brand-3': '#a8984b',
  'brand-4': '#dfc453',
  'brand-5': '#eae2a4',
}

RGB Array

[158, 166, 202], [125, 128, 133], [168, 152, 75], [223, 196, 83], [234, 226, 164]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9EA6CA, #7D8085, #A8984B, #DFC453, #EAE2A4 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: #9ea6ca; --color-2: #7d8085; --color-3: #a8984b; --color-4: #dfc453; --color-5: #eae2a4. 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