← Back to Editor

#2E3142 · #4D4856 · #6D5F69 · #8C757D · #AB8C90

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2E3142

Indigo · DarkSlateGray · Prussian Blue

HEX
#2E3142
RGB
rgb(46, 49, 66)
HSL
hsl(231, 18%, 22%)
HSB
hsb(231, 30%, 26%)
CMYK
cmyk(30%, 26%, 0%, 74%)
Oklch
oklch(31.8% 0.031 276.7)

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

#4D4856

Deep Indigo · DarkSlateGray · Charcoal

HEX
#4D4856
RGB
rgb(77, 72, 86)
HSL
hsl(261, 9%, 31%)
HSB
hsb(261, 16%, 34%)
CMYK
cmyk(10%, 16%, 0%, 66%)
Oklch
oklch(41.2% 0.024 301.6)

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

#6D5F69

Ink Gray · DimGray · Charcoal

HEX
#6D5F69
RGB
rgb(109, 95, 105)
HSL
hsl(317, 7%, 40%)
HSB
hsb(317, 13%, 43%)
CMYK
cmyk(0%, 13%, 4%, 57%)
Oklch
oklch(50.2% 0.024 336.1)

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

#8C757D

Dark Violet · Gray · Warm Gray

HEX
#8C757D
RGB
rgb(140, 117, 125)
HSL
hsl(339, 9%, 50%)
HSB
hsb(339, 16%, 55%)
CMYK
cmyk(0%, 16%, 11%, 45%)
Oklch
oklch(58.7% 0.031 355.2)

Traditional「Dark Violet」· Paint「Warm Gray」· Creative Urban Concrete

#AB8C90

Peach Pink · DarkGray · Coral Red

HEX
#AB8C90
RGB
rgb(171, 140, 144)
HSL
hsl(352, 16%, 61%)
HSB
hsb(352, 18%, 67%)
CMYK
cmyk(0%, 18%, 16%, 33%)
Oklch
oklch(67.0% 0.038 9.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2E3142
423F2E

Analogous

2E3B42
2E3142
352E42

Triadic

2E3142
422E31
31422E

Split-Comp.

2E3142
42352E
3B422E

Tetradic

2E3142
422E3B
423F2E
2E4235

Contrast Matrix WCAG 2.1 Contrast

2E3142
4D4856
6D5F69
8C757D
AB8C90
—
1.5
Fail
2.1
Fail
3.0
AA Large
4.2
AA Large
1.5
Fail
—
1.5
Fail
2.1
Fail
2.9
Fail
2.1
Fail
1.5
Fail
—
1.4
Fail
2.0
Fail
3.0
AA Large
2.1
Fail
1.4
Fail
—
1.4
Fail
4.2
AA Large
2.9
Fail
2.0
Fail
1.4
Fail
—
White BG
12.9AAA
8.8AAA
6.0AA
4.2AA Large
3.0AA Large
Black BG
1.6Fail
2.4Fail
3.5AA Large
5.0AA
6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2F2F3E
4B4B53
676767
82827B
9E9D8F

Deuteranopia

2F2F3D
4B4C52
686966
83857B
9FA28F

Tritanopia

2E3B3A
4D504F
6C6564
8B7A79
A98E8E

Achromatopsia

323232
4B4B4B
646464
7D7D7D
969696

Shades & Tints Shades & Tints

#2E3142

Dark
Light

#4D4856

Dark
Light

#6D5F69

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2e3142;
  --color-2: #4d4856;
  --color-3: #6d5f69;
  --color-4: #8c757d;
  --color-5: #ab8c90;
}

SCSS

$color-1: #2e3142;
$color-2: #4d4856;
$color-3: #6d5f69;
$color-4: #8c757d;
$color-5: #ab8c90;

TAILWIND

colors: {
  'brand-1': '#2e3142',
  'brand-2': '#4d4856',
  'brand-3': '#6d5f69',
  'brand-4': '#8c757d',
  'brand-5': '#ab8c90',
}

RGB Array

[46, 49, 66], [77, 72, 86], [109, 95, 105], [140, 117, 125], [171, 140, 144]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2E3142, #4D4856, #6D5F69, #8C757D, #AB8C90 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #2e3142; --color-2: #4d4856; --color-3: #6d5f69; --color-4: #8c757d; --color-5: #ab8c90. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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. Restrained colors convey professionalism and trust. 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