#58564A + #337E9B + #174C5C + #1A3852 + #0D1C1F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#58564A

Autumn Sage · DarkOliveGreen · Charcoal

HEX

#58564A

RGB

rgb(88, 86, 74)

HSL

hsl(51, 9%, 32%)

HSB

hsb(51, 16%, 35%)

CMYK

cmyk(0%, 2%, 16%, 65%)

Oklch

oklch(45.1% 0.019 99.3)

Traditional「Autumn Sage」· Paint「Charcoal」· Creative Midnight Shadow

#337E9B

Slate Blue · SteelBlue · Mint Ice

HEX

#337E9B

RGB

rgb(51, 126, 155)

HSL

hsl(197, 50%, 40%)

HSB

hsb(197, 67%, 61%)

CMYK

cmyk(67%, 19%, 0%, 39%)

Oklch

oklch(55.9% 0.086 227.0)

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

#174C5C

Lake Blue · DarkSlateGray · Peacock Green

HEX

#174C5C

RGB

rgb(23, 76, 92)

HSL

hsl(194, 60%, 23%)

HSB

hsb(194, 75%, 36%)

CMYK

cmyk(75%, 17%, 0%, 64%)

Oklch

oklch(39.0% 0.061 221.8)

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

#1A3852

Lake Blue · DarkSlateGray · Prussian Blue

HEX

#1A3852

RGB

rgb(26, 56, 82)

HSL

hsl(208, 52%, 21%)

HSB

hsb(208, 68%, 32%)

CMYK

cmyk(68%, 32%, 0%, 68%)

Oklch

oklch(33.1% 0.059 246.9)

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

#0D1C1F

Slate Blue · Black · Peacock Green

HEX

#0D1C1F

RGB

rgb(13, 28, 31)

HSL

hsl(190, 41%, 9%)

HSB

hsb(190, 58%, 12%)

CMYK

cmyk(58%, 10%, 0%, 88%)

Oklch

oklch(21.4% 0.021 211.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

58564A

4A4C59

Analogous

594F4A

58564A

54594A

Triadic

58564A

4A5957

574A59

Split-Comp.

58564A

4A5459

4F4A59

Tetradic

58564A

4A594F

4A4C59

594A54

Contrast Matrix WCAG 2.1 Contrast

58564A	337E9B	174C5C	1A3852	0D1C1F
—	1.6 Fail	1.3 Fail	1.6 Fail	2.4 Fail
1.6 Fail	—	2.1 Fail	2.7 Fail	3.8 AA Large
1.3 Fail	2.1 Fail	—	1.3 Fail	1.8 Fail
1.6 Fail	2.7 Fail	1.3 Fail	—	1.4 Fail
2.4 Fail	3.8 AA Large	1.8 Fail	1.4 Fail	—

White BG

7.4AAA

4.6AA

9.4AAA

12.1AAA

17.5AAA

Black BG

2.8Fail

4.6AA

2.2Fail

1.7Fail

1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

57574D

535494

2E2E58

27274C

13141E

Deuteranopia

57574E

4F4A92

2B2757

25234A

13121E

Tritanopia

584F50

378E8D

1A5554

1C4746

0E1E1E

Achromatopsia

555555

6B6B6B

3E3E3E

323232

181818

Shades & Tints Shades & Tints

#58564A

Dark

Light

#337E9B

Dark

Light

#174C5C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #58564a;
  --color-2: #337e9b;
  --color-3: #174c5c;
  --color-4: #1a3852;
  --color-5: #0d1c1f;
}

SCSS

$color-1: #58564a;
$color-2: #337e9b;
$color-3: #174c5c;
$color-4: #1a3852;
$color-5: #0d1c1f;

TAILWIND

colors: {
  'brand-1': '#58564a',
  'brand-2': '#337e9b',
  'brand-3': '#174c5c',
  'brand-4': '#1a3852',
  'brand-5': '#0d1c1f',
}

RGB Array

[88, 86, 74], [51, 126, 155], [23, 76, 92], [26, 56, 82], [13, 28, 31]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #58564A, #337E9B, #174C5C, #1A3852, #0D1C1F 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: #58564a; --color-2: #337e9b; --color-3: #174c5c; --color-4: #1a3852; --color-5: #0d1c1f. 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