← Back to Editor

#564744 · #4C4F58 · #41566B · #375E7F · #748B85

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

#564744

Crimson · DarkSlateGray · Wine Red

HEX
#564744
RGB
rgb(86, 71, 68)
HSL
hsl(10, 12%, 30%)
HSB
hsb(10, 21%, 34%)
CMYK
cmyk(0%, 17%, 21%, 66%)
Oklch
oklch(41.2% 0.021 31.2)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#4C4F58

Ink Gray · DarkSlateGray · Charcoal

HEX
#4C4F58
RGB
rgb(76, 79, 88)
HSL
hsl(225, 7%, 32%)
HSB
hsb(225, 14%, 35%)
CMYK
cmyk(14%, 10%, 0%, 65%)
Oklch
oklch(42.8% 0.015 271.0)

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

#41566B

Indigo · DarkSlateGray · Prussian Blue

HEX
#41566B
RGB
rgb(65, 86, 107)
HSL
hsl(210, 24%, 34%)
HSB
hsb(210, 39%, 42%)
CMYK
cmyk(39%, 20%, 0%, 58%)
Oklch
oklch(44.4% 0.043 248.8)

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

#375E7F

Slate Blue · DarkSlateBlue · Prussian Blue

HEX
#375E7F
RGB
rgb(55, 94, 127)
HSL
hsl(207, 40%, 36%)
HSB
hsb(207, 57%, 50%)
CMYK
cmyk(57%, 26%, 0%, 50%)
Oklch
oklch(46.8% 0.070 245.6)

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

#748B85

Mineral Blue · SlateGray · Warm Gray

HEX
#748B85
RGB
rgb(116, 139, 133)
HSL
hsl(164, 9%, 50%)
HSB
hsb(164, 17%, 55%)
CMYK
cmyk(17%, 0%, 4%, 45%)
Oklch
oklch(61.7% 0.028 177.8)

Traditional「Mineral Blue」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

564744
435356

Analogous

564349
564744
565043

Triadic

564744
435646
464356

Split-Comp.

564744
435650
434956

Tetradic

564744
495643
435356
504356

Contrast Matrix WCAG 2.1 Contrast

564744
4C4F58
41566B
375E7F
748B85
—
1.1
Fail
1.2
Fail
1.3
Fail
2.4
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
2.2
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
2.1
Fail
1.3
Fail
1.2
Fail
1.1
Fail
—
1.9
Fail
2.4
Fail
2.2
Fail
2.1
Fail
1.9
Fail
—
White BG
8.8AAA
8.2AAA
7.6AAA
6.8AA
3.6AA Large
Black BG
2.4Fail
2.6Fail
2.8Fail
3.1AA Large
5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

504F45
4D4D56
4A4A66
484877
7E7E86

Deuteranopia

505245
4D4D55
494765
464375
7D7B87

Tritanopia

554545
4C5454
426261
39716F
758888

Achromatopsia

4B4B4B
4F4F4F
525252
565656
838383

Shades & Tints Shades & Tints

#564744

Dark
Light

#4C4F58

Dark
Light

#41566B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #564744;
  --color-2: #4c4f58;
  --color-3: #41566b;
  --color-4: #375e7f;
  --color-5: #748b85;
}

SCSS

$color-1: #564744;
$color-2: #4c4f58;
$color-3: #41566b;
$color-4: #375e7f;
$color-5: #748b85;

TAILWIND

colors: {
  'brand-1': '#564744',
  'brand-2': '#4c4f58',
  'brand-3': '#41566b',
  'brand-4': '#375e7f',
  'brand-5': '#748b85',
}

RGB Array

[86, 71, 68], [76, 79, 88], [65, 86, 107], [55, 94, 127], [116, 139, 133]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #564744, #4C4F58, #41566B, #375E7F, #748B85 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: #564744; --color-2: #4c4f58; --color-3: #41566b; --color-4: #375e7f; --color-5: #748b85. 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