#373830 + #524D3A + #C88D3F + #EAC543 + #6C7354 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#373830

Autumn Sage · DarkSlateGray · Dark Stone

HEX

#373830

RGB

rgb(55, 56, 48)

HSL

hsl(67, 8%, 20%)

HSB

hsb(67, 14%, 22%)

CMYK

cmyk(2%, 0%, 14%, 78%)

Oklch

oklch(33.7% 0.014 112.9)

Traditional「Autumn Sage」· Paint「Dark Stone」· Creative Midnight Shadow

#524D3A

Ochre · DarkOliveGreen · Honey Gold

HEX

#524D3A

RGB

rgb(82, 77, 58)

HSL

hsl(47, 17%, 27%)

HSB

hsb(47, 29%, 32%)

CMYK

cmyk(0%, 6%, 29%, 68%)

Oklch

oklch(41.9% 0.031 95.1)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#C88D3F

Ginger · GoldenRod · Warm Sun

HEX

#C88D3F

RGB

rgb(200, 141, 63)

HSL

hsl(34, 55%, 52%)

HSB

hsb(34, 69%, 78%)

CMYK

cmyk(0%, 29%, 69%, 22%)

Oklch

oklch(68.7% 0.118 71.0)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#EAC543

Ginger · SandyBrown · Sunflower

HEX

#EAC543

RGB

rgb(234, 197, 67)

HSL

hsl(47, 80%, 59%)

HSB

hsb(47, 71%, 92%)

CMYK

cmyk(0%, 16%, 71%, 8%)

Oklch

oklch(83.3% 0.148 92.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#6C7354

Grass Green · DimGray · Forest Green

HEX

#6C7354

RGB

rgb(108, 115, 84)

HSL

hsl(74, 16%, 39%)

HSB

hsb(74, 27%, 45%)

CMYK

cmyk(6%, 0%, 27%, 55%)

Oklch

oklch(54.1% 0.047 118.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

373830

302F37

Analogous

37342F

373830

32372F

Triadic

373830

2F3637

372F36

Split-Comp.

373830

2F3237

342F37

Tetradic

373830

2F3734

302F37

372F32

Contrast Matrix WCAG 2.1 Contrast

373830	524D3A	C88D3F	EAC543	6C7354
—	1.4 Fail	4.1 AA Large	7.1 AAA	2.4 Fail
1.4 Fail	—	3.0 Fail	5.1 AA	1.7 Fail
4.1 AA Large	3.0 Fail	—	1.7 Fail	1.7 Fail
7.1 AAA	5.1 AA	1.7 Fail	—	3.0 Fail
2.4 Fail	1.7 Fail	1.7 Fail	3.0 Fail	—

White BG

11.9AAA

8.5AAA

2.9Fail

1.7Fail

5.0AA

Black BG

1.8Fail

2.5Fail

7.3AAA

12.6AAA

4.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

373732

50503F

AEAE52

DADA62

6F6F5C

Deuteranopia

373732

505140

B2B656

DCDF6A

6F6E5D

Tritanopia

373334

524243

C56164

E87B81

6C6163

Achromatopsia

373737

4C4C4C

969696

C1C1C1

6D6D6D

Shades & Tints Shades & Tints

#373830

Dark

Light

#524D3A

Dark

Light

#C88D3F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #373830;
  --color-2: #524d3a;
  --color-3: #c88d3f;
  --color-4: #eac543;
  --color-5: #6c7354;
}

SCSS

$color-1: #373830;
$color-2: #524d3a;
$color-3: #c88d3f;
$color-4: #eac543;
$color-5: #6c7354;

TAILWIND

colors: {
  'brand-1': '#373830',
  'brand-2': '#524d3a',
  'brand-3': '#c88d3f',
  'brand-4': '#eac543',
  'brand-5': '#6c7354',
}

RGB Array

[55, 56, 48], [82, 77, 58], [200, 141, 63], [234, 197, 67], [108, 115, 84]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #373830, #524D3A, #C88D3F, #EAC543, #6C7354 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: #373830; --color-2: #524d3a; --color-3: #c88d3f; --color-4: #eac543; --color-5: #6c7354. 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