← Back to Editor

#657997 · #5F5B7A · #D44C85 · #F25C76 · #FA776C

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

#657997

Indigo · SlateGray · Navy Blue

HEX
#657997
RGB
rgb(101, 121, 151)
HSL
hsl(216, 20%, 49%)
HSB
hsb(216, 33%, 59%)
CMYK
cmyk(33%, 20%, 0%, 41%)
Oklch
oklch(57.1% 0.052 258.3)

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

#5F5B7A

Deep Indigo · DimGray · Navy Blue

HEX
#5F5B7A
RGB
rgb(95, 91, 122)
HSL
hsl(248, 15%, 42%)
HSB
hsb(248, 25%, 48%)
CMYK
cmyk(22%, 25%, 0%, 52%)
Oklch
oklch(48.7% 0.049 290.4)

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

#D44C85

Dark Violet · MediumVioletRed · Rose Pink

HEX
#D44C85
RGB
rgb(212, 76, 133)
HSL
hsl(335, 61%, 56%)
HSB
hsb(335, 64%, 83%)
CMYK
cmyk(0%, 64%, 37%, 17%)
Oklch
oklch(61.6% 0.178 357.8)

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

#F25C76

Peach Pink · Salmon · Coral Red

HEX
#F25C76
RGB
rgb(242, 92, 118)
HSL
hsl(350, 85%, 65%)
HSB
hsb(350, 62%, 95%)
CMYK
cmyk(0%, 62%, 51%, 5%)
Oklch
oklch(67.6% 0.184 13.1)

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

#FA776C

Peach Pink · Salmon · Coral Red

HEX
#FA776C
RGB
rgb(250, 119, 108)
HSL
hsl(5, 93%, 70%)
HSB
hsb(5, 57%, 98%)
CMYK
cmyk(0%, 52%, 57%, 2%)
Oklch
oklch(72.1% 0.162 26.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

657997
968264

Analogous

649196
657997
696496

Triadic

657997
966478
789664

Split-Comp.

657997
966964
919664

Tetradic

657997
966491
968264
649669

Contrast Matrix WCAG 2.1 Contrast

657997
5F5B7A
D44C85
F25C76
FA776C
—
1.5
Fail
1.1
Fail
1.4
Fail
1.7
Fail
1.5
Fail
—
1.6
Fail
2.0
Fail
2.4
Fail
1.1
Fail
1.6
Fail
—
1.3
Fail
1.5
Fail
1.4
Fail
2.0
Fail
1.3
Fail
—
1.2
Fail
1.7
Fail
2.4
Fail
1.5
Fail
1.2
Fail
—
White BG
4.4AA Large
6.4AA
4.1AA Large
3.2AA Large
2.7Fail
Black BG
4.7AA
3.3AA Large
5.2AA
6.6AA
7.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6E6E90
5D5D72
999877
B1B070
C1C06F

Deuteranopia

6D6B8E
5E5E71
A1AB74
BAC56E
C9D36F

Tritanopia

668A89
5F6D6B
CD6C6A
EA6B6A
F37171

Achromatopsia

767676
606060
7B7B7B
8C8C8C
9D9D9D

Shades & Tints Shades & Tints

#657997

Dark
Light

#5F5B7A

Dark
Light

#D44C85

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #657997;
  --color-2: #5f5b7a;
  --color-3: #d44c85;
  --color-4: #f25c76;
  --color-5: #fa776c;
}

SCSS

$color-1: #657997;
$color-2: #5f5b7a;
$color-3: #d44c85;
$color-4: #f25c76;
$color-5: #fa776c;

TAILWIND

colors: {
  'brand-1': '#657997',
  'brand-2': '#5f5b7a',
  'brand-3': '#d44c85',
  'brand-4': '#f25c76',
  'brand-5': '#fa776c',
}

RGB Array

[101, 121, 151], [95, 91, 122], [212, 76, 133], [242, 92, 118], [250, 119, 108]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #657997, #5F5B7A, #D44C85, #F25C76, #FA776C 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: #657997; --color-2: #5f5b7a; --color-3: #d44c85; --color-4: #f25c76; --color-5: #fa776c. 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