← Back to Editor

#4D6177 · #404F66 · #2A3233 · #8B8F96 · #AEB1B2

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

#4D6177

Indigo · DimGray · Prussian Blue

HEX
#4D6177
RGB
rgb(77, 97, 119)
HSL
hsl(211, 21%, 38%)
HSB
hsb(211, 35%, 47%)
CMYK
cmyk(35%, 18%, 0%, 53%)
Oklch
oklch(48.5% 0.043 251.1)

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

#404F66

Indigo · DarkSlateGray · Prussian Blue

HEX
#404F66
RGB
rgb(64, 79, 102)
HSL
hsl(216, 23%, 33%)
HSB
hsb(216, 37%, 40%)
CMYK
cmyk(37%, 23%, 0%, 60%)
Oklch
oklch(42.4% 0.043 258.8)

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

#2A3233

Slate Blue · DarkSlateGray · Peacock Green

HEX
#2A3233
RGB
rgb(42, 50, 51)
HSL
hsl(187, 10%, 18%)
HSB
hsb(187, 18%, 20%)
CMYK
cmyk(18%, 2%, 0%, 80%)
Oklch
oklch(31.0% 0.011 205.8)

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

#8B8F96

Ash · LightSlateGray · Silver Sand

HEX
#8B8F96
RGB
rgb(139, 143, 150)
HSL
hsl(218, 5%, 57%)
HSB
hsb(218, 7%, 59%)
CMYK
cmyk(7%, 5%, 0%, 41%)
Oklch
oklch(64.9% 0.011 261.8)

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

#AEB1B2

Ash · DarkGray · Silver Sand

HEX
#AEB1B2
RGB
rgb(174, 177, 178)
HSL
hsl(195, 3%, 69%)
HSB
hsb(195, 2%, 70%)
CMYK
cmyk(2%, 1%, 0%, 30%)
Oklch
oklch(75.8% 0.004 219.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4D6177
75624D

Analogous

4D7575
4D6177
4D4D75

Triadic

4D6177
754D60
60754D

Split-Comp.

4D6177
754D4D
75754D

Tetradic

4D6177
754D75
75624D
4D754D

Contrast Matrix WCAG 2.1 Contrast

4D6177
404F66
2A3233
8B8F96
AEB1B2
—
1.3
Fail
2.1
Fail
2.0
Fail
3.0
Fail
1.3
Fail
—
1.6
Fail
2.6
Fail
3.8
AA Large
2.1
Fail
1.6
Fail
—
4.0
AA Large
6.1
AA
2.0
Fail
2.6
Fail
4.0
AA Large
—
1.5
Fail
3.0
Fail
3.8
AA Large
6.1
AA
1.5
Fail
—
White BG
6.4AA
8.3AAA
13.1AAA
3.2AA Large
2.2Fail
Black BG
3.3AA Large
2.5Fail
1.6Fail
6.5AA
9.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

565672
464760
2D2E33
8D8D94
AFAFB2

Deuteranopia

555370
46455F
2D2C33
8D8C94
AFAFB2

Tritanopia

4E6D6D
415C5B
2A3333
8B9393
AEB2B2

Achromatopsia

5E5E5E
4D4D4D
303030
8F8F8F
B0B0B0

Shades & Tints Shades & Tints

#4D6177

Dark
Light

#404F66

Dark
Light

#2A3233

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4d6177;
  --color-2: #404f66;
  --color-3: #2a3233;
  --color-4: #8b8f96;
  --color-5: #aeb1b2;
}

SCSS

$color-1: #4d6177;
$color-2: #404f66;
$color-3: #2a3233;
$color-4: #8b8f96;
$color-5: #aeb1b2;

TAILWIND

colors: {
  'brand-1': '#4d6177',
  'brand-2': '#404f66',
  'brand-3': '#2a3233',
  'brand-4': '#8b8f96',
  'brand-5': '#aeb1b2',
}

RGB Array

[77, 97, 119], [64, 79, 102], [42, 50, 51], [139, 143, 150], [174, 177, 178]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4D6177, #404F66, #2A3233, #8B8F96, #AEB1B2 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: #4d6177; --color-2: #404f66; --color-3: #2a3233; --color-4: #8b8f96; --color-5: #aeb1b2. 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