← Back to Editor

#393B85 · #5F619E · #7D7FBA · #988EBD · #BEC6D1

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#393B85

Indigo · DarkSlateBlue · Prussian Blue

HEX
#393B85
RGB
rgb(57, 59, 133)
HSL
hsl(238, 40%, 37%)
HSB
hsb(238, 57%, 52%)
CMYK
cmyk(57%, 56%, 0%, 48%)
Oklch
oklch(39.3% 0.121 278.1)

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

#5F619E

Indigo · SlateGray · Navy Blue

HEX
#5F619E
RGB
rgb(95, 97, 158)
HSL
hsl(238, 25%, 50%)
HSB
hsb(238, 40%, 62%)
CMYK
cmyk(40%, 39%, 0%, 38%)
Oklch
oklch(51.8% 0.096 281.1)

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

#7D7FBA

Azure · LightSlateGray · Cobalt Blue

HEX
#7D7FBA
RGB
rgb(125, 127, 186)
HSL
hsl(238, 31%, 61%)
HSB
hsb(238, 33%, 73%)
CMYK
cmyk(33%, 32%, 0%, 27%)
Oklch
oklch(61.8% 0.089 282.0)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#988EBD

Wisteria · DarkGray · Cobalt Blue

HEX
#988EBD
RGB
rgb(152, 142, 189)
HSL
hsl(253, 26%, 65%)
HSB
hsb(253, 25%, 74%)
CMYK
cmyk(20%, 25%, 0%, 26%)
Oklch
oklch(67.2% 0.069 294.2)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#BEC6D1

Azure · Silver · Cobalt Blue

HEX
#BEC6D1
RGB
rgb(190, 198, 209)
HSL
hsl(215, 17%, 78%)
HSB
hsb(215, 9%, 82%)
CMYK
cmyk(9%, 5%, 0%, 18%)
Oklch
oklch(82.4% 0.018 256.3)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

393B85
848239

Analogous

396184
393B85
5C3984

Triadic

393B85
84393B
3B8439

Split-Comp.

393B85
845C39
618439

Tetradic

393B85
843961
848239
39845C

Contrast Matrix WCAG 2.1 Contrast

393B85
5F619E
7D7FBA
988EBD
BEC6D1
—
1.7
Fail
2.6
Fail
3.2
AA Large
5.7
AA
1.7
Fail
—
1.5
Fail
1.9
Fail
3.3
AA Large
2.6
Fail
1.5
Fail
—
1.2
Fail
2.2
Fail
3.2
AA Large
1.9
Fail
1.2
Fail
—
1.8
Fail
5.7
AA
3.3
AA Large
2.2
Fail
1.8
Fail
—
White BG
9.8AAA
5.7AA
3.7AA Large
3.0AA Large
1.7Fail
Black BG
2.1Fail
3.7AA Large
5.6AA
6.9AA
12.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3A3A73
60608F
7E7EAC
9494B2
C1C2CE

Deuteranopia

3A3A6F
60608C
7E7EA8
9495AF
C1C0CE

Tritanopia

396562
5F8481
7DA09E
98A9A7
BECCCC

Achromatopsia

434343
676767
858585
969696
C5C5C5

Shades & Tints Shades & Tints

#393B85

Dark
Light

#5F619E

Dark
Light

#7D7FBA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #393b85;
  --color-2: #5f619e;
  --color-3: #7d7fba;
  --color-4: #988ebd;
  --color-5: #bec6d1;
}

SCSS

$color-1: #393b85;
$color-2: #5f619e;
$color-3: #7d7fba;
$color-4: #988ebd;
$color-5: #bec6d1;

TAILWIND

colors: {
  'brand-1': '#393b85',
  'brand-2': '#5f619e',
  'brand-3': '#7d7fba',
  'brand-4': '#988ebd',
  'brand-5': '#bec6d1',
}

RGB Array

[57, 59, 133], [95, 97, 158], [125, 127, 186], [152, 142, 189], [190, 198, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #393B85, #5F619E, #7D7FBA, #988EBD, #BEC6D1 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #393b85; --color-2: #5f619e; --color-3: #7d7fba; --color-4: #988ebd; --color-5: #bec6d1. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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. Restrained colors convey professionalism and trust. 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