#837474 + #4C3838 + #340F2D + #A805FA + #60356E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#837474

Ink Gray · Gray · Warm Gray

HEX

#837474

RGB

rgb(131, 116, 116)

HSL

hsl(0, 6%, 48%)

HSB

hsb(0, 11%, 51%)

CMYK

cmyk(0%, 11%, 11%, 49%)

Oklch

oklch(57.3% 0.019 17.7)

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

#4C3838

Crimson · DarkSlateGray · Wine Red

HEX

#4C3838

RGB

rgb(76, 56, 56)

HSL

hsl(0, 15%, 26%)

HSB

hsb(0, 26%, 30%)

CMYK

cmyk(0%, 26%, 26%, 70%)

Oklch

oklch(36.3% 0.029 18.6)

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

#340F2D

Rose Purple · Black · Dark Purple

HEX

#340F2D

RGB

rgb(52, 15, 45)

HSL

hsl(311, 55%, 13%)

HSB

hsb(311, 71%, 20%)

CMYK

cmyk(0%, 71%, 13%, 80%)

Oklch

oklch(24.2% 0.074 335.7)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

#A805FA

Royal Purple · DarkViolet · Violet

HEX

#A805FA

RGB

rgb(168, 5, 250)

HSL

hsl(280, 96%, 50%)

HSB

hsb(280, 98%, 98%)

CMYK

cmyk(33%, 98%, 0%, 2%)

Oklch

oklch(57.5% 0.293 307.4)

Traditional「Royal Purple」· Paint「Violet」· Creative Blush Sunrise

#60356E

Dark Plum · DarkSlateBlue · Eggplant

HEX

#60356E

RGB

rgb(96, 53, 110)

HSL

hsl(285, 35%, 32%)

HSB

hsb(285, 52%, 43%)

CMYK

cmyk(13%, 52%, 0%, 57%)

Oklch

oklch(40.7% 0.104 317.4)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

837474

738282

Analogous

82737A

837474

827A73

Triadic

837474

738273

737382

Split-Comp.

837474

73827A

737A82

Tetradic

837474

7A8273

738282

7A7382

Contrast Matrix WCAG 2.1 Contrast

837474	4C3838	340F2D	A805FA	60356E
—	2.4 Fail	3.8 AA Large	1.2 Fail	2.1 Fail
2.4 Fail	—	1.5 Fail	2.1 Fail	1.2 Fail
3.8 AA Large	1.5 Fail	—	3.2 AA Large	1.8 Fail
1.2 Fail	2.1 Fail	3.2 AA Large	—	1.8 Fail
2.1 Fail	1.2 Fail	1.8 Fail	1.8 Fail	—

White BG

4.5AA Large

10.9AAA

16.8AAA

5.2AA

9.4AAA

Black BG

4.7AA

1.9Fail

1.3Fail

4.1AA Large

2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7D7C74

434338

242426

6160BF

4D4D60

Deuteranopia

7D7E74

454638

262924

6B77B1

50535D

Tritanopia

827474

4B3838

32201F

A09086

5E5553

Achromatopsia

787878

3E3E3E

1D1D1D

525252

484848

Shades & Tints Shades & Tints

#837474

Dark

Light

#4C3838

Dark

Light

#340F2D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #837474;
  --color-2: #4c3838;
  --color-3: #340f2d;
  --color-4: #a805fa;
  --color-5: #60356e;
}

SCSS

$color-1: #837474;
$color-2: #4c3838;
$color-3: #340f2d;
$color-4: #a805fa;
$color-5: #60356e;

TAILWIND

colors: {
  'brand-1': '#837474',
  'brand-2': '#4c3838',
  'brand-3': '#340f2d',
  'brand-4': '#a805fa',
  'brand-5': '#60356e',
}

RGB Array

[131, 116, 116], [76, 56, 56], [52, 15, 45], [168, 5, 250], [96, 53, 110]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #837474, #4C3838, #340F2D, #A805FA, #60356E 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: #837474; --color-2: #4c3838; --color-3: #340f2d; --color-4: #a805fa; --color-5: #60356e. 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