← Back to Editor

#566C86 · #9E5576 · #E85D74 · #DE834B · #D7A367

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

#566C86

Indigo · SlateGray · Navy Blue

HEX
#566C86
RGB
rgb(86, 108, 134)
HSL
hsl(213, 22%, 43%)
HSB
hsb(213, 36%, 53%)
CMYK
cmyk(36%, 19%, 0%, 47%)
Oklch
oklch(52.4% 0.049 252.9)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#9E5576

Dark Violet · Gray · Camellia

HEX
#9E5576
RGB
rgb(158, 85, 118)
HSL
hsl(333, 30%, 48%)
HSB
hsb(333, 46%, 62%)
CMYK
cmyk(0%, 46%, 25%, 38%)
Oklch
oklch(54.6% 0.104 352.6)

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

#E85D74

Peach Pink · LightCoral · Coral Red

HEX
#E85D74
RGB
rgb(232, 93, 116)
HSL
hsl(350, 75%, 64%)
HSB
hsb(350, 60%, 91%)
CMYK
cmyk(0%, 60%, 50%, 9%)
Oklch
oklch(66.2% 0.173 13.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#DE834B

Tangerine · Coral · Warm Sun

HEX
#DE834B
RGB
rgb(222, 131, 75)
HSL
hsl(23, 69%, 58%)
HSB
hsb(23, 66%, 87%)
CMYK
cmyk(0%, 41%, 66%, 13%)
Oklch
oklch(69.7% 0.133 50.7)

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

#D7A367

Ginger · DarkSalmon · Warm Sun

HEX
#D7A367
RGB
rgb(215, 163, 103)
HSL
hsl(32, 58%, 62%)
HSB
hsb(32, 52%, 84%)
CMYK
cmyk(0%, 24%, 52%, 16%)
Oklch
oklch(75.1% 0.099 69.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

566C86
867056

Analogous

568386
566C86
585686

Triadic

566C86
86566B
6B8656

Split-Comp.

566C86
865856
838656

Tetradic

566C86
865683
867056
568658

Contrast Matrix WCAG 2.1 Contrast

566C86
9E5576
E85D74
DE834B
D7A367
—
1.0
Fail
1.6
Fail
1.9
Fail
2.4
Fail
1.0
Fail
—
1.6
Fail
1.9
Fail
2.3
Fail
1.6
Fail
1.6
Fail
—
1.2
Fail
1.5
Fail
1.9
Fail
1.9
Fail
1.2
Fail
—
1.3
Fail
2.4
Fail
2.3
Fail
1.5
Fail
1.3
Fail
—
White BG
5.4AA
5.2AA
3.4AA Large
2.8Fail
2.3Fail
Black BG
3.9AA Large
4.0AA Large
6.2AA
7.5AAA
9.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

606080
7E7E6E
ACAB6E
B7B659
C0C076

Deuteranopia

5E5D7E
83886C
B4BE6D
BCC35C
C4C779

Tritanopia

577B7A
9A6866
E16A69
D96366
D48184

Achromatopsia

686868
6F6F6F
898989
989898
ACACAC

Shades & Tints Shades & Tints

#566C86

Dark
Light

#9E5576

Dark
Light

#E85D74

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #566c86;
  --color-2: #9e5576;
  --color-3: #e85d74;
  --color-4: #de834b;
  --color-5: #d7a367;
}

SCSS

$color-1: #566c86;
$color-2: #9e5576;
$color-3: #e85d74;
$color-4: #de834b;
$color-5: #d7a367;

TAILWIND

colors: {
  'brand-1': '#566c86',
  'brand-2': '#9e5576',
  'brand-3': '#e85d74',
  'brand-4': '#de834b',
  'brand-5': '#d7a367',
}

RGB Array

[86, 108, 134], [158, 85, 118], [232, 93, 116], [222, 131, 75], [215, 163, 103]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #566C86, #9E5576, #E85D74, #DE834B, #D7A367 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: #566c86; --color-2: #9e5576; --color-3: #e85d74; --color-4: #de834b; --color-5: #d7a367. 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