#4C685F + #5E4E54 + #713448 + #841A3D + #960032 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#4C685F

Mineral Blue · DimGray · Mint Ice

HEX

#4C685F

RGB

rgb(76, 104, 95)

HSL

hsl(161, 16%, 35%)

HSB

hsb(161, 27%, 41%)

CMYK

cmyk(27%, 0%, 9%, 59%)

Oklch

oklch(49.2% 0.036 173.0)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#5E4E54

Dark Violet · DimGray · Charcoal

HEX

#5E4E54

RGB

rgb(94, 78, 84)

HSL

hsl(338, 9%, 34%)

HSB

hsb(338, 17%, 37%)

CMYK

cmyk(0%, 17%, 11%, 63%)

Oklch

oklch(44.2% 0.023 353.5)

Traditional「Dark Violet」· Paint「Charcoal」· Creative Midnight Shadow

#713448

Dark Violet · Brown · Camellia

HEX

#713448

RGB

rgb(113, 52, 72)

HSL

hsl(340, 37%, 32%)

HSB

hsb(340, 54%, 44%)

CMYK

cmyk(0%, 54%, 36%, 56%)

Oklch

oklch(41.2% 0.089 1.0)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#841A3D

Dark Violet · Brown · Camellia

HEX

#841A3D

RGB

rgb(132, 26, 61)

HSL

hsl(340, 67%, 31%)

HSB

hsb(340, 80%, 52%)

CMYK

cmyk(0%, 80%, 54%, 48%)

Oklch

oklch(40.9% 0.142 6.9)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#960032

Dark Violet · Brown · Camellia

HEX

#960032

RGB

rgb(150, 0, 50)

HSL

hsl(340, 100%, 29%)

HSB

hsb(340, 100%, 59%)

CMYK

cmyk(0%, 100%, 67%, 41%)

Oklch

oklch(42.8% 0.171 13.8)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4C685F

684B54

Analogous

4B6850

4C685F

4B6268

Triadic

4C685F

5E4B68

685E4B

Split-Comp.

4C685F

684B62

68504B

Tetradic

4C685F

504B68

684B54

62684B

Contrast Matrix WCAG 2.1 Contrast

4C685F	5E4E54	713448	841A3D	960032
—	1.3 Fail	1.5 Fail	1.6 Fail	1.5 Fail
1.3 Fail	—	1.2 Fail	1.2 Fail	1.1 Fail
1.5 Fail	1.2 Fail	—	1.0 Fail	1.0 Fail
1.6 Fail	1.2 Fail	1.0 Fail	—	1.1 Fail
1.5 Fail	1.1 Fail	1.0 Fail	1.1 Fail	—

White BG

6.1AA

7.8AAA

9.2AAA

9.6AAA

9.0AAA

Black BG

3.5AA Large

2.7Fail

2.3Fail

2.2Fail

2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

585861

575753

575643

565535

555426

Deuteranopia

575462

585952

5A5F42

5C6432

5E6923

Tritanopia

4D6363

5D5151

6E3F3F

7F2E2C

8F1C1A

Achromatopsia

5F5F5F

535353

494949

3E3E3E

333333

Shades & Tints Shades & Tints

#4C685F

Dark

Light

#5E4E54

Dark

Light

#713448

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4c685f;
  --color-2: #5e4e54;
  --color-3: #713448;
  --color-4: #841a3d;
  --color-5: #960032;
}

SCSS

$color-1: #4c685f;
$color-2: #5e4e54;
$color-3: #713448;
$color-4: #841a3d;
$color-5: #960032;

TAILWIND

colors: {
  'brand-1': '#4c685f',
  'brand-2': '#5e4e54',
  'brand-3': '#713448',
  'brand-4': '#841a3d',
  'brand-5': '#960032',
}

RGB Array

[76, 104, 95], [94, 78, 84], [113, 52, 72], [132, 26, 61], [150, 0, 50]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4C685F, #5E4E54, #713448, #841A3D, #960032 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: #4c685f; --color-2: #5e4e54; --color-3: #713448; --color-4: #841a3d; --color-5: #960032. 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