← Back to Editor

#86579F · #A0697C · #BB7C58 · #D58E35 · #EFA011

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

#86579F

Dark Plum · SlateGray · Violet

HEX
#86579F
RGB
rgb(134, 87, 159)
HSL
hsl(279, 29%, 48%)
HSB
hsb(279, 45%, 62%)
CMYK
cmyk(16%, 45%, 0%, 38%)
Oklch
oklch(53.7% 0.120 313.0)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#A0697C

Dark Violet · Gray · Rose Pink

HEX
#A0697C
RGB
rgb(160, 105, 124)
HSL
hsl(339, 22%, 52%)
HSB
hsb(339, 34%, 63%)
CMYK
cmyk(0%, 34%, 22%, 37%)
Oklch
oklch(58.5% 0.075 357.3)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#BB7C58

Tangerine · DarkSalmon · Warm Sun

HEX
#BB7C58
RGB
rgb(187, 124, 88)
HSL
hsl(22, 42%, 54%)
HSB
hsb(22, 53%, 73%)
CMYK
cmyk(0%, 34%, 53%, 27%)
Oklch
oklch(64.3% 0.093 50.2)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#D58E35

Ginger · GoldenRod · Warm Sun

HEX
#D58E35
RGB
rgb(213, 142, 53)
HSL
hsl(33, 66%, 52%)
HSB
hsb(33, 75%, 84%)
CMYK
cmyk(0%, 33%, 75%, 16%)
Oklch
oklch(70.3% 0.133 68.1)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#EFA011

Ochre · Orange · Amber Brown

HEX
#EFA011
RGB
rgb(239, 160, 17)
HSL
hsl(39, 87%, 50%)
HSB
hsb(39, 93%, 94%)
CMYK
cmyk(0%, 33%, 93%, 6%)
Oklch
oklch(76.5% 0.160 73.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

86579F
709E57

Analogous

62579E
86579F
9E5793

Triadic

86579F
9E8557
579E85

Split-Comp.

86579F
939E57
579E62

Tetradic

86579F
9E6257
709E57
57939E

Contrast Matrix WCAG 2.1 Contrast

86579F
A0697C
BB7C58
D58E35
EFA011
—
1.2
Fail
1.6
Fail
2.0
Fail
2.5
Fail
1.2
Fail
—
1.3
Fail
1.6
Fail
2.0
Fail
1.6
Fail
1.3
Fail
—
1.3
Fail
1.6
Fail
2.0
Fail
1.6
Fail
1.3
Fail
—
1.3
Fail
2.5
Fail
2.0
Fail
1.6
Fail
1.3
Fail
—
White BG
5.4AA
4.4AA Large
3.4AA Large
2.7Fail
2.2Fail
Black BG
3.9AA Large
4.8AA
6.1AA
7.7AAA
9.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

72718E
888877
A09F61
B6B64B
CDCC34

Deuteranopia

747889
8B9076
A3A863
BAC050
D1D73C

Tritanopia

84807D
9D7473
B86869
D15C5F
EB4F55

Achromatopsia

6D6D6D
7C7C7C
8B8B8B
999999
A7A7A7

Shades & Tints Shades & Tints

#86579F

Dark
Light

#A0697C

Dark
Light

#BB7C58

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #86579f;
  --color-2: #a0697c;
  --color-3: #bb7c58;
  --color-4: #d58e35;
  --color-5: #efa011;
}

SCSS

$color-1: #86579f;
$color-2: #a0697c;
$color-3: #bb7c58;
$color-4: #d58e35;
$color-5: #efa011;

TAILWIND

colors: {
  'brand-1': '#86579f',
  'brand-2': '#a0697c',
  'brand-3': '#bb7c58',
  'brand-4': '#d58e35',
  'brand-5': '#efa011',
}

RGB Array

[134, 87, 159], [160, 105, 124], [187, 124, 88], [213, 142, 53], [239, 160, 17]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #86579F, #A0697C, #BB7C58, #D58E35, #EFA011 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: #86579f; --color-2: #a0697c; --color-3: #bb7c58; --color-4: #d58e35; --color-5: #efa011. 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