#5B5560 + #1A8790 + #346374 + #1BB8AA + #2E0232 · dark - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#5B5560

Ink Gray · DimGray · Charcoal

HEX

#5B5560

RGB

rgb(91, 85, 96)

HSL

hsl(273, 6%, 35%)

HSB

hsb(273, 11%, 38%)

CMYK

cmyk(5%, 11%, 0%, 62%)

Oklch

oklch(45.9% 0.019 309.9)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#1A8790

Lake Blue · Teal · Mint Ice

HEX

#1A8790

RGB

rgb(26, 135, 144)

HSL

hsl(185, 69%, 33%)

HSB

hsb(185, 82%, 56%)

CMYK

cmyk(82%, 6%, 0%, 44%)

Oklch

oklch(57.1% 0.091 203.6)

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

#346374

Slate Blue · DarkSlateGray · Mint Ice

HEX

#346374

RGB

rgb(52, 99, 116)

HSL

hsl(196, 38%, 33%)

HSB

hsb(196, 55%, 45%)

CMYK

cmyk(55%, 15%, 0%, 55%)

Oklch

oklch(47.4% 0.058 223.8)

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

#1BB8AA

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#1BB8AA

RGB

rgb(27, 184, 170)

HSL

hsl(175, 74%, 41%)

HSB

hsb(175, 85%, 72%)

CMYK

cmyk(85%, 0%, 8%, 28%)

Oklch

oklch(70.6% 0.120 185.1)

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

#2E0232

Royal Purple · Black · Dark Purple

HEX

#2E0232

RGB

rgb(46, 2, 50)

HSL

hsl(295, 92%, 10%)

HSB

hsb(295, 96%, 20%)

CMYK

cmyk(8%, 96%, 0%, 80%)

Oklch

oklch(21.7% 0.097 324.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5B5560

595F54

Analogous

54545F

5B5560

5F545E

Triadic

5B5560

5F5A54

545F5A

Split-Comp.

5B5560

5E5F54

545F54

Tetradic

5B5560

5F5454

595F54

545E5F

Contrast Matrix WCAG 2.1 Contrast

5B5560	1A8790	346374	1BB8AA	2E0232
—	1.7 Fail	1.1 Fail	2.9 Fail	2.5 Fail
1.7 Fail	—	1.5 Fail	1.7 Fail	4.2 AA Large
1.1 Fail	1.5 Fail	—	2.7 Fail	2.7 Fail
2.9 Fail	1.7 Fail	2.7 Fail	—	7.2 AAA
2.5 Fail	4.2 AA Large	2.7 Fail	7.2 AAA	—

White BG

7.2AAA

4.3AA Large

6.6AA

2.5Fail

17.9AAA

Black BG

2.9Fail

4.9AA

3.2AA Large

8.5AAA

1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

58585D

494A8E

484970

5F60AD

1B1B26

Deuteranopia

59595D

433B8D

46426F

564AAE

1E2124

Tritanopia

5B5B5B

1F8C8C

366D6C

23B0B1

2C1D1B

Achromatopsia

585858

676767

575757

878787

151515

Shades & Tints Shades & Tints

#5B5560

Dark

Light

#1A8790

Dark

Light

#346374

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5b5560;
  --color-2: #1a8790;
  --color-3: #346374;
  --color-4: #1bb8aa;
  --color-5: #2e0232;
}

SCSS

$color-1: #5b5560;
$color-2: #1a8790;
$color-3: #346374;
$color-4: #1bb8aa;
$color-5: #2e0232;

TAILWIND

colors: {
  'brand-1': '#5b5560',
  'brand-2': '#1a8790',
  'brand-3': '#346374',
  'brand-4': '#1bb8aa',
  'brand-5': '#2e0232',
}

RGB Array

[91, 85, 96], [26, 135, 144], [52, 99, 116], [27, 184, 170], [46, 2, 50]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #5B5560, #1A8790, #346374, #1BB8AA, #2E0232 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: #5b5560; --color-2: #1a8790; --color-3: #346374; --color-4: #1bb8aa; --color-5: #2e0232. 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 dark-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