#2C4D52 + #1A363A + #0C2124 + #B2170B + #E31C0D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2C4D52

Slate Blue · DarkSlateGray · Peacock Green

HEX

#2C4D52

RGB

rgb(44, 77, 82)

HSL

hsl(188, 30%, 25%)

HSB

hsb(188, 46%, 32%)

CMYK

cmyk(46%, 6%, 0%, 68%)

Oklch

oklch(39.7% 0.040 208.0)

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

#1A363A

Slate Blue · DarkSlateGray · Peacock Green

HEX

#1A363A

RGB

rgb(26, 54, 58)

HSL

hsl(188, 38%, 16%)

HSB

hsb(188, 55%, 23%)

CMYK

cmyk(55%, 7%, 0%, 77%)

Oklch

oklch(31.3% 0.035 207.5)

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

#0C2124

Slate Blue · Black · Peacock Green

HEX

#0C2124

RGB

rgb(12, 33, 36)

HSL

hsl(188, 50%, 9%)

HSB

hsb(188, 67%, 14%)

CMYK

cmyk(67%, 8%, 0%, 86%)

Oklch

oklch(23.2% 0.027 207.6)

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

#B2170B

Vermilion · FireBrick · Wine Red

HEX

#B2170B

RGB

rgb(178, 23, 11)

HSL

hsl(4, 88%, 37%)

HSB

hsb(4, 94%, 70%)

CMYK

cmyk(0%, 87%, 94%, 30%)

Oklch

oklch(48.8% 0.188 29.8)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

#E31C0D

Vermilion · Red · Passion Red

HEX

#E31C0D

RGB

rgb(227, 28, 13)

HSL

hsl(4, 89%, 47%)

HSB

hsb(4, 94%, 89%)

CMYK

cmyk(0%, 88%, 94%, 11%)

Oklch

oklch(58.3% 0.228 29.8)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2C4D52

53322D

Analogous

2D5345

2C4D52

2D3B53

Triadic

2C4D52

532D4E

4E532D

Split-Comp.

2C4D52

532D3B

53452D

Tetradic

2C4D52

452D53

53322D

3B532D

Contrast Matrix WCAG 2.1 Contrast

2C4D52	1A363A	0C2124	B2170B	E31C0D
—	1.4 Fail	1.8 Fail	1.3 Fail	1.9 Fail
1.4 Fail	—	1.3 Fail	1.8 Fail	2.7 Fail
1.8 Fail	1.3 Fail	—	2.4 Fail	3.5 AA Large
1.3 Fail	1.8 Fail	2.4 Fail	—	1.5 Fail
1.9 Fail	2.7 Fail	3.5 AA Large	1.5 Fail	—

White BG

9.2AAA

12.9AAA

16.7AAA

7.0AA

4.7AA

Black BG

2.3Fail

1.6Fail

1.3Fail

3.0AA Large

4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

3A3B51

262639

151523

6F6D0E

8D8B11

Deuteranopia

383651

252239

141223

78840F

98A712

Tritanopia

2E5050

1B3838

0D2323

AA1011

D91314

Achromatopsia

444444

2E2E2E

1B1B1B

444444

565656

Shades & Tints Shades & Tints

#2C4D52

Dark

Light

#1A363A

Dark

Light

#0C2124

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2c4d52;
  --color-2: #1a363a;
  --color-3: #0c2124;
  --color-4: #b2170b;
  --color-5: #e31c0d;
}

SCSS

$color-1: #2c4d52;
$color-2: #1a363a;
$color-3: #0c2124;
$color-4: #b2170b;
$color-5: #e31c0d;

TAILWIND

colors: {
  'brand-1': '#2c4d52',
  'brand-2': '#1a363a',
  'brand-3': '#0c2124',
  'brand-4': '#b2170b',
  'brand-5': '#e31c0d',
}

RGB Array

[44, 77, 82], [26, 54, 58], [12, 33, 36], [178, 23, 11], [227, 28, 13]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2C4D52, #1A363A, #0C2124, #B2170B, #E31C0D 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: #2c4d52; --color-2: #1a363a; --color-3: #0c2124; --color-4: #b2170b; --color-5: #e31c0d. 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