← Back to Editor

#3B2F57 · #45253A · #EFD284 · #213363 · #1A0816

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 LibraryData Visualization

Color Details Color Details

#3B2F57

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#3B2F57
RGB
rgb(59, 47, 87)
HSL
hsl(258, 30%, 26%)
HSB
hsb(258, 46%, 34%)
CMYK
cmyk(32%, 46%, 0%, 66%)
Oklch
oklch(33.8% 0.070 296.3)

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

#45253A

Rose Purple · DarkSlateGray · Raspberry

HEX
#45253A
RGB
rgb(69, 37, 58)
HSL
hsl(321, 30%, 21%)
HSB
hsb(321, 46%, 27%)
CMYK
cmyk(0%, 46%, 16%, 73%)
Oklch
oklch(31.4% 0.058 341.2)

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

#EFD284

Goose Yellow · Khaki · Sunflower

HEX
#EFD284
RGB
rgb(239, 210, 132)
HSL
hsl(44, 77%, 73%)
HSB
hsb(44, 45%, 94%)
CMYK
cmyk(0%, 12%, 45%, 6%)
Oklch
oklch(87.1% 0.103 89.8)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#213363

Indigo · MidnightBlue · Prussian Blue

HEX
#213363
RGB
rgb(33, 51, 99)
HSL
hsl(224, 50%, 26%)
HSB
hsb(224, 67%, 39%)
CMYK
cmyk(67%, 48%, 0%, 61%)
Oklch
oklch(33.3% 0.088 266.3)

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

#1A0816

Rose Purple · Black · Dark Purple

HEX
#1A0816
RGB
rgb(26, 8, 22)
HSL
hsl(313, 53%, 7%)
HSB
hsb(313, 69%, 10%)
CMYK
cmyk(0%, 69%, 15%, 90%)
Oklch
oklch(17.0% 0.040 336.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3B2F57
4A562E

Analogous

2E3656
3B2F57
4E2E56

Triadic

3B2F57
563A2E
2E563A

Split-Comp.

3B2F57
564E2E
36562E

Tetradic

3B2F57
562E36
4A562E
2E564E

Contrast Matrix WCAG 2.1 Contrast

3B2F57
45253A
EFD284
213363
1A0816
—
1.1
Fail
8.2
AAA
1.0
Fail
1.6
Fail
1.1
Fail
—
9.0
AAA
1.1
Fail
1.4
Fail
8.2
AAA
9.0
AAA
—
8.3
AAA
13.0
AAA
1.0
Fail
1.1
Fail
8.3
AAA
—
1.6
Fail
1.6
Fail
1.4
Fail
13.0
AAA
1.6
Fail
—
White BG
12.1AAA
13.3AAA
1.5Fail
12.2AAA
19.3AAA
Black BG
1.7Fail
1.6Fail
14.2AAA
1.7Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

36364D
373735
E2E297
292957
121213

Deuteranopia

37374B
393B34
E4E69B
282655
131512

Tritanopia

3A4644
433130
EEA6A9
224E4C
19100F

Achromatopsia

373737
313131
D2D2D2
333333
0F0F0F

Shades & Tints Shades & Tints

#3B2F57

Dark
Light

#45253A

Dark
Light

#EFD284

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3b2f57;
  --color-2: #45253a;
  --color-3: #efd284;
  --color-4: #213363;
  --color-5: #1a0816;
}

SCSS

$color-1: #3b2f57;
$color-2: #45253a;
$color-3: #efd284;
$color-4: #213363;
$color-5: #1a0816;

TAILWIND

colors: {
  'brand-1': '#3b2f57',
  'brand-2': '#45253a',
  'brand-3': '#efd284',
  'brand-4': '#213363',
  'brand-5': '#1a0816',
}

RGB Array

[59, 47, 87], [69, 37, 58], [239, 210, 132], [33, 51, 99], [26, 8, 22]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3B2F57, #45253A, #EFD284, #213363, #1A0816 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: #3b2f57; --color-2: #45253a; --color-3: #efd284; --color-4: #213363; --color-5: #1a0816. 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