← Back to Editor

#575353 · #645666 · #80465F · #8C2D56 · #A1084A

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#575353

Ink Gray · DimGray · Charcoal

HEX
#575353
RGB
rgb(87, 83, 83)
HSL
hsl(0, 2%, 33%)
HSB
hsb(0, 5%, 34%)
CMYK
cmyk(0%, 5%, 5%, 66%)
Oklch
oklch(44.6% 0.005 17.4)

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

#645666

Dark Plum · DimGray · Charcoal

HEX
#645666
RGB
rgb(100, 86, 102)
HSL
hsl(293, 9%, 37%)
HSB
hsb(293, 16%, 40%)
CMYK
cmyk(2%, 16%, 0%, 60%)
Oklch
oklch(47.3% 0.031 322.1)

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

#80465F

Dark Violet · DimGray · Camellia

HEX
#80465F
RGB
rgb(128, 70, 95)
HSL
hsl(334, 29%, 39%)
HSB
hsb(334, 45%, 50%)
CMYK
cmyk(0%, 45%, 26%, 50%)
Oklch
oklch(47.2% 0.085 353.6)

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

#8C2D56

Dark Violet · Brown · Camellia

HEX
#8C2D56
RGB
rgb(140, 45, 86)
HSL
hsl(334, 51%, 36%)
HSB
hsb(334, 68%, 55%)
CMYK
cmyk(0%, 68%, 39%, 45%)
Oklch
oklch(45.1% 0.134 357.3)

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

#A1084A

Dark Violet · Brown · Camellia

HEX
#A1084A
RGB
rgb(161, 8, 74)
HSL
hsl(334, 91%, 33%)
HSB
hsb(334, 95%, 63%)
CMYK
cmyk(0%, 95%, 54%, 37%)
Oklch
oklch(45.9% 0.180 5.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

575353
525656

Analogous

565254
575353
565452

Triadic

575353
525652
525256

Split-Comp.

575353
525654
525456

Tetradic

575353
545652
525656
545256

Contrast Matrix WCAG 2.1 Contrast

575353
645666
80465F
8C2D56
A1084A
—
1.1
Fail
1.1
Fail
1.1
Fail
1.0
Fail
1.1
Fail
—
1.0
Fail
1.2
Fail
1.2
Fail
1.1
Fail
1.0
Fail
—
1.1
Fail
1.1
Fail
1.1
Fail
1.2
Fail
1.1
Fail
—
1.0
Fail
1.0
Fail
1.2
Fail
1.1
Fail
1.0
Fail
—
White BG
7.6AAA
6.9AA
7.1AAA
8.0AAA
7.9AAA
Black BG
2.8Fail
3.1AA Large
3.0Fail
2.6Fail
2.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

555553
5E5E62
676659
63624C
5F5D3A

Deuteranopia

565653
5F6061
6A6F58
68704A
687336

Tritanopia

575353
635F5E
7D5453
874443
992D2B

Achromatopsia

545454
5C5C5C
5A5A5A
4E4E4E
3D3D3D

Shades & Tints Shades & Tints

#575353

Dark
Light

#645666

Dark
Light

#80465F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #575353;
  --color-2: #645666;
  --color-3: #80465f;
  --color-4: #8c2d56;
  --color-5: #a1084a;
}

SCSS

$color-1: #575353;
$color-2: #645666;
$color-3: #80465f;
$color-4: #8c2d56;
$color-5: #a1084a;

TAILWIND

colors: {
  'brand-1': '#575353',
  'brand-2': '#645666',
  'brand-3': '#80465f',
  'brand-4': '#8c2d56',
  'brand-5': '#a1084a',
}

RGB Array

[87, 83, 83], [100, 86, 102], [128, 70, 95], [140, 45, 86], [161, 8, 74]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #575353, #645666, #80465F, #8C2D56, #A1084A 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: #575353; --color-2: #645666; --color-3: #80465f; --color-4: #8c2d56; --color-5: #a1084a. 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