← Back to Editor

#3A4547 · #5A6652 · #AB8652 · #CFA872 · #8F5136

dark

A 5-color dark palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3A4547

Slate Blue · DarkSlateGray · Peacock Green

HEX
#3A4547
RGB
rgb(58, 69, 71)
HSL
hsl(189, 10%, 25%)
HSB
hsb(189, 18%, 28%)
CMYK
cmyk(18%, 3%, 0%, 72%)
Oklch
oklch(38.1% 0.015 209.8)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#5A6652

Celadon · DimGray · Forest Green

HEX
#5A6652
RGB
rgb(90, 102, 82)
HSL
hsl(96, 11%, 36%)
HSB
hsb(96, 20%, 40%)
CMYK
cmyk(12%, 0%, 20%, 60%)
Oklch
oklch(49.4% 0.034 132.9)

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

#AB8652

Ochre · Gray · Amber Brown

HEX
#AB8652
RGB
rgb(171, 134, 82)
HSL
hsl(35, 35%, 50%)
HSB
hsb(35, 52%, 67%)
CMYK
cmyk(0%, 22%, 52%, 33%)
Oklch
oklch(64.4% 0.083 74.8)

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

#CFA872

Ginger · Tan · Warm Sun

HEX
#CFA872
RGB
rgb(207, 168, 114)
HSL
hsl(35, 49%, 63%)
HSB
hsb(35, 45%, 81%)
CMYK
cmyk(0%, 19%, 45%, 19%)
Oklch
oklch(75.5% 0.084 75.0)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#8F5136

Tangerine · Sienna · Amber Brown

HEX
#8F5136
RGB
rgb(143, 81, 54)
HSL
hsl(18, 45%, 39%)
HSB
hsb(18, 62%, 56%)
CMYK
cmyk(0%, 43%, 62%, 44%)
Oklch
oklch(50.2% 0.092 43.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3A4547
463B39

Analogous

394642
3A4547
393E46

Triadic

3A4547
463944
444639

Split-Comp.

3A4547
46393E
464239

Tetradic

3A4547
423946
463B39
3E4639

Contrast Matrix WCAG 2.1 Contrast

3A4547
5A6652
AB8652
CFA872
8F5136
—
1.6
Fail
3.0
Fail
4.5
AA Large
1.6
Fail
1.6
Fail
—
1.8
Fail
2.7
Fail
1.0
Fail
3.0
Fail
1.8
Fail
—
1.5
Fail
1.8
Fail
4.5
AA Large
2.7
Fail
1.5
Fail
—
2.8
Fail
1.6
Fail
1.0
Fail
1.8
Fail
2.8
Fail
—
White BG
9.9AAA
6.1AA
3.4AA Large
2.2Fail
6.2AA
Black BG
2.1Fail
3.5AA Large
6.3AA
9.5AAA
3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

3F3F47
5F5F57
9B9B5F
BEBE7F
74743D

Deuteranopia

3E3D46
5F5E58
9DA062
C0C382
787C3E

Tritanopia

3B4646
5B5B5C
A9696B
CD898C
8C4243

Achromatopsia

424242
606060
8B8B8B
AEAEAE
606060

Shades & Tints Shades & Tints

#3A4547

Dark
Light

#5A6652

Dark
Light

#AB8652

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3a4547;
  --color-2: #5a6652;
  --color-3: #ab8652;
  --color-4: #cfa872;
  --color-5: #8f5136;
}

SCSS

$color-1: #3a4547;
$color-2: #5a6652;
$color-3: #ab8652;
$color-4: #cfa872;
$color-5: #8f5136;

TAILWIND

colors: {
  'brand-1': '#3a4547',
  'brand-2': '#5a6652',
  'brand-3': '#ab8652',
  'brand-4': '#cfa872',
  'brand-5': '#8f5136',
}

RGB Array

[58, 69, 71], [90, 102, 82], [171, 134, 82], [207, 168, 114], [143, 81, 54]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #3A4547, #5A6652, #AB8652, #CFA872, #8F5136 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: #3a4547; --color-2: #5a6652; --color-3: #ab8652; --color-4: #cfa872; --color-5: #8f5136. 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 dark-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