← Back to Editor

#707C84 · #E5AF78 · #70583A · #8D785E · #854033

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

#707C84

Slate Blue · SlateGray · Warm Gray

HEX
#707C84
RGB
rgb(112, 124, 132)
HSL
hsl(204, 8%, 48%)
HSB
hsb(204, 15%, 52%)
CMYK
cmyk(15%, 6%, 0%, 48%)
Oklch
oklch(57.9% 0.019 236.9)

Traditional「Slate Blue」· Paint「Warm Gray」· Creative Urban Concrete

#E5AF78

Ginger · BurlyWood · Warm Sun

HEX
#E5AF78
RGB
rgb(229, 175, 120)
HSL
hsl(30, 68%, 68%)
HSB
hsb(30, 48%, 90%)
CMYK
cmyk(0%, 24%, 48%, 10%)
Oklch
oklch(79.2% 0.095 66.2)

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

#70583A

Ochre · DarkOliveGreen · Amber Brown

HEX
#70583A
RGB
rgb(112, 88, 58)
HSL
hsl(33, 32%, 33%)
HSB
hsb(33, 48%, 44%)
CMYK
cmyk(0%, 21%, 48%, 56%)
Oklch
oklch(47.7% 0.054 72.1)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#8D785E

Ochre · Gray · Amber Brown

HEX
#8D785E
RGB
rgb(141, 120, 94)
HSL
hsl(33, 20%, 46%)
HSB
hsb(33, 33%, 55%)
CMYK
cmyk(0%, 15%, 33%, 45%)
Oklch
oklch(58.5% 0.046 72.7)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#854033

Crimson · Sienna · Wine Red

HEX
#854033
RGB
rgb(133, 64, 51)
HSL
hsl(10, 45%, 36%)
HSB
hsb(10, 62%, 52%)
CMYK
cmyk(0%, 52%, 62%, 48%)
Oklch
oklch(45.7% 0.098 32.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

707C84
847871

Analogous

718482
707C84
717384

Triadic

707C84
84717C
7C8471

Split-Comp.

707C84
847173
848271

Tetradic

707C84
827184
847871
738471

Contrast Matrix WCAG 2.1 Contrast

707C84
E5AF78
70583A
8D785E
854033
—
2.2
Fail
1.6
Fail
1.0
Fail
1.8
Fail
2.2
Fail
—
3.4
AA Large
2.2
Fail
3.9
AA Large
1.6
Fail
3.4
AA Large
—
1.6
Fail
1.1
Fail
1.0
Fail
2.2
Fail
1.6
Fail
—
1.8
Fail
1.8
Fail
3.9
AA Large
1.1
Fail
1.8
Fail
—
White BG
4.3AA Large
2.0Fail
6.7AA
4.2AA Large
7.6AAA
Black BG
4.9AA
10.7AAA
3.1AA Large
5.0AA
2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

757582
CECD85
666541
848464
676736

Deuteranopia

757482
D1D589
676943
858766
6B7037

Tritanopia

718180
E29092
6F4748
8C696A
823939

Achromatopsia

797979
B9B9B9
5C5C5C
7B7B7B
535353

Shades & Tints Shades & Tints

#707C84

Dark
Light

#E5AF78

Dark
Light

#70583A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #707c84;
  --color-2: #e5af78;
  --color-3: #70583a;
  --color-4: #8d785e;
  --color-5: #854033;
}

SCSS

$color-1: #707c84;
$color-2: #e5af78;
$color-3: #70583a;
$color-4: #8d785e;
$color-5: #854033;

TAILWIND

colors: {
  'brand-1': '#707c84',
  'brand-2': '#e5af78',
  'brand-3': '#70583a',
  'brand-4': '#8d785e',
  'brand-5': '#854033',
}

RGB Array

[112, 124, 132], [229, 175, 120], [112, 88, 58], [141, 120, 94], [133, 64, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #707C84, #E5AF78, #70583A, #8D785E, #854033 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: #707c84; --color-2: #e5af78; --color-3: #70583a; --color-4: #8d785e; --color-5: #854033. 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