← Back to Editor

#583B30 · #5F5647 · #6B7353 · #949458 · #C0AA58

dark

A 5-color dark 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

#583B30

Tangerine · DarkOliveGreen · Amber Brown

HEX
#583B30
RGB
rgb(88, 59, 48)
HSL
hsl(17, 29%, 27%)
HSB
hsb(17, 45%, 35%)
CMYK
cmyk(0%, 33%, 45%, 65%)
Oklch
oklch(38.3% 0.045 41.6)

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

#5F5647

Ochre · DarkOliveGreen · Amber Brown

HEX
#5F5647
RGB
rgb(95, 86, 71)
HSL
hsl(38, 14%, 33%)
HSB
hsb(38, 25%, 37%)
CMYK
cmyk(0%, 9%, 25%, 63%)
Oklch
oklch(45.7% 0.026 80.5)

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

#6B7353

Grass Green · DimGray · Forest Green

HEX
#6B7353
RGB
rgb(107, 115, 83)
HSL
hsl(75, 16%, 39%)
HSB
hsb(75, 28%, 45%)
CMYK
cmyk(7%, 0%, 28%, 55%)
Oklch
oklch(54.0% 0.049 119.5)

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

#949458

Autumn Sage · Gray · Honey Gold

HEX
#949458
RGB
rgb(148, 148, 88)
HSL
hsl(60, 25%, 46%)
HSB
hsb(60, 41%, 58%)
CMYK
cmyk(0%, 0%, 41%, 42%)
Oklch
oklch(65.2% 0.081 108.5)

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

#C0AA58

Ginger · SandyBrown · Sunflower

HEX
#C0AA58
RGB
rgb(192, 170, 88)
HSL
hsl(47, 45%, 55%)
HSB
hsb(47, 54%, 75%)
CMYK
cmyk(0%, 11%, 54%, 25%)
Oklch
oklch(74.0% 0.106 94.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

583B30
314E59

Analogous

59313A
583B30
595031

Triadic

583B30
31593C
3C3159

Split-Comp.

583B30
315950
313A59

Tetradic

583B30
3A5931
314E59
503159

Contrast Matrix WCAG 2.1 Contrast

583B30
5F5647
6B7353
949458
C0AA58
—
1.4
Fail
2.0
Fail
3.2
AA Large
4.4
AA Large
1.4
Fail
—
1.4
Fail
2.3
Fail
3.1
AA Large
2.0
Fail
1.4
Fail
—
1.6
Fail
2.2
Fail
3.2
AA Large
2.3
Fail
1.6
Fail
—
1.4
Fail
4.4
AA Large
3.1
AA Large
2.2
Fail
1.4
Fail
—
White BG
10.1AAA
7.2AAA
5.0AA
3.2AA Large
2.3Fail
Black BG
2.1Fail
2.9Fail
4.2AA Large
6.6AA
9.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4B4B33
5B5B4B
6E6F5B
949467
B6B66C

Deuteranopia

4D4F33
5C5C4C
6E6D5D
94946A
B8B971

Tritanopia

573535
5F4D4E
6B6162
947275
BF7C7F

Achromatopsia

424242
575757
6D6D6D
8D8D8D
A7A7A7

Shades & Tints Shades & Tints

#583B30

Dark
Light

#5F5647

Dark
Light

#6B7353

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #583b30;
  --color-2: #5f5647;
  --color-3: #6b7353;
  --color-4: #949458;
  --color-5: #c0aa58;
}

SCSS

$color-1: #583b30;
$color-2: #5f5647;
$color-3: #6b7353;
$color-4: #949458;
$color-5: #c0aa58;

TAILWIND

colors: {
  'brand-1': '#583b30',
  'brand-2': '#5f5647',
  'brand-3': '#6b7353',
  'brand-4': '#949458',
  'brand-5': '#c0aa58',
}

RGB Array

[88, 59, 48], [95, 86, 71], [107, 115, 83], [148, 148, 88], [192, 170, 88]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #583B30, #5F5647, #6B7353, #949458, #C0AA58 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #583b30; --color-2: #5f5647; --color-3: #6b7353; --color-4: #949458; --color-5: #c0aa58. 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. Restrained colors convey professionalism and trust. 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