← Back to Editor

#5C5364 · #858585 · #C3B9A0 · #9E9F91 · #6F8D8F

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 Library

Color Details Color Details

#5C5364

Dark Plum · DimGray · Charcoal

HEX
#5C5364
RGB
rgb(92, 83, 100)
HSL
hsl(272, 9%, 36%)
HSB
hsb(272, 17%, 39%)
CMYK
cmyk(8%, 17%, 0%, 61%)
Oklch
oklch(45.7% 0.029 309.0)

Traditional「Dark Plum」· Paint「Charcoal」· Creative Midnight Shadow

#858585

Ash · Gray · Warm Gray

HEX
#858585
RGB
rgb(133, 133, 133)
HSL
hsl(0, 0%, 52%)
HSB
hsb(0, 0%, 52%)
CMYK
cmyk(0%, 0%, 0%, 48%)
Oklch
oklch(61.7% 0.000 89.9)

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

#C3B9A0

Ginger · Tan · Sunflower

HEX
#C3B9A0
RGB
rgb(195, 185, 160)
HSL
hsl(43, 23%, 70%)
HSB
hsb(43, 18%, 76%)
CMYK
cmyk(0%, 5%, 18%, 24%)
Oklch
oklch(78.7% 0.036 88.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#9E9F91

Ash · DarkGray · Silver Sand

HEX
#9E9F91
RGB
rgb(158, 159, 145)
HSL
hsl(64, 7%, 60%)
HSB
hsb(64, 9%, 62%)
CMYK
cmyk(1%, 0%, 9%, 38%)
Oklch
oklch(69.8% 0.020 110.2)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#6F8D8F

Slate Blue · SlateGray · Mint Ice

HEX
#6F8D8F
RGB
rgb(111, 141, 143)
HSL
hsl(184, 13%, 50%)
HSB
hsb(184, 22%, 56%)
CMYK
cmyk(22%, 1%, 0%, 44%)
Oklch
oklch(62.1% 0.034 201.4)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5C5364
5B6454

Analogous

545464
5C5364
645464

Triadic

5C5364
645C54
54645C

Split-Comp.

5C5364
646454
546454

Tetradic

5C5364
645454
5B6454
546464

Contrast Matrix WCAG 2.1 Contrast

5C5364
858585
C3B9A0
9E9F91
6F8D8F
—
2.0
Fail
3.7
AA Large
2.7
Fail
2.0
Fail
2.0
Fail
—
1.9
Fail
1.4
Fail
1.0
Fail
3.7
AA Large
1.9
Fail
—
1.4
Fail
1.8
Fail
2.7
Fail
1.4
Fail
1.4
Fail
—
1.3
Fail
2.0
Fail
1.0
Fail
1.8
Fail
1.3
Fail
—
White BG
7.3AAA
3.7AA Large
2.0Fail
2.7Fail
3.6AA Large
Black BG
2.9Fail
5.7AA
10.8AAA
7.8AAA
5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

585860
858585
BFBFA6
9E9E94
7C7C8F

Deuteranopia

59595F
858585
BFC0A8
9E9E95
7A788E

Tritanopia

5C5D5C
858585
C3ABAC
9E9798
708E8E

Achromatopsia

585858
858585
B9B9B9
9D9D9D
848484

Shades & Tints Shades & Tints

#5C5364

Dark
Light

#858585

Dark
Light

#C3B9A0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5c5364;
  --color-2: #858585;
  --color-3: #c3b9a0;
  --color-4: #9e9f91;
  --color-5: #6f8d8f;
}

SCSS

$color-1: #5c5364;
$color-2: #858585;
$color-3: #c3b9a0;
$color-4: #9e9f91;
$color-5: #6f8d8f;

TAILWIND

colors: {
  'brand-1': '#5c5364',
  'brand-2': '#858585',
  'brand-3': '#c3b9a0',
  'brand-4': '#9e9f91',
  'brand-5': '#6f8d8f',
}

RGB Array

[92, 83, 100], [133, 133, 133], [195, 185, 160], [158, 159, 145], [111, 141, 143]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5C5364, #858585, #C3B9A0, #9E9F91, #6F8D8F 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: #5c5364; --color-2: #858585; --color-3: #c3b9a0; --color-4: #9e9f91; --color-5: #6f8d8f. 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 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