← Back to Editor

#717780 · #93737B · #AA837C · #DC8A6C · #EEC89F

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

#717780

Ink Gray · Gray · Warm Gray

HEX
#717780
RGB
rgb(113, 119, 128)
HSL
hsl(216, 6%, 47%)
HSB
hsb(216, 12%, 50%)
CMYK
cmyk(12%, 7%, 0%, 50%)
Oklch
oklch(56.7% 0.016 258.4)

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

#93737B

Crimson · Gray · Passion Red

HEX
#93737B
RGB
rgb(147, 115, 123)
HSL
hsl(345, 13%, 51%)
HSB
hsb(345, 22%, 58%)
CMYK
cmyk(0%, 22%, 16%, 42%)
Oklch
oklch(58.9% 0.042 1.8)

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

#AA837C

Crimson · Gray · Passion Red

HEX
#AA837C
RGB
rgb(170, 131, 124)
HSL
hsl(9, 21%, 58%)
HSB
hsb(9, 27%, 67%)
CMYK
cmyk(0%, 23%, 27%, 33%)
Oklch
oklch(64.5% 0.050 30.1)

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

#DC8A6C

Apricot · DarkSalmon · Warm Sun

HEX
#DC8A6C
RGB
rgb(220, 138, 108)
HSL
hsl(16, 62%, 64%)
HSB
hsb(16, 51%, 86%)
CMYK
cmyk(0%, 37%, 51%, 14%)
Oklch
oklch(71.2% 0.109 40.8)

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

#EEC89F

Goose Yellow · Wheat · Peach Orange

HEX
#EEC89F
RGB
rgb(238, 200, 159)
HSL
hsl(31, 70%, 78%)
HSB
hsb(31, 33%, 93%)
CMYK
cmyk(0%, 16%, 33%, 7%)
Oklch
oklch(85.6% 0.069 68.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

717780
7F7971

Analogous

717E7F
717780
72717F

Triadic

717780
7F7176
767F71

Split-Comp.

717780
7F7271
7E7F71

Tetradic

717780
7F717E
7F7971
717F72

Contrast Matrix WCAG 2.1 Contrast

717780
93737B
AA837C
DC8A6C
EEC89F
—
1.1
Fail
1.3
Fail
1.7
Fail
2.9
Fail
1.1
Fail
—
1.3
Fail
1.6
Fail
2.7
Fail
1.3
Fail
1.3
Fail
—
1.3
Fail
2.1
Fail
1.7
Fail
1.6
Fail
1.3
Fail
—
1.7
Fail
2.9
Fail
2.7
Fail
2.1
Fail
1.7
Fail
—
White BG
4.5AA
4.2AA Large
3.4AA Large
2.7Fail
1.6Fail
Black BG
4.7AA
5.0AA
6.2AA
7.9AAA
13.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

74747E
858579
99997E
B8B873
DEDDA9

Deuteranopia

73737D
878979
9B9E7E
BDC375
E0E3AB

Tritanopia

717C7C
917877
A87F7F
D8797A
ECB1B2

Achromatopsia

767676
7D7D7D
8E8E8E
9F9F9F
CFCFCF

Shades & Tints Shades & Tints

#717780

Dark
Light

#93737B

Dark
Light

#AA837C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #717780;
  --color-2: #93737b;
  --color-3: #aa837c;
  --color-4: #dc8a6c;
  --color-5: #eec89f;
}

SCSS

$color-1: #717780;
$color-2: #93737b;
$color-3: #aa837c;
$color-4: #dc8a6c;
$color-5: #eec89f;

TAILWIND

colors: {
  'brand-1': '#717780',
  'brand-2': '#93737b',
  'brand-3': '#aa837c',
  'brand-4': '#dc8a6c',
  'brand-5': '#eec89f',
}

RGB Array

[113, 119, 128], [147, 115, 123], [170, 131, 124], [220, 138, 108], [238, 200, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #717780, #93737B, #AA837C, #DC8A6C, #EEC89F 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: #717780; --color-2: #93737b; --color-3: #aa837c; --color-4: #dc8a6c; --color-5: #eec89f. 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