← Back to Editor

#847771 · #ED8A5D · #ED725C · #C7B95E · #58D1CC

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

#847771

Tangerine · Gray · Warm Gray

HEX
#847771
RGB
rgb(132, 119, 113)
HSL
hsl(19, 8%, 48%)
HSB
hsb(19, 14%, 52%)
CMYK
cmyk(0%, 10%, 14%, 48%)
Oklch
oklch(57.9% 0.019 46.4)

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

#ED8A5D

Apricot · Coral · Warm Sun

HEX
#ED8A5D
RGB
rgb(237, 138, 93)
HSL
hsl(19, 80%, 65%)
HSB
hsb(19, 61%, 93%)
CMYK
cmyk(0%, 42%, 61%, 7%)
Oklch
oklch(73.0% 0.135 44.6)

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

#ED725C

Peach Pink · Coral · Coral Red

HEX
#ED725C
RGB
rgb(237, 114, 92)
HSL
hsl(9, 80%, 65%)
HSB
hsb(9, 61%, 93%)
CMYK
cmyk(0%, 52%, 61%, 7%)
Oklch
oklch(69.3% 0.157 31.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#C7B95E

Autumn Sage · BurlyWood · Sunflower

HEX
#C7B95E
RGB
rgb(199, 185, 94)
HSL
hsl(52, 48%, 57%)
HSB
hsb(52, 53%, 78%)
CMYK
cmyk(0%, 7%, 53%, 22%)
Oklch
oklch(77.9% 0.114 100.7)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#58D1CC

Mineral Blue · MediumTurquoise · Lake Green

HEX
#58D1CC
RGB
rgb(88, 209, 204)
HSL
hsl(178, 57%, 58%)
HSB
hsb(178, 58%, 82%)
CMYK
cmyk(58%, 0%, 2%, 18%)
Oklch
oklch(79.1% 0.108 191.4)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

847771
717E84

Analogous

847174
847771
848171

Triadic

847771
718477
777184

Split-Comp.

847771
718481
717484

Tetradic

847771
748471
717E84
817184

Contrast Matrix WCAG 2.1 Contrast

847771
ED8A5D
ED725C
C7B95E
58D1CC
—
1.7
Fail
1.5
Fail
2.2
Fail
2.3
Fail
1.7
Fail
—
1.2
Fail
1.3
Fail
1.4
Fail
1.5
Fail
1.2
Fail
—
1.5
Fail
1.6
Fail
2.2
Fail
1.3
Fail
1.5
Fail
—
1.1
Fail
2.3
Fail
1.4
Fail
1.6
Fail
1.1
Fail
—
White BG
4.3AA Large
2.5Fail
2.9Fail
2.0Fail
1.8Fail
Black BG
4.9AA
8.4AAA
7.2AAA
10.5AAA
11.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7E7E72
C2C168
B8B761
C1C174
8C8DCD

Deuteranopia

7F8073
C8CF6B
BFC863
C2C379
857CCD

Tritanopia

837474
E87072
E76666
C68589
5ECECE

Achromatopsia

7A7A7A
A2A2A2
949494
B3B3B3
ACACAC

Shades & Tints Shades & Tints

#847771

Dark
Light

#ED8A5D

Dark
Light

#ED725C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #847771;
  --color-2: #ed8a5d;
  --color-3: #ed725c;
  --color-4: #c7b95e;
  --color-5: #58d1cc;
}

SCSS

$color-1: #847771;
$color-2: #ed8a5d;
$color-3: #ed725c;
$color-4: #c7b95e;
$color-5: #58d1cc;

TAILWIND

colors: {
  'brand-1': '#847771',
  'brand-2': '#ed8a5d',
  'brand-3': '#ed725c',
  'brand-4': '#c7b95e',
  'brand-5': '#58d1cc',
}

RGB Array

[132, 119, 113], [237, 138, 93], [237, 114, 92], [199, 185, 94], [88, 209, 204]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #847771, #ED8A5D, #ED725C, #C7B95E, #58D1CC 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: #847771; --color-2: #ed8a5d; --color-3: #ed725c; --color-4: #c7b95e; --color-5: #58d1cc. 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