← Back to Editor

#B757BD · #754194 · #393B85 · #1B3669 · #003344

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

#B757BD

Dark Plum · MediumOrchid · Violet

HEX
#B757BD
RGB
rgb(183, 87, 189)
HSL
hsl(296, 44%, 54%)
HSB
hsb(296, 54%, 74%)
CMYK
cmyk(3%, 54%, 0%, 26%)
Oklch
oklch(61.2% 0.177 325.2)

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

#754194

Dark Plum · DarkSlateBlue · Violet

HEX
#754194
RGB
rgb(117, 65, 148)
HSL
hsl(278, 39%, 42%)
HSB
hsb(278, 56%, 58%)
CMYK
cmyk(21%, 56%, 0%, 42%)
Oklch
oklch(47.5% 0.138 311.2)

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

#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

#1B3669

Indigo · MidnightBlue · Prussian Blue

HEX
#1B3669
RGB
rgb(27, 54, 105)
HSL
hsl(219, 59%, 26%)
HSB
hsb(219, 74%, 41%)
CMYK
cmyk(74%, 49%, 0%, 59%)
Oklch
oklch(34.2% 0.095 261.7)

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

#003344

Lake Blue · DarkSlateGray · Peacock Green

HEX
#003344
RGB
rgb(0, 51, 68)
HSL
hsl(195, 100%, 13%)
HSB
hsb(195, 100%, 27%)
CMYK
cmyk(100%, 25%, 0%, 73%)
Oklch
oklch(29.9% 0.058 227.0)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B757BD
5DBD56

Analogous

8356BD
B757BD
BD5691

Triadic

B757BD
BDB656
56BDB6

Split-Comp.

B757BD
91BD56
56BD83

Tetradic

B757BD
BD8356
5DBD56
5691BD

Contrast Matrix WCAG 2.1 Contrast

B757BD
754194
393B85
1B3669
003344
—
1.7
Fail
2.4
Fail
2.9
Fail
3.3
AA Large
1.7
Fail
—
1.4
Fail
1.7
Fail
1.9
Fail
2.4
Fail
1.4
Fail
—
1.2
Fail
1.4
Fail
2.9
Fail
1.7
Fail
1.2
Fail
—
1.1
Fail
3.3
AA Large
1.9
Fail
1.4
Fail
1.1
Fail
—
White BG
4.1AA Large
7.1AAA
9.8AAA
11.8AAA
13.5AAA
Black BG
5.1AA
2.9Fail
2.1Fail
1.8Fail
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8D8DA4
5E5E80
3A3A73
27275D
161740

Deuteranopia

939A9E
62657B
3A3A6F
25235A
130F3F

Tritanopia

B2918D
72706D
396562
1C5351
033D3C

Achromatopsia

7F7F7F
5A5A5A
434343
343434
262626

Shades & Tints Shades & Tints

#B757BD

Dark
Light

#754194

Dark
Light

#393B85

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b757bd;
  --color-2: #754194;
  --color-3: #393b85;
  --color-4: #1b3669;
  --color-5: #003344;
}

SCSS

$color-1: #b757bd;
$color-2: #754194;
$color-3: #393b85;
$color-4: #1b3669;
$color-5: #003344;

TAILWIND

colors: {
  'brand-1': '#b757bd',
  'brand-2': '#754194',
  'brand-3': '#393b85',
  'brand-4': '#1b3669',
  'brand-5': '#003344',
}

RGB Array

[183, 87, 189], [117, 65, 148], [57, 59, 133], [27, 54, 105], [0, 51, 68]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B757BD, #754194, #393B85, #1B3669, #003344 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #b757bd; --color-2: #754194; --color-3: #393b85; --color-4: #1b3669; --color-5: #003344. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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. 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