#364B66 + #0A2245 + #15386B + #2E558F + #427BB8 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#364B66

Indigo · DarkSlateGray · Prussian Blue

HEX

#364B66

RGB

rgb(54, 75, 102)

HSL

hsl(214, 31%, 31%)

HSB

hsb(214, 47%, 40%)

CMYK

cmyk(47%, 26%, 0%, 60%)

Oklch

oklch(40.7% 0.053 255.0)

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

#0A2245

Indigo · MidnightBlue · Deep Sea Blue

HEX

#0A2245

RGB

rgb(10, 34, 69)

HSL

hsl(216, 75%, 15%)

HSB

hsb(216, 86%, 27%)

CMYK

cmyk(86%, 51%, 0%, 73%)

Oklch

oklch(25.6% 0.072 258.2)

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

#15386B

Indigo · MidnightBlue · Prussian Blue

HEX

#15386B

RGB

rgb(21, 56, 107)

HSL

hsl(216, 67%, 25%)

HSB

hsb(216, 80%, 42%)

CMYK

cmyk(80%, 48%, 0%, 58%)

Oklch

oklch(34.6% 0.098 258.2)

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

#2E558F

Indigo · DarkSlateBlue · Prussian Blue

HEX

#2E558F

RGB

rgb(46, 85, 143)

HSL

hsl(216, 51%, 37%)

HSB

hsb(216, 68%, 56%)

CMYK

cmyk(68%, 41%, 0%, 44%)

Oklch

oklch(45.1% 0.105 258.2)

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

#427BB8

Indigo · SteelBlue · Navy Blue

HEX

#427BB8

RGB

rgb(66, 123, 184)

HSL

hsl(211, 47%, 49%)

HSB

hsb(211, 64%, 72%)

CMYK

cmyk(64%, 33%, 0%, 28%)

Oklch

oklch(57.2% 0.112 251.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

364B66

685237

Analogous

376468

364B66

3A3768

Triadic

364B66

68374C

4C6837

Split-Comp.

364B66

683A37

646837

Tetradic

364B66

683764

685237

37683A

Contrast Matrix WCAG 2.1 Contrast

364B66	0A2245	15386B	2E558F	427BB8
—	1.8 Fail	1.3 Fail	1.2 Fail	2.0 Fail
1.8 Fail	—	1.4 Fail	2.1 Fail	3.6 AA Large
1.3 Fail	1.4 Fail	—	1.6 Fail	2.6 Fail
1.2 Fail	2.1 Fail	1.6 Fail	—	1.7 Fail
2.0 Fail	3.6 AA Large	2.6 Fail	1.7 Fail	—

White BG

8.9AAA

15.8AAA

11.6AAA

7.5AAA

4.4AA Large

Black BG

2.4Fail

1.3Fail

1.8Fail

2.8Fail

4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3F3F5F

14153D

24245F

3F3F81

5B5BA9

Deuteranopia

3E3C5E

13113B

22205C

3D3A7E

5753A6

Tritanopia

375A59

0B3634

175553

307673

459E9B

Achromatopsia

484848

1F1F1F

333333

505050

717171

Shades & Tints Shades & Tints

#364B66

Dark

Light

#0A2245

Dark

Light

#15386B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #364b66;
  --color-2: #0a2245;
  --color-3: #15386b;
  --color-4: #2e558f;
  --color-5: #427bb8;
}

SCSS

$color-1: #364b66;
$color-2: #0a2245;
$color-3: #15386b;
$color-4: #2e558f;
$color-5: #427bb8;

TAILWIND

colors: {
  'brand-1': '#364b66',
  'brand-2': '#0a2245',
  'brand-3': '#15386b',
  'brand-4': '#2e558f',
  'brand-5': '#427bb8',
}

RGB Array

[54, 75, 102], [10, 34, 69], [21, 56, 107], [46, 85, 143], [66, 123, 184]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #364B66, #0A2245, #15386B, #2E558F, #427BB8 is ideal for: tech websites, dark mode UIs, game UIs. 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: #364b66; --color-2: #0a2245; --color-3: #15386b; --color-4: #2e558f; --color-5: #427bb8. 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. 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