← Back to Editor

#574848 · #AB8850 · #784848 · #523939 · #332E2E

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarm

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporate

Color Details Color Details

#574848

Crimson · DarkSlateGray · Charcoal

HEX
#574848
RGB
rgb(87, 72, 72)
HSL
hsl(0, 9%, 31%)
HSB
hsb(0, 17%, 34%)
CMYK
cmyk(0%, 17%, 17%, 66%)
Oklch
oklch(41.7% 0.020 18.0)

Traditional「Crimson」· Paint「Charcoal」· Creative Midnight Shadow

#AB8850

Ochre · Gray · Amber Brown

HEX
#AB8850
RGB
rgb(171, 136, 80)
HSL
hsl(37, 36%, 49%)
HSB
hsb(37, 53%, 67%)
CMYK
cmyk(0%, 20%, 53%, 33%)
Oklch
oklch(64.7% 0.085 78.1)

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

#784848

Crimson · DimGray · Wine Red

HEX
#784848
RGB
rgb(120, 72, 72)
HSL
hsl(0, 25%, 38%)
HSB
hsb(0, 40%, 47%)
CMYK
cmyk(0%, 40%, 40%, 53%)
Oklch
oklch(45.8% 0.066 19.9)

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

#523939

Crimson · DarkSlateGray · Wine Red

HEX
#523939
RGB
rgb(82, 57, 57)
HSL
hsl(0, 18%, 27%)
HSB
hsb(0, 30%, 32%)
CMYK
cmyk(0%, 30%, 30%, 68%)
Oklch
oklch(37.3% 0.036 18.9)

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

#332E2E

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#332E2E
RGB
rgb(51, 46, 46)
HSL
hsl(0, 5%, 19%)
HSB
hsb(0, 10%, 20%)
CMYK
cmyk(0%, 10%, 10%, 80%)
Oklch
oklch(30.6% 0.007 17.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

574848
485656

Analogous

56484F
574848
564F48

Triadic

574848
485648
484856

Split-Comp.

574848
48564F
484F56

Tetradic

574848
4F5648
485656
4F4856

Contrast Matrix WCAG 2.1 Contrast

574848
AB8850
784848
523939
332E2E
—
2.6
Fail
1.2
Fail
1.2
Fail
1.5
Fail
2.6
Fail
—
2.3
Fail
3.2
AA Large
4.1
AA Large
1.2
Fail
2.3
Fail
—
1.4
Fail
1.8
Fail
1.2
Fail
3.2
AA Large
1.4
Fail
—
1.3
Fail
1.5
Fail
4.1
AA Large
1.8
Fail
1.3
Fail
—
White BG
8.7AAA
3.3AA Large
7.4AAA
10.5AAA
13.4AAA
Black BG
2.4Fail
6.4AA
2.8Fail
2.0Fail
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

515048
9C9C5E
636348
474739
31312E

Deuteranopia

515348
9EA161
666A48
494B39
31312E

Tritanopia

564848
A9686B
764848
513939
332E2E

Achromatopsia

4C4C4C
8C8C8C
565656
404040
2F2F2F

Shades & Tints Shades & Tints

#574848

Dark
Light

#AB8850

Dark
Light

#784848

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #574848;
  --color-2: #ab8850;
  --color-3: #784848;
  --color-4: #523939;
  --color-5: #332e2e;
}

SCSS

$color-1: #574848;
$color-2: #ab8850;
$color-3: #784848;
$color-4: #523939;
$color-5: #332e2e;

TAILWIND

colors: {
  'brand-1': '#574848',
  'brand-2': '#ab8850',
  'brand-3': '#784848',
  'brand-4': '#523939',
  'brand-5': '#332e2e',
}

RGB Array

[87, 72, 72], [171, 136, 80], [120, 72, 72], [82, 57, 57], [51, 46, 46]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #574848, #AB8850, #784848, #523939, #332E2E is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs. 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: #574848; --color-2: #ab8850; --color-3: #784848; --color-4: #523939; --color-5: #332e2e. 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 finance, legal, luxury 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