← Back to Editor

#4E4856 · #664D53 · #80443A · #9A312B · #4E171D

cool

A 5-color cool 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

#4E4856

Deep Indigo · DarkSlateGray · Charcoal

HEX
#4E4856
RGB
rgb(78, 72, 86)
HSL
hsl(266, 9%, 31%)
HSB
hsb(266, 16%, 34%)
CMYK
cmyk(9%, 16%, 0%, 66%)
Oklch
oklch(41.3% 0.024 304.8)

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

#664D53

Crimson · DimGray · Wine Red

HEX
#664D53
RGB
rgb(102, 77, 83)
HSL
hsl(346, 14%, 35%)
HSB
hsb(346, 25%, 40%)
CMYK
cmyk(0%, 25%, 19%, 60%)
Oklch
oklch(44.9% 0.035 2.6)

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

#80443A

Crimson · Sienna · Wine Red

HEX
#80443A
RGB
rgb(128, 68, 58)
HSL
hsl(9, 38%, 36%)
HSB
hsb(9, 55%, 50%)
CMYK
cmyk(0%, 47%, 55%, 50%)
Oklch
oklch(45.8% 0.085 30.6)

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

#9A312B

Crimson · Brown · Wine Red

HEX
#9A312B
RGB
rgb(154, 49, 43)
HSL
hsl(3, 56%, 39%)
HSB
hsb(3, 72%, 60%)
CMYK
cmyk(0%, 68%, 72%, 40%)
Oklch
oklch(46.9% 0.141 27.2)

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

#4E171D

Crimson · Maroon · Deep Berry

HEX
#4E171D
RGB
rgb(78, 23, 29)
HSL
hsl(353, 54%, 20%)
HSB
hsb(353, 71%, 31%)
CMYK
cmyk(0%, 71%, 63%, 69%)
Oklch
oklch(29.6% 0.083 17.4)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4E4856
505648

Analogous

484956
4E4856
554856

Triadic

4E4856
564E48
48564E

Split-Comp.

4E4856
565548
495648

Tetradic

4E4856
564849
505648
485655

Contrast Matrix WCAG 2.1 Contrast

4E4856
664D53
80443A
9A312B
4E171D
—
1.2
Fail
1.2
Fail
1.2
Fail
1.6
Fail
1.2
Fail
—
1.0
Fail
1.0
Fail
1.9
Fail
1.2
Fail
1.0
Fail
—
1.0
Fail
1.9
Fail
1.2
Fail
1.0
Fail
1.0
Fail
—
1.9
Fail
1.6
Fail
1.9
Fail
1.9
Fail
1.9
Fail
—
White BG
8.8AAA
7.6AAA
7.5AAA
7.4AAA
14.3AAA
Black BG
2.4Fail
2.8Fail
2.8Fail
2.8Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

4B4B53
5B5B52
66653C
6D6C2C
36361C

Deuteranopia

4C4C52
5D5E51
6A6E3D
737B2D
393D1B

Tritanopia

4E504F
655050
7D3E3F
952E2E
4B1A1A

Achromatopsia

4B4B4B
555555
555555
505050
282828

Shades & Tints Shades & Tints

#4E4856

Dark
Light

#664D53

Dark
Light

#80443A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4e4856;
  --color-2: #664d53;
  --color-3: #80443a;
  --color-4: #9a312b;
  --color-5: #4e171d;
}

SCSS

$color-1: #4e4856;
$color-2: #664d53;
$color-3: #80443a;
$color-4: #9a312b;
$color-5: #4e171d;

TAILWIND

colors: {
  'brand-1': '#4e4856',
  'brand-2': '#664d53',
  'brand-3': '#80443a',
  'brand-4': '#9a312b',
  'brand-5': '#4e171d',
}

RGB Array

[78, 72, 86], [102, 77, 83], [128, 68, 58], [154, 49, 43], [78, 23, 29]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #4E4856, #664D53, #80443A, #9A312B, #4E171D is ideal for: tech websites, dark mode UIs, game UIs. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #4e4856; --color-2: #664d53; --color-3: #80443a; --color-4: #9a312b; --color-5: #4e171d. 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 cool-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. 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