← Back to Editor

#3D75FF · #1F48C4 · #2A276E · #1E2049 · #131224

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

#3D75FF

Azure · DodgerBlue · Cobalt Blue

HEX
#3D75FF
RGB
rgb(61, 117, 255)
HSL
hsl(223, 100%, 62%)
HSB
hsb(223, 76%, 100%)
CMYK
cmyk(76%, 54%, 0%, 0%)
Oklch
oklch(60.4% 0.214 264.2)

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

#1F48C4

Indigo · DarkSlateBlue · Navy Blue

HEX
#1F48C4
RGB
rgb(31, 72, 196)
HSL
hsl(225, 73%, 45%)
HSB
hsb(225, 84%, 77%)
CMYK
cmyk(84%, 63%, 0%, 23%)
Oklch
oklch(45.9% 0.198 265.0)

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

#2A276E

Deep Indigo · MidnightBlue · Prussian Blue

HEX
#2A276E
RGB
rgb(42, 39, 110)
HSL
hsl(243, 48%, 29%)
HSB
hsb(243, 65%, 43%)
CMYK
cmyk(62%, 65%, 0%, 57%)
Oklch
oklch(32.3% 0.119 279.3)

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

#1E2049

Indigo · MidnightBlue · Deep Sea Blue

HEX
#1E2049
RGB
rgb(30, 32, 73)
HSL
hsl(237, 42%, 20%)
HSB
hsb(237, 59%, 29%)
CMYK
cmyk(59%, 56%, 0%, 71%)
Oklch
oklch(26.7% 0.075 277.9)

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

#131224

Deep Indigo · Black · Deep Sea Blue

HEX
#131224
RGB
rgb(19, 18, 36)
HSL
hsl(243, 33%, 11%)
HSB
hsb(243, 50%, 14%)
CMYK
cmyk(47%, 50%, 0%, 86%)
Oklch
oklch(19.4% 0.036 285.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3D75FF
FFC83D

Analogous

3DD5FF
3D75FF
673DFF

Triadic

3D75FF
FF3D74
74FF3D

Split-Comp.

3D75FF
FF673D
D5FF3D

Tetradic

3D75FF
FF3DD5
FFC83D
3DFF67

Contrast Matrix WCAG 2.1 Contrast

3D75FF
1F48C4
2A276E
1E2049
131224
—
1.9
Fail
3.2
AA Large
3.8
AA Large
4.6
AA
1.9
Fail
—
1.7
Fail
2.0
Fail
2.4
Fail
3.2
AA Large
1.7
Fail
—
1.2
Fail
1.4
Fail
3.8
AA Large
2.0
Fail
1.2
Fail
—
1.2
Fail
4.6
AA
2.4
Fail
1.4
Fail
1.2
Fail
—
White BG
4.0AA Large
7.5AAA
13.0AAA
15.5AAA
18.4AAA
Black BG
5.2AA
2.8Fail
1.6Fail
1.4Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

5556DE
3131A6
29295D
1F1F3F
131320

Deuteranopia

524ED6
2E2B9F
292959
1F1F3D
13131F

Tritanopia

40C3BD
218E89
2A4F4C
1E3736
131C1B

Achromatopsia

747474
4A4A4A
303030
242424
141414

Shades & Tints Shades & Tints

#3D75FF

Dark
Light

#1F48C4

Dark
Light

#2A276E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3d75ff;
  --color-2: #1f48c4;
  --color-3: #2a276e;
  --color-4: #1e2049;
  --color-5: #131224;
}

SCSS

$color-1: #3d75ff;
$color-2: #1f48c4;
$color-3: #2a276e;
$color-4: #1e2049;
$color-5: #131224;

TAILWIND

colors: {
  'brand-1': '#3d75ff',
  'brand-2': '#1f48c4',
  'brand-3': '#2a276e',
  'brand-4': '#1e2049',
  'brand-5': '#131224',
}

RGB Array

[61, 117, 255], [31, 72, 196], [42, 39, 110], [30, 32, 73], [19, 18, 36]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3D75FF, #1F48C4, #2A276E, #1E2049, #131224 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: #3d75ff; --color-2: #1f48c4; --color-3: #2a276e; --color-4: #1e2049; --color-5: #131224. 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