← Back to Editor

#656C8E · #5B5F71 · #525253 · #484436 · #3E3718

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporate

Color Details Color Details

#656C8E

Indigo · SlateGray · Navy Blue

HEX
#656C8E
RGB
rgb(101, 108, 142)
HSL
hsl(230, 17%, 48%)
HSB
hsb(230, 29%, 56%)
CMYK
cmyk(29%, 24%, 0%, 44%)
Oklch
oklch(53.9% 0.054 275.4)

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

#5B5F71

Indigo · DimGray · Prussian Blue

HEX
#5B5F71
RGB
rgb(91, 95, 113)
HSL
hsl(229, 11%, 40%)
HSB
hsb(229, 19%, 44%)
CMYK
cmyk(19%, 16%, 0%, 56%)
Oklch
oklch(48.9% 0.029 275.4)

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

#525253

Ink Gray · DarkSlateGray · Charcoal

HEX
#525253
RGB
rgb(82, 82, 83)
HSL
hsl(240, 1%, 32%)
HSB
hsb(240, 1%, 33%)
CMYK
cmyk(1%, 1%, 0%, 67%)
Oklch
oklch(43.9% 0.002 286.3)

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

#484436

Ochre · DarkSlateGray · Amber Gold

HEX
#484436
RGB
rgb(72, 68, 54)
HSL
hsl(47, 14%, 25%)
HSB
hsb(47, 25%, 28%)
CMYK
cmyk(0%, 6%, 25%, 72%)
Oklch
oklch(38.6% 0.023 94.0)

Traditional「Ochre」· Paint「Amber Gold」· Creative Blush Sunrise

#3E3718

Ochre · DarkOliveGreen · Amber Gold

HEX
#3E3718
RGB
rgb(62, 55, 24)
HSL
hsl(49, 44%, 17%)
HSB
hsb(49, 61%, 24%)
CMYK
cmyk(0%, 11%, 61%, 76%)
Oklch
oklch(33.6% 0.048 96.9)

Traditional「Ochre」· Paint「Amber Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

656C8E
8F8866

Analogous

66818F
656C8E
73668F

Triadic

656C8E
8F666D
6D8F66

Split-Comp.

656C8E
8F7366
818F66

Tetradic

656C8E
8F6681
8F8866
668F73

Contrast Matrix WCAG 2.1 Contrast

656C8E
5B5F71
525253
484436
3E3718
—
1.2
Fail
1.5
Fail
1.9
Fail
2.3
Fail
1.2
Fail
—
1.2
Fail
1.5
Fail
1.9
Fail
1.5
Fail
1.2
Fail
—
1.2
Fail
1.5
Fail
1.9
Fail
1.5
Fail
1.2
Fail
—
1.2
Fail
2.3
Fail
1.9
Fail
1.5
Fail
1.2
Fail
—
White BG
5.1AA
6.3AA
7.8AAA
9.7AAA
11.9AAA
Black BG
4.1AA Large
3.3AA Large
2.7Fail
2.2Fail
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

686886
5D5D6D
525253
464639
3B3B20

Deuteranopia

686784
5D5C6C
525253
47473A
3B3C21

Tritanopia

657F7E
5B6968
525353
483C3D
3E2527

Achromatopsia

6E6E6E
606060
525252
444444
363636

Shades & Tints Shades & Tints

#656C8E

Dark
Light

#5B5F71

Dark
Light

#525253

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #656c8e;
  --color-2: #5b5f71;
  --color-3: #525253;
  --color-4: #484436;
  --color-5: #3e3718;
}

SCSS

$color-1: #656c8e;
$color-2: #5b5f71;
$color-3: #525253;
$color-4: #484436;
$color-5: #3e3718;

TAILWIND

colors: {
  'brand-1': '#656c8e',
  'brand-2': '#5b5f71',
  'brand-3': '#525253',
  'brand-4': '#484436',
  'brand-5': '#3e3718',
}

RGB Array

[101, 108, 142], [91, 95, 113], [82, 82, 83], [72, 68, 54], [62, 55, 24]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #656C8E, #5B5F71, #525253, #484436, #3E3718 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs. 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: #656c8e; --color-2: #5b5f71; --color-3: #525253; --color-4: #484436; --color-5: #3e3718. 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 finance, legal, luxury 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