← Back to Editor

#2F3133 · #4A4C4D · #939798 · #9CC7E4 · #556D7D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#2F3133

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#2F3133
RGB
rgb(47, 49, 51)
HSL
hsl(210, 4%, 19%)
HSB
hsb(210, 8%, 20%)
CMYK
cmyk(8%, 4%, 0%, 80%)
Oklch
oklch(31.2% 0.005 248.0)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#4A4C4D

Dark Cyan · DarkSlateGray · Charcoal

HEX
#4A4C4D
RGB
rgb(74, 76, 77)
HSL
hsl(200, 2%, 30%)
HSB
hsb(200, 4%, 30%)
CMYK
cmyk(4%, 1%, 0%, 70%)
Oklch
oklch(41.5% 0.003 228.8)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#939798

Ash · LightSlateGray · Silver Sand

HEX
#939798
RGB
rgb(147, 151, 152)
HSL
hsl(192, 2%, 59%)
HSB
hsb(192, 3%, 60%)
CMYK
cmyk(3%, 1%, 0%, 40%)
Oklch
oklch(67.3% 0.005 214.3)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#9CC7E4

Sky Blue · LightSteelBlue · Cobalt Blue

HEX
#9CC7E4
RGB
rgb(156, 199, 228)
HSL
hsl(204, 57%, 75%)
HSB
hsb(204, 32%, 89%)
CMYK
cmyk(32%, 13%, 0%, 11%)
Oklch
oklch(80.9% 0.061 238.0)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#556D7D

Slate Blue · DimGray · Navy Blue

HEX
#556D7D
RGB
rgb(85, 109, 125)
HSL
hsl(204, 19%, 41%)
HSB
hsb(204, 32%, 49%)
CMYK
cmyk(32%, 13%, 0%, 51%)
Oklch
oklch(52.2% 0.038 237.6)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2F3133
32302F

Analogous

2F3232
2F3133
2F2F32

Triadic

2F3133
322F30
30322F

Split-Comp.

2F3133
322F2F
32322F

Tetradic

2F3133
322F32
32302F
2F322F

Contrast Matrix WCAG 2.1 Contrast

2F3133
4A4C4D
939798
9CC7E4
556D7D
—
1.5
Fail
4.4
AA Large
7.3
AAA
2.4
Fail
1.5
Fail
—
2.9
Fail
4.8
AA
1.6
Fail
4.4
AA Large
2.9
Fail
—
1.6
Fail
1.8
Fail
7.3
AAA
4.8
AA
1.6
Fail
—
3.0
AA Large
2.4
Fail
1.6
Fail
1.8
Fail
3.0
AA Large
—
White BG
13.1AAA
8.6AAA
2.9Fail
1.8Fail
5.4AA
Black BG
1.6Fail
2.4Fail
7.1AAA
11.7AAA
3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

303033
4B4B4D
959598
AFAFDD
5F6079

Deuteranopia

303032
4B4B4D
959498
ACA9DB
5E5C78

Tritanopia

2F3232
4A4D4D
939898
9ED7D6
567675

Achromatopsia

313131
4C4C4C
969696
BDBDBD
686868

Shades & Tints Shades & Tints

#2F3133

Dark
Light

#4A4C4D

Dark
Light

#939798

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2f3133;
  --color-2: #4a4c4d;
  --color-3: #939798;
  --color-4: #9cc7e4;
  --color-5: #556d7d;
}

SCSS

$color-1: #2f3133;
$color-2: #4a4c4d;
$color-3: #939798;
$color-4: #9cc7e4;
$color-5: #556d7d;

TAILWIND

colors: {
  'brand-1': '#2f3133',
  'brand-2': '#4a4c4d',
  'brand-3': '#939798',
  'brand-4': '#9cc7e4',
  'brand-5': '#556d7d',
}

RGB Array

[47, 49, 51], [74, 76, 77], [147, 151, 152], [156, 199, 228], [85, 109, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2F3133, #4A4C4D, #939798, #9CC7E4, #556D7D is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #2f3133; --color-2: #4a4c4d; --color-3: #939798; --color-4: #9cc7e4; --color-5: #556d7d. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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