#224752 + #182D33 + #1B1C30 + #1A151F + #542947 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#224752

Slate Blue · DarkSlateGray · Peacock Green

HEX

#224752

RGB

rgb(34, 71, 82)

HSL

hsl(194, 41%, 23%)

HSB

hsb(194, 59%, 32%)

CMYK

cmyk(59%, 13%, 0%, 68%)

Oklch

oklch(37.5% 0.046 219.6)

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

#182D33

Slate Blue · DarkSlateGray · Peacock Green

HEX

#182D33

RGB

rgb(24, 45, 51)

HSL

hsl(193, 36%, 15%)

HSB

hsb(193, 53%, 20%)

CMYK

cmyk(53%, 12%, 0%, 80%)

Oklch

oklch(28.2% 0.029 218.0)

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

#1B1C30

Indigo · Black · Deep Sea Blue

HEX

#1B1C30

RGB

rgb(27, 28, 48)

HSL

hsl(237, 28%, 15%)

HSB

hsb(237, 44%, 19%)

CMYK

cmyk(44%, 42%, 0%, 81%)

Oklch

oklch(23.6% 0.038 280.8)

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

#1A151F

Dark Plum · Black · Dark Purple

HEX

#1A151F

RGB

rgb(26, 21, 31)

HSL

hsl(270, 19%, 10%)

HSB

hsb(270, 32%, 12%)

CMYK

cmyk(16%, 32%, 0%, 88%)

Oklch

oklch(20.6% 0.021 307.3)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

#542947

Rose Purple · DarkSlateGray · Eggplant

HEX

#542947

RGB

rgb(84, 41, 71)

HSL

hsl(318, 34%, 25%)

HSB

hsb(318, 51%, 33%)

CMYK

cmyk(0%, 51%, 15%, 67%)

Oklch

oklch(35.0% 0.077 339.8)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

224752

532E23

Analogous

235346

224752

232F53

Triadic

224752

532347

475323

Split-Comp.

224752

53232F

534623

Tetradic

224752

462353

532E23

2F5323

Contrast Matrix WCAG 2.1 Contrast

224752	182D33	1B1C30	1A151F	542947
—	1.4 Fail	1.7 Fail	1.8 Fail	1.2 Fail
1.4 Fail	—	1.2 Fail	1.2 Fail	1.2 Fail
1.7 Fail	1.2 Fail	—	1.1 Fail	1.4 Fail
1.8 Fail	1.2 Fail	1.1 Fail	—	1.5 Fail
1.2 Fail	1.2 Fail	1.4 Fail	1.5 Fail	—

White BG

10.0AAA

14.4AAA

16.7AAA

17.9AAA

11.8AAA

Black BG

2.1Fail

1.5Fail

1.3Fail

1.2Fail

1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

32324F

212132

1B1B2B

18181D

414140

Deuteranopia

302D4F

201E31

1B1B2A

18191C

44473E

Tritanopia

244D4D

193030

1B2727

1A1B1A

523A39

Achromatopsia

3D3D3D

272727

1E1E1E

181818

393939

Shades & Tints Shades & Tints

#224752

Dark

Light

#182D33

Dark

Light

#1B1C30

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #224752;
  --color-2: #182d33;
  --color-3: #1b1c30;
  --color-4: #1a151f;
  --color-5: #542947;
}

SCSS

$color-1: #224752;
$color-2: #182d33;
$color-3: #1b1c30;
$color-4: #1a151f;
$color-5: #542947;

TAILWIND

colors: {
  'brand-1': '#224752',
  'brand-2': '#182d33',
  'brand-3': '#1b1c30',
  'brand-4': '#1a151f',
  'brand-5': '#542947',
}

RGB Array

[34, 71, 82], [24, 45, 51], [27, 28, 48], [26, 21, 31], [84, 41, 71]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #224752, #182D33, #1B1C30, #1A151F, #542947 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: #224752; --color-2: #182d33; --color-3: #1b1c30; --color-4: #1a151f; --color-5: #542947. 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