#8B8B7F + #404C4A + #163F37 + #C70503 + #755A4F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#8B8B7F

Ash · Gray · Warm Gray

HEX

#8B8B7F

RGB

rgb(139, 139, 127)

HSL

hsl(60, 5%, 52%)

HSB

hsb(60, 9%, 55%)

CMYK

cmyk(0%, 0%, 9%, 45%)

Oklch

oklch(63.3% 0.018 106.9)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#404C4A

Mineral Blue · DarkSlateGray · Charcoal

HEX

#404C4A

RGB

rgb(64, 76, 74)

HSL

hsl(170, 9%, 27%)

HSB

hsb(170, 16%, 30%)

CMYK

cmyk(16%, 0%, 3%, 70%)

Oklch

oklch(40.5% 0.016 184.4)

Traditional「Mineral Blue」· Paint「Charcoal」· Creative Midnight Shadow

#163F37

Mineral Blue · DarkSlateGray · Peacock Green

HEX

#163F37

RGB

rgb(22, 63, 55)

HSL

hsl(168, 48%, 17%)

HSB

hsb(168, 65%, 25%)

CMYK

cmyk(65%, 0%, 13%, 75%)

Oklch

oklch(33.6% 0.048 178.3)

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

#C70503

Vermilion · FireBrick · Wine Red

HEX

#C70503

RGB

rgb(199, 5, 3)

HSL

hsl(1, 97%, 40%)

HSB

hsb(1, 98%, 78%)

CMYK

cmyk(0%, 97%, 98%, 22%)

Oklch

oklch(52.2% 0.212 29.2)

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

#755A4F

Tangerine · DimGray · Amber Brown

HEX

#755A4F

RGB

rgb(117, 90, 79)

HSL

hsl(17, 19%, 38%)

HSB

hsb(17, 32%, 46%)

CMYK

cmyk(0%, 23%, 32%, 54%)

Oklch

oklch(49.2% 0.040 43.2)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8B8B7F

7E7E8B

Analogous

8B857E

8B8B7F

858B7E

Triadic

8B8B7F

7E8B8B

8B7E8B

Split-Comp.

8B8B7F

7E858B

857E8B

Tetradic

8B8B7F

7E8B85

7E7E8B

8B7E85

Contrast Matrix WCAG 2.1 Contrast

8B8B7F	404C4A	163F37	C70503	755A4F
—	2.6 Fail	3.4 AA Large	1.8 Fail	1.8 Fail
2.6 Fail	—	1.3 Fail	1.5 Fail	1.4 Fail
3.4 AA Large	1.3 Fail	—	1.9 Fail	1.9 Fail
1.8 Fail	1.5 Fail	1.9 Fail	—	1.0 Fail
1.8 Fail	1.4 Fail	1.9 Fail	1.0 Fail	—

White BG

3.4AA Large

8.9AAA

11.7AAA

6.1AA

6.3AA

Black BG

6.1AA

2.4Fail

1.8Fail

3.5AA Large

3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

8B8B82

45454A

282839

737103

696952

Deuteranopia

8B8B83

45444B

252239

7E8D04

6B6D52

Tritanopia

8B8485

414B4B

183A3B

BD0404

745454

Achromatopsia

8A8A8A

484848

323232

3F3F3F

616161

Shades & Tints Shades & Tints

#8B8B7F

Dark

Light

#404C4A

Dark

Light

#163F37

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8b8b7f;
  --color-2: #404c4a;
  --color-3: #163f37;
  --color-4: #c70503;
  --color-5: #755a4f;
}

SCSS

$color-1: #8b8b7f;
$color-2: #404c4a;
$color-3: #163f37;
$color-4: #c70503;
$color-5: #755a4f;

TAILWIND

colors: {
  'brand-1': '#8b8b7f',
  'brand-2': '#404c4a',
  'brand-3': '#163f37',
  'brand-4': '#c70503',
  'brand-5': '#755a4f',
}

RGB Array

[139, 139, 127], [64, 76, 74], [22, 63, 55], [199, 5, 3], [117, 90, 79]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8B8B7F, #404C4A, #163F37, #C70503, #755A4F 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: #8b8b7f; --color-2: #404c4a; --color-3: #163f37; --color-4: #c70503; --color-5: #755a4f. 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 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