← Back to Editor

#4A4A41 · #6B6850 · #8C784F · #B3993B · #E6A21C

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

#4A4A41

Dark Cyan · DarkSlateGray · Charcoal

HEX
#4A4A41
RGB
rgb(74, 74, 65)
HSL
hsl(60, 6%, 27%)
HSB
hsb(60, 12%, 29%)
CMYK
cmyk(0%, 0%, 12%, 71%)
Oklch
oklch(40.6% 0.015 107.0)

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

#6B6850

Autumn Sage · DimGray · Honey Gold

HEX
#6B6850
RGB
rgb(107, 104, 80)
HSL
hsl(53, 14%, 37%)
HSB
hsb(53, 25%, 42%)
CMYK
cmyk(0%, 3%, 25%, 58%)
Oklch
oklch(51.3% 0.036 101.6)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#8C784F

Ochre · DimGray · Honey Gold

HEX
#8C784F
RGB
rgb(140, 120, 79)
HSL
hsl(40, 28%, 43%)
HSB
hsb(40, 44%, 55%)
CMYK
cmyk(0%, 14%, 44%, 45%)
Oklch
oklch(58.1% 0.062 84.6)

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

#B3993B

Ochre · GoldenRod · Honey Gold

HEX
#B3993B
RGB
rgb(179, 153, 59)
HSL
hsl(47, 50%, 47%)
HSB
hsb(47, 67%, 70%)
CMYK
cmyk(0%, 15%, 67%, 30%)
Oklch
oklch(68.9% 0.116 93.6)

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

#E6A21C

Ginger · GoldenRod · Sunflower

HEX
#E6A21C
RGB
rgb(230, 162, 28)
HSL
hsl(40, 80%, 51%)
HSB
hsb(40, 88%, 90%)
CMYK
cmyk(0%, 30%, 88%, 10%)
Oklch
oklch(75.9% 0.153 77.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4A4A41
414149

Analogous

494541
4A4A41
454941

Triadic

4A4A41
414949
494149

Split-Comp.

4A4A41
414549
454149

Tetradic

4A4A41
414945
414149
494145

Contrast Matrix WCAG 2.1 Contrast

4A4A41
6B6850
8C784F
B3993B
E6A21C
—
1.6
Fail
2.1
Fail
3.2
AA Large
4.1
AA Large
1.6
Fail
—
1.3
Fail
2.0
Fail
2.6
Fail
2.1
Fail
1.3
Fail
—
1.5
Fail
1.9
Fail
3.2
AA Large
2.0
Fail
1.5
Fail
—
1.3
Fail
4.1
AA Large
2.6
Fail
1.9
Fail
1.3
Fail
—
White BG
8.9AAA
5.6AA
4.3AA Large
2.8Fail
2.2Fail
Black BG
2.3Fail
3.7AA Large
4.9AA
7.5AAA
9.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4A4A43
6A6A56
838359
A8A852
C9C83C

Deuteranopia

4A4A44
6A6A57
85865B
A9AB57
CDD244

Tritanopia

4A4545
6B5A5B
8B6162
B26468
E3565C

Achromatopsia

494949
666666
797979
969696
A7A7A7

Shades & Tints Shades & Tints

#4A4A41

Dark
Light

#6B6850

Dark
Light

#8C784F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4a4a41;
  --color-2: #6b6850;
  --color-3: #8c784f;
  --color-4: #b3993b;
  --color-5: #e6a21c;
}

SCSS

$color-1: #4a4a41;
$color-2: #6b6850;
$color-3: #8c784f;
$color-4: #b3993b;
$color-5: #e6a21c;

TAILWIND

colors: {
  'brand-1': '#4a4a41',
  'brand-2': '#6b6850',
  'brand-3': '#8c784f',
  'brand-4': '#b3993b',
  'brand-5': '#e6a21c',
}

RGB Array

[74, 74, 65], [107, 104, 80], [140, 120, 79], [179, 153, 59], [230, 162, 28]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4A4A41, #6B6850, #8C784F, #B3993B, #E6A21C is ideal for: corporate websites, product showcases, portfolios. 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: #4a4a41; --color-2: #6b6850; --color-3: #8c784f; --color-4: #b3993b; --color-5: #e6a21c. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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