← Back to Editor

#3B1C54 · #433556 · #565D6D · #607E5C · #67A2EB

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

#3B1C54

Dark Plum · MidnightBlue · Eggplant

HEX
#3B1C54
RGB
rgb(59, 28, 84)
HSL
hsl(273, 50%, 22%)
HSB
hsb(273, 67%, 33%)
CMYK
cmyk(30%, 67%, 0%, 67%)
Oklch
oklch(30.0% 0.100 306.9)

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

#433556

Deep Indigo · DarkSlateGray · Eggplant

HEX
#433556
RGB
rgb(67, 53, 86)
HSL
hsl(265, 24%, 27%)
HSB
hsb(265, 38%, 34%)
CMYK
cmyk(22%, 38%, 0%, 66%)
Oklch
oklch(35.9% 0.058 303.1)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#565D6D

Indigo · DimGray · Prussian Blue

HEX
#565D6D
RGB
rgb(86, 93, 109)
HSL
hsl(222, 12%, 38%)
HSB
hsb(222, 21%, 43%)
CMYK
cmyk(21%, 15%, 0%, 57%)
Oklch
oklch(47.8% 0.027 266.6)

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

#607E5C

Celadon · DimGray · Olive Green

HEX
#607E5C
RGB
rgb(96, 126, 92)
HSL
hsl(113, 16%, 43%)
HSB
hsb(113, 27%, 49%)
CMYK
cmyk(24%, 0%, 27%, 51%)
Oklch
oklch(56.0% 0.062 141.7)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#67A2EB

Azure · CornflowerBlue · Cobalt Blue

HEX
#67A2EB
RGB
rgb(103, 162, 235)
HSL
hsl(213, 77%, 66%)
HSB
hsb(213, 56%, 92%)
CMYK
cmyk(56%, 31%, 0%, 8%)
Oklch
oklch(70.3% 0.124 254.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3B1C54
35541C

Analogous

1F1C54
3B1C54
541C51

Triadic

3B1C54
543B1C
1C543B

Split-Comp.

3B1C54
51541C
1C541F

Tetradic

3B1C54
541F1C
35541C
1C5154

Contrast Matrix WCAG 2.1 Contrast

3B1C54
433556
565D6D
607E5C
67A2EB
—
1.3
Fail
2.2
Fail
3.1
AA Large
5.4
AA
1.3
Fail
—
1.7
Fail
2.5
Fail
4.2
AA Large
2.2
Fail
1.7
Fail
—
1.5
Fail
2.5
Fail
3.1
AA Large
2.5
Fail
1.5
Fail
—
1.7
Fail
5.4
AA
4.2
AA Large
2.5
Fail
1.7
Fail
—
White BG
14.2AAA
11.2AAA
6.6AA
4.5AA
2.6Fail
Black BG
1.5Fail
1.9Fail
3.2AA Large
4.6AA
7.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2D46
3D3D4E
595969
6D6D64
8181D9

Deuteranopia

2F3243
3E3F4C
595868
6B6966
7D79D5

Tritanopia

393C39
424846
566665
616B6C
6ACBC8

Achromatopsia

2C2C2C
3D3D3D
5D5D5D
717171
999999

Shades & Tints Shades & Tints

#3B1C54

Dark
Light

#433556

Dark
Light

#565D6D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3b1c54;
  --color-2: #433556;
  --color-3: #565d6d;
  --color-4: #607e5c;
  --color-5: #67a2eb;
}

SCSS

$color-1: #3b1c54;
$color-2: #433556;
$color-3: #565d6d;
$color-4: #607e5c;
$color-5: #67a2eb;

TAILWIND

colors: {
  'brand-1': '#3b1c54',
  'brand-2': '#433556',
  'brand-3': '#565d6d',
  'brand-4': '#607e5c',
  'brand-5': '#67a2eb',
}

RGB Array

[59, 28, 84], [67, 53, 86], [86, 93, 109], [96, 126, 92], [103, 162, 235]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3B1C54, #433556, #565D6D, #607E5C, #67A2EB 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: #3b1c54; --color-2: #433556; --color-3: #565d6d; --color-4: #607e5c; --color-5: #67a2eb. 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