← Back to Editor

#393536 · #54545C · #6D7372 · #839185 · #BEC1A6

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#393536

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#393536
RGB
rgb(57, 53, 54)
HSL
hsl(345, 4%, 22%)
HSB
hsb(345, 7%, 22%)
CMYK
cmyk(0%, 7%, 5%, 78%)
Oklch
oklch(33.3% 0.006 0.4)

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

#54545C

Ink Gray · DimGray · Charcoal

HEX
#54545C
RGB
rgb(84, 84, 92)
HSL
hsl(240, 5%, 35%)
HSB
hsb(240, 9%, 36%)
CMYK
cmyk(9%, 9%, 0%, 64%)
Oklch
oklch(44.9% 0.013 285.9)

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

#6D7372

Ink Gray · DimGray · Warm Gray

HEX
#6D7372
RGB
rgb(109, 115, 114)
HSL
hsl(170, 3%, 44%)
HSB
hsb(170, 5%, 45%)
CMYK
cmyk(5%, 0%, 1%, 55%)
Oklch
oklch(55.0% 0.007 185.1)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#839185

Ash · Gray · Warm Gray

HEX
#839185
RGB
rgb(131, 145, 133)
HSL
hsl(129, 6%, 54%)
HSB
hsb(129, 10%, 57%)
CMYK
cmyk(10%, 0%, 8%, 43%)
Oklch
oklch(64.2% 0.024 149.5)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#BEC1A6

Fresh Green · Silver · Sunflower

HEX
#BEC1A6
RGB
rgb(190, 193, 166)
HSL
hsl(67, 18%, 70%)
HSB
hsb(67, 14%, 76%)
CMYK
cmyk(2%, 0%, 14%, 24%)
Oklch
oklch(80.1% 0.037 112.4)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

393536
363A39

Analogous

3A3639
393536
3A3736

Triadic

393536
373A36
36373A

Split-Comp.

393536
363A37
36393A

Tetradic

393536
393A36
363A39
37363A

Contrast Matrix WCAG 2.1 Contrast

393536
54545C
6D7372
839185
BEC1A6
—
1.6
Fail
2.5
Fail
3.7
AA Large
6.5
AA
1.6
Fail
—
1.6
Fail
2.3
Fail
4.1
AA Large
2.5
Fail
1.6
Fail
—
1.5
Fail
2.6
Fail
3.7
AA Large
2.3
Fail
1.5
Fail
—
1.8
Fail
6.5
AA
4.1
AA Large
2.6
Fail
1.8
Fail
—
White BG
12.1AAA
7.5AAA
4.8AA
3.3AA Large
1.8Fail
Black BG
1.7Fail
2.8Fail
4.3AA Large
6.4AA
11.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

373736
54545A
707072
898988
BFBFAD

Deuteranopia

383836
54545A
6F6F72
888789
BFBFAE

Tritanopia

393636
545958
6D7272
848A8B
BEB2B3

Achromatopsia

363636
555555
717171
8B8B8B
BDBDBD

Shades & Tints Shades & Tints

#393536

Dark
Light

#54545C

Dark
Light

#6D7372

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #393536;
  --color-2: #54545c;
  --color-3: #6d7372;
  --color-4: #839185;
  --color-5: #bec1a6;
}

SCSS

$color-1: #393536;
$color-2: #54545c;
$color-3: #6d7372;
$color-4: #839185;
$color-5: #bec1a6;

TAILWIND

colors: {
  'brand-1': '#393536',
  'brand-2': '#54545c',
  'brand-3': '#6d7372',
  'brand-4': '#839185',
  'brand-5': '#bec1a6',
}

RGB Array

[57, 53, 54], [84, 84, 92], [109, 115, 114], [131, 145, 133], [190, 193, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #393536, #54545C, #6D7372, #839185, #BEC1A6 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #393536; --color-2: #54545c; --color-3: #6d7372; --color-4: #839185; --color-5: #bec1a6. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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. 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