← Back to Editor

#2E1E19 · #2A524F · #366A7E · #4584C0 · #757EFE

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

#2E1E19

Crimson · Black · Deep Berry

HEX
#2E1E19
RGB
rgb(46, 30, 25)
HSL
hsl(14, 30%, 14%)
HSB
hsb(14, 46%, 18%)
CMYK
cmyk(0%, 35%, 46%, 82%)
Oklch
oklch(25.4% 0.027 38.1)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#2A524F

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#2A524F
RGB
rgb(42, 82, 79)
HSL
hsl(176, 32%, 24%)
HSB
hsb(176, 49%, 32%)
CMYK
cmyk(49%, 0%, 4%, 68%)
Oklch
oklch(40.8% 0.046 189.2)

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

#366A7E

Slate Blue · DarkSlateBlue · Mint Ice

HEX
#366A7E
RGB
rgb(54, 106, 126)
HSL
hsl(197, 40%, 35%)
HSB
hsb(197, 57%, 49%)
CMYK
cmyk(57%, 16%, 0%, 51%)
Oklch
oklch(49.7% 0.064 225.4)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#4584C0

Slate Blue · SteelBlue · Navy Blue

HEX
#4584C0
RGB
rgb(69, 132, 192)
HSL
hsl(209, 49%, 51%)
HSB
hsb(209, 64%, 75%)
CMYK
cmyk(64%, 31%, 0%, 25%)
Oklch
oklch(59.8% 0.113 249.2)

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

#757EFE

Azure · MediumSlateBlue · Cobalt Blue

HEX
#757EFE
RGB
rgb(117, 126, 254)
HSL
hsl(236, 99%, 73%)
HSB
hsb(236, 54%, 100%)
CMYK
cmyk(54%, 50%, 0%, 0%)
Oklch
oklch(64.9% 0.187 276.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2E1E19
19292E

Analogous

2E191F
2E1E19
2E2919

Triadic

2E1E19
192E1E
1E192E

Split-Comp.

2E1E19
192E29
191F2E

Tetradic

2E1E19
1F2E19
19292E
29192E

Contrast Matrix WCAG 2.1 Contrast

2E1E19
2A524F
366A7E
4584C0
757EFE
—
1.8
Fail
2.7
Fail
4.0
AA Large
4.7
AA
1.8
Fail
—
1.5
Fail
2.2
Fail
2.6
Fail
2.7
Fail
1.5
Fail
—
1.5
Fail
1.8
Fail
4.0
AA Large
2.2
Fail
1.5
Fail
—
1.2
Fail
4.7
AA
2.6
Fail
1.8
Fail
1.2
Fail
—
White BG
16.0AAA
8.7AAA
6.0AA
4.0AA Large
3.4AA Large
Black BG
1.3Fail
2.4Fail
3.5AA Large
5.3AA
6.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

27271A
3B3C50
4D4D79
6061B1
7979DF

Deuteranopia

28291B
393650
4A4678
5D58AE
7878D8

Tritanopia

2D1B1B
2C5050
397575
48A6A4
75C7C1

Achromatopsia

222222
464646
5D5D5D
787878
8A8A8A

Shades & Tints Shades & Tints

#2E1E19

Dark
Light

#2A524F

Dark
Light

#366A7E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2e1e19;
  --color-2: #2a524f;
  --color-3: #366a7e;
  --color-4: #4584c0;
  --color-5: #757efe;
}

SCSS

$color-1: #2e1e19;
$color-2: #2a524f;
$color-3: #366a7e;
$color-4: #4584c0;
$color-5: #757efe;

TAILWIND

colors: {
  'brand-1': '#2e1e19',
  'brand-2': '#2a524f',
  'brand-3': '#366a7e',
  'brand-4': '#4584c0',
  'brand-5': '#757efe',
}

RGB Array

[46, 30, 25], [42, 82, 79], [54, 106, 126], [69, 132, 192], [117, 126, 254]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2E1E19, #2A524F, #366A7E, #4584C0, #757EFE 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: #2e1e19; --color-2: #2a524f; --color-3: #366a7e; --color-4: #4584c0; --color-5: #757efe. 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