#584A4A + #343240 + #C17F2B + #8A0307 + #4B0300 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#584A4A

Crimson · DarkSlateGray · Charcoal

HEX

#584A4A

RGB

rgb(88, 74, 74)

HSL

hsl(0, 9%, 32%)

HSB

hsb(0, 16%, 35%)

CMYK

cmyk(0%, 16%, 16%, 65%)

Oklch

oklch(42.3% 0.019 17.9)

Traditional「Crimson」· Paint「Charcoal」· Creative Midnight Shadow

#343240

Deep Indigo · DarkSlateGray · Prussian Blue

HEX

#343240

RGB

rgb(52, 50, 64)

HSL

hsl(249, 12%, 22%)

HSB

hsb(249, 22%, 25%)

CMYK

cmyk(19%, 22%, 0%, 75%)

Oklch

oklch(32.5% 0.025 291.5)

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

#C17F2B

Ochre · Chocolate · Amber Brown

HEX

#C17F2B

RGB

rgb(193, 127, 43)

HSL

hsl(34, 64%, 46%)

HSB

hsb(34, 78%, 76%)

CMYK

cmyk(0%, 34%, 78%, 24%)

Oklch

oklch(65.1% 0.126 68.0)

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

#8A0307

Vermilion · DarkRed · Wine Red

HEX

#8A0307

RGB

rgb(138, 3, 7)

HSL

hsl(358, 96%, 28%)

HSB

hsb(358, 98%, 54%)

CMYK

cmyk(0%, 98%, 95%, 46%)

Oklch

oklch(39.9% 0.161 28.1)

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

#4B0300

Vermilion · Maroon · Deep Berry

HEX

#4B0300

RGB

rgb(75, 3, 0)

HSL

hsl(2, 100%, 15%)

HSB

hsb(2, 100%, 29%)

CMYK

cmyk(0%, 96%, 100%, 71%)

Oklch

oklch(26.2% 0.104 30.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

584A4A

4A5959

Analogous

594A52

584A4A

59524A

Triadic

584A4A

4A594A

4A4A59

Split-Comp.

584A4A

4A5952

4A5259

Tetradic

584A4A

52594A

4A5959

524A59

Contrast Matrix WCAG 2.1 Contrast

584A4A	343240	C17F2B	8A0307	4B0300
—	1.5 Fail	2.5 Fail	1.2 Fail	1.9 Fail
1.5 Fail	—	3.8 AA Large	1.3 Fail	1.3 Fail
2.5 Fail	3.8 AA Large	—	3.0 AA Large	4.8 AA
1.2 Fail	1.3 Fail	3.0 AA Large	—	1.6 Fail
1.9 Fail	1.3 Fail	4.8 AA	1.6 Fail	—

White BG

8.4AAA

12.5AAA

3.3AA Large

10.0AAA

16.0AAA

Black BG

2.5Fail

1.7Fail

6.3AA

2.1Fail

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

52524A

33333D

A4A43F

504E06

2C2B01

Deuteranopia

53544A

33333C

A8AD44

576206

303501

Tritanopia

574A4A

343A39

BE4F53

830505

470101

Achromatopsia

4E4E4E

343434

898989

2C2C2C

181818

Shades & Tints Shades & Tints

#584A4A

Dark

Light

#343240

Dark

Light

#C17F2B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #584a4a;
  --color-2: #343240;
  --color-3: #c17f2b;
  --color-4: #8a0307;
  --color-5: #4b0300;
}

SCSS

$color-1: #584a4a;
$color-2: #343240;
$color-3: #c17f2b;
$color-4: #8a0307;
$color-5: #4b0300;

TAILWIND

colors: {
  'brand-1': '#584a4a',
  'brand-2': '#343240',
  'brand-3': '#c17f2b',
  'brand-4': '#8a0307',
  'brand-5': '#4b0300',
}

RGB Array

[88, 74, 74], [52, 50, 64], [193, 127, 43], [138, 3, 7], [75, 3, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #584A4A, #343240, #C17F2B, #8A0307, #4B0300 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: #584a4a; --color-2: #343240; --color-3: #c17f2b; --color-4: #8a0307; --color-5: #4b0300. 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