← Back to Editor

#545A51 · #4F4832 · #4C3121 · #3C1F1A · #200D12

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

#545A51

Ink Gray · DimGray · Charcoal

HEX
#545A51
RGB
rgb(84, 90, 81)
HSL
hsl(100, 5%, 34%)
HSB
hsb(100, 10%, 35%)
CMYK
cmyk(7%, 0%, 10%, 65%)
Oklch
oklch(45.9% 0.016 135.0)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#4F4832

Ochre · DarkOliveGreen · Amber Gold

HEX
#4F4832
RGB
rgb(79, 72, 50)
HSL
hsl(46, 22%, 25%)
HSB
hsb(46, 37%, 31%)
CMYK
cmyk(0%, 9%, 37%, 69%)
Oklch
oklch(40.2% 0.036 92.5)

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

#4C3121

Tangerine · DarkOliveGreen · Cinnamon

HEX
#4C3121
RGB
rgb(76, 49, 33)
HSL
hsl(22, 39%, 21%)
HSB
hsb(22, 57%, 30%)
CMYK
cmyk(0%, 36%, 57%, 70%)
Oklch
oklch(34.1% 0.047 51.2)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#3C1F1A

Crimson · Black · Deep Berry

HEX
#3C1F1A
RGB
rgb(60, 31, 26)
HSL
hsl(9, 40%, 17%)
HSB
hsb(9, 57%, 24%)
CMYK
cmyk(0%, 48%, 57%, 76%)
Oklch
oklch(27.7% 0.046 30.7)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#200D12

Dark Violet · Black · Raspberry

HEX
#200D12
RGB
rgb(32, 13, 18)
HSL
hsl(344, 42%, 9%)
HSB
hsb(344, 59%, 13%)
CMYK
cmyk(0%, 59%, 44%, 87%)
Oklch
oklch(19.0% 0.033 3.9)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

545A51
58525B

Analogous

5A5B52
545A51
525B54

Triadic

545A51
52555B
5B5255

Split-Comp.

545A51
54525B
5B525A

Tetradic

545A51
525A5B
58525B
5B5452

Contrast Matrix WCAG 2.1 Contrast

545A51
4F4832
4C3121
3C1F1A
200D12
—
1.3
Fail
1.7
Fail
2.1
Fail
2.6
Fail
1.3
Fail
—
1.3
Fail
1.6
Fail
2.0
Fail
1.7
Fail
1.3
Fail
—
1.3
Fail
1.6
Fail
2.1
Fail
1.6
Fail
1.3
Fail
—
1.2
Fail
2.6
Fail
2.0
Fail
1.6
Fail
1.2
Fail
—
White BG
7.1AAA
9.1AAA
11.9AAA
15.0AAA
18.6AAA
Black BG
3.0Fail
2.3Fail
1.8Fail
1.4Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

575753
4C4C37
404025
2F2F1B
181811

Deuteranopia

565654
4C4D39
424426
31331C
191A11

Tritanopia

545555
4F3C3C
4B2829
3B1C1C
1F1010

Achromatopsia

575757
484848
373737
272727
131313

Shades & Tints Shades & Tints

#545A51

Dark
Light

#4F4832

Dark
Light

#4C3121

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #545a51;
  --color-2: #4f4832;
  --color-3: #4c3121;
  --color-4: #3c1f1a;
  --color-5: #200d12;
}

SCSS

$color-1: #545a51;
$color-2: #4f4832;
$color-3: #4c3121;
$color-4: #3c1f1a;
$color-5: #200d12;

TAILWIND

colors: {
  'brand-1': '#545a51',
  'brand-2': '#4f4832',
  'brand-3': '#4c3121',
  'brand-4': '#3c1f1a',
  'brand-5': '#200d12',
}

RGB Array

[84, 90, 81], [79, 72, 50], [76, 49, 33], [60, 31, 26], [32, 13, 18]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #545A51, #4F4832, #4C3121, #3C1F1A, #200D12 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: #545a51; --color-2: #4f4832; --color-3: #4c3121; --color-4: #3c1f1a; --color-5: #200d12. 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