#133C66 + #122130 + #5E666E + #0578EB + #2E2E2E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#133C66

Indigo · MidnightBlue · Prussian Blue

HEX

#133C66

RGB

rgb(19, 60, 102)

HSL

hsl(210, 69%, 24%)

HSB

hsb(210, 81%, 40%)

CMYK

cmyk(81%, 41%, 0%, 60%)

Oklch

oklch(35.1% 0.086 252.1)

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

#122130

Indigo · Black · Deep Sea Blue

HEX

#122130

RGB

rgb(18, 33, 48)

HSL

hsl(210, 45%, 13%)

HSB

hsb(210, 63%, 19%)

CMYK

cmyk(63%, 31%, 0%, 81%)

Oklch

oklch(24.2% 0.036 249.5)

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

#5E666E

Indigo · DimGray · Charcoal

HEX

#5E666E

RGB

rgb(94, 102, 110)

HSL

hsl(210, 8%, 40%)

HSB

hsb(210, 15%, 43%)

CMYK

cmyk(15%, 7%, 0%, 57%)

Oklch

oklch(50.6% 0.016 248.1)

Traditional「Indigo」· Paint「Charcoal」· Creative Midnight Shadow

#0578EB

Indigo · DodgerBlue · Navy Blue

HEX

#0578EB

RGB

rgb(5, 120, 235)

HSL

hsl(210, 96%, 47%)

HSB

hsb(210, 98%, 92%)

CMYK

cmyk(98%, 49%, 0%, 8%)

Oklch

oklch(58.4% 0.195 255.7)

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

#2E2E2E

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#2E2E2E

RGB

rgb(46, 46, 46)

HSL

hsl(0, 0%, 18%)

HSB

hsb(0, 0%, 18%)

CMYK

cmyk(0%, 0%, 0%, 82%)

Oklch

oklch(30.1% 0.000 89.9)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

133C66

673D13

Analogous

136767

133C66

131367

Triadic

133C66

67133D

3D6713

Split-Comp.

133C66

671313

676713

Tetradic

133C66

671367

673D13

136713

Contrast Matrix WCAG 2.1 Contrast

133C66	122130	5E666E	0578EB	2E2E2E
—	1.5 Fail	1.9 Fail	2.6 Fail	1.2 Fail
1.5 Fail	—	2.8 Fail	3.8 AA Large	1.2 Fail
1.9 Fail	2.8 Fail	—	1.4 Fail	2.3 Fail
2.6 Fail	3.8 AA Large	1.4 Fail	—	3.2 AA Large
1.2 Fail	1.2 Fail	2.3 Fail	3.2 AA Large	—

White BG

11.3AAA

16.3AAA

5.8AA

4.3AA Large

13.6AAA

Black BG

1.9Fail

1.3Fail

3.6AA Large

4.9AA

1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

25255C

18192C

61626C

3738CF

2E2E2E

Deuteranopia

221F59

18172B

61606C

3028C9

2E2E2E

Tritanopia

155452

132A29

5E6B6A

0BB9B4

2E2E2E

Achromatopsia

353535

1E1E1E

656565

636363

2E2E2E

Shades & Tints Shades & Tints

#133C66

Dark

Light

#122130

Dark

Light

#5E666E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #133c66;
  --color-2: #122130;
  --color-3: #5e666e;
  --color-4: #0578eb;
  --color-5: #2e2e2e;
}

SCSS

$color-1: #133c66;
$color-2: #122130;
$color-3: #5e666e;
$color-4: #0578eb;
$color-5: #2e2e2e;

TAILWIND

colors: {
  'brand-1': '#133c66',
  'brand-2': '#122130',
  'brand-3': '#5e666e',
  'brand-4': '#0578eb',
  'brand-5': '#2e2e2e',
}

RGB Array

[19, 60, 102], [18, 33, 48], [94, 102, 110], [5, 120, 235], [46, 46, 46]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #133C66, #122130, #5E666E, #0578EB, #2E2E2E 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: #133c66; --color-2: #122130; --color-3: #5e666e; --color-4: #0578eb; --color-5: #2e2e2e. 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