#838C6C + #4D543C + #553C35 + #5C242D + #801223 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#838C6C

Grass Green · Gray · Olive Green

HEX

#838C6C

RGB

rgb(131, 140, 108)

HSL

hsl(77, 13%, 49%)

HSB

hsb(77, 23%, 55%)

CMYK

cmyk(6%, 0%, 23%, 45%)

Oklch

oklch(62.4% 0.047 120.5)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#4D543C

Grass Green · DarkOliveGreen · Forest Green

HEX

#4D543C

RGB

rgb(77, 84, 60)

HSL

hsl(78, 17%, 28%)

HSB

hsb(78, 29%, 33%)

CMYK

cmyk(8%, 0%, 29%, 67%)

Oklch

oklch(43.3% 0.039 121.2)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

#553C35

Crimson · DarkOliveGreen · Wine Red

HEX

#553C35

RGB

rgb(85, 60, 53)

HSL

hsl(13, 23%, 27%)

HSB

hsb(13, 38%, 33%)

CMYK

cmyk(0%, 29%, 38%, 67%)

Oklch

oklch(38.2% 0.038 36.2)

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

#5C242D

Crimson · Maroon · Wine Red

HEX

#5C242D

RGB

rgb(92, 36, 45)

HSL

hsl(350, 44%, 25%)

HSB

hsb(350, 61%, 36%)

CMYK

cmyk(0%, 61%, 51%, 64%)

Oklch

oklch(34.4% 0.082 12.6)

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

#801223

Vermilion · Maroon · Wine Red

HEX

#801223

RGB

rgb(128, 18, 35)

HSL

hsl(351, 75%, 29%)

HSB

hsb(351, 86%, 50%)

CMYK

cmyk(0%, 86%, 73%, 50%)

Oklch

oklch(39.0% 0.142 19.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

838C6C

766D8D

Analogous

8D866D

838C6C

748D6D

Triadic

838C6C

6D848D

8D6D84

Split-Comp.

838C6C

6D748D

866D8D

Tetradic

838C6C

6D8D86

766D8D

8D6D74

Contrast Matrix WCAG 2.1 Contrast

838C6C	4D543C	553C35	5C242D	801223
—	2.2 Fail	2.8 Fail	3.4 AA Large	2.9 Fail
2.2 Fail	—	1.3 Fail	1.5 Fail	1.3 Fail
2.8 Fail	1.3 Fail	—	1.2 Fail	1.0 Fail
3.4 AA Large	1.5 Fail	1.2 Fail	—	1.2 Fail
2.9 Fail	1.3 Fail	1.0 Fail	1.2 Fail	—

White BG

3.5AA Large

7.9AAA

10.1AAA

12.0AAA

10.4AAA

Black BG

5.9AA

2.6Fail

2.1Fail

1.7Fail

2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

878774

505042

4A4A37

44432B

504F1F

Deuteranopia

868676

504F43

4C4E37

474B2A

575F1E

Tritanopia

837A7B

4D4647

543838

592929

7B1C1B

Achromatopsia

868686

4F4F4F

434343

363636

353535

Shades & Tints Shades & Tints

#838C6C

Dark

Light

#4D543C

Dark

Light

#553C35

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #838c6c;
  --color-2: #4d543c;
  --color-3: #553c35;
  --color-4: #5c242d;
  --color-5: #801223;
}

SCSS

$color-1: #838c6c;
$color-2: #4d543c;
$color-3: #553c35;
$color-4: #5c242d;
$color-5: #801223;

TAILWIND

colors: {
  'brand-1': '#838c6c',
  'brand-2': '#4d543c',
  'brand-3': '#553c35',
  'brand-4': '#5c242d',
  'brand-5': '#801223',
}

RGB Array

[131, 140, 108], [77, 84, 60], [85, 60, 53], [92, 36, 45], [128, 18, 35]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #838C6C, #4D543C, #553C35, #5C242D, #801223 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: #838c6c; --color-2: #4d543c; --color-3: #553c35; --color-4: #5c242d; --color-5: #801223. 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