← Back to Editor

#565C7E · #8B6E82 · #A97D8A · #D89091 · #F5A697

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

#565C7E

Indigo · DimGray · Navy Blue

HEX
#565C7E
RGB
rgb(86, 92, 126)
HSL
hsl(231, 19%, 42%)
HSB
hsb(231, 32%, 49%)
CMYK
cmyk(32%, 27%, 0%, 51%)
Oklch
oklch(48.3% 0.055 276.4)

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

#8B6E82

Rose Purple · Gray · Violet

HEX
#8B6E82
RGB
rgb(139, 110, 130)
HSL
hsl(319, 12%, 49%)
HSB
hsb(319, 21%, 55%)
CMYK
cmyk(0%, 21%, 6%, 45%)
Oklch
oklch(57.3% 0.046 337.8)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#A97D8A

Dark Violet · Gray · Rose Pink

HEX
#A97D8A
RGB
rgb(169, 125, 138)
HSL
hsl(342, 20%, 58%)
HSB
hsb(342, 26%, 66%)
CMYK
cmyk(0%, 26%, 18%, 34%)
Oklch
oklch(63.7% 0.057 359.4)

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

#D89091

Peach Pink · DarkSalmon · Coral Red

HEX
#D89091
RGB
rgb(216, 144, 145)
HSL
hsl(359, 48%, 71%)
HSB
hsb(359, 33%, 85%)
CMYK
cmyk(0%, 33%, 33%, 15%)
Oklch
oklch(72.6% 0.088 18.5)

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

#F5A697

Peach Pink · LightSalmon · Coral Red

HEX
#F5A697
RGB
rgb(245, 166, 151)
HSL
hsl(10, 82%, 78%)
HSB
hsb(10, 38%, 96%)
CMYK
cmyk(0%, 32%, 38%, 4%)
Oklch
oklch(79.8% 0.097 31.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

565C7E
7F7957

Analogous

57717F
565C7E
65577F

Triadic

565C7E
7F575D
5D7F57

Split-Comp.

565C7E
7F6557
717F57

Tetradic

565C7E
7F5771
7F7957
577F65

Contrast Matrix WCAG 2.1 Contrast

565C7E
8B6E82
A97D8A
D89091
F5A697
—
1.4
Fail
1.9
Fail
2.6
Fail
3.3
AA Large
1.4
Fail
—
1.3
Fail
1.8
Fail
2.3
Fail
1.9
Fail
1.3
Fail
—
1.4
Fail
1.8
Fail
2.6
Fail
1.8
Fail
1.4
Fail
—
1.3
Fail
3.3
AA Large
2.3
Fail
1.8
Fail
1.3
Fail
—
White BG
6.5AA
4.5AA
3.5AA Large
2.5Fail
1.9Fail
Black BG
3.2AA Large
4.7AA
6.0AA
8.3AAA
10.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

595976
7E7E7D
969687
B9B891
D3D29B

Deuteranopia

585874
80827C
999C86
BDC291
D7DD9C

Tritanopia

566F6E
8A7979
A78484
D49191
F19D9E

Achromatopsia

5E5E5E
797979
8C8C8C
A6A6A6
BCBCBC

Shades & Tints Shades & Tints

#565C7E

Dark
Light

#8B6E82

Dark
Light

#A97D8A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #565c7e;
  --color-2: #8b6e82;
  --color-3: #a97d8a;
  --color-4: #d89091;
  --color-5: #f5a697;
}

SCSS

$color-1: #565c7e;
$color-2: #8b6e82;
$color-3: #a97d8a;
$color-4: #d89091;
$color-5: #f5a697;

TAILWIND

colors: {
  'brand-1': '#565c7e',
  'brand-2': '#8b6e82',
  'brand-3': '#a97d8a',
  'brand-4': '#d89091',
  'brand-5': '#f5a697',
}

RGB Array

[86, 92, 126], [139, 110, 130], [169, 125, 138], [216, 144, 145], [245, 166, 151]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #565C7E, #8B6E82, #A97D8A, #D89091, #F5A697 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: #565c7e; --color-2: #8b6e82; --color-3: #a97d8a; --color-4: #d89091; --color-5: #f5a697. 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