← Back to Editor

#C6C8CC · #4F5C7F · #797574 · #5B5944 · #A0A6B4

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

#C6C8CC

Silver Gray · Silver · Pearl Gray

HEX
#C6C8CC
RGB
rgb(198, 200, 204)
HSL
hsl(220, 6%, 79%)
HSB
hsb(220, 3%, 80%)
CMYK
cmyk(3%, 2%, 0%, 20%)
Oklch
oklch(83.2% 0.006 264.5)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#4F5C7F

Indigo · DarkSlateBlue · Prussian Blue

HEX
#4F5C7F
RGB
rgb(79, 92, 127)
HSL
hsl(224, 23%, 40%)
HSB
hsb(224, 38%, 50%)
CMYK
cmyk(38%, 28%, 0%, 50%)
Oklch
oklch(47.8% 0.059 268.4)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#797574

Ink Gray · Gray · Warm Gray

HEX
#797574
RGB
rgb(121, 117, 116)
HSL
hsl(12, 2%, 46%)
HSB
hsb(12, 4%, 47%)
CMYK
cmyk(0%, 3%, 4%, 53%)
Oklch
oklch(56.6% 0.005 34.3)

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

#5B5944

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#5B5944
RGB
rgb(91, 89, 68)
HSL
hsl(55, 14%, 31%)
HSB
hsb(55, 25%, 36%)
CMYK
cmyk(0%, 2%, 25%, 64%)
Oklch
oklch(46.0% 0.033 103.1)

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

#A0A6B4

Azure · DarkGray · Cobalt Blue

HEX
#A0A6B4
RGB
rgb(160, 166, 180)
HSL
hsl(222, 12%, 67%)
HSB
hsb(222, 11%, 71%)
CMYK
cmyk(11%, 8%, 0%, 29%)
Oklch
oklch(72.5% 0.021 267.2)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C6C8CC
CDCBC6

Analogous

C6CCCD
C6C8CC
C7C6CD

Triadic

C6C8CC
CDC6C8
C8CDC6

Split-Comp.

C6C8CC
CDC7C6
CCCDC6

Tetradic

C6C8CC
CDC6CC
CDCBC6
C6CDC7

Contrast Matrix WCAG 2.1 Contrast

C6C8CC
4F5C7F
797574
5B5944
A0A6B4
—
4.0
AA Large
2.7
Fail
4.2
AA Large
1.5
Fail
4.0
AA Large
—
1.5
Fail
1.1
Fail
2.7
Fail
2.7
Fail
1.5
Fail
—
1.6
Fail
1.9
Fail
4.2
AA Large
1.1
Fail
1.6
Fail
—
2.9
Fail
1.5
Fail
2.7
Fail
1.9
Fail
2.9
Fail
—
White BG
1.7Fail
6.6AA
4.6AA
7.1AAA
2.4Fail
Black BG
12.5AAA
3.2AA Large
4.6AA
3.0Fail
8.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C7C7CB
555577
777774
5A5A49
A3A3B1

Deuteranopia

C7C7CB
545374
787874
5A5A4A
A2A2B0

Tritanopia

C6CACA
50706E
797474
5B4D4E
A0AEAD

Achromatopsia

C8C8C8
5C5C5C
767676
575757
A6A6A6

Shades & Tints Shades & Tints

#C6C8CC

Dark
Light

#4F5C7F

Dark
Light

#797574

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c6c8cc;
  --color-2: #4f5c7f;
  --color-3: #797574;
  --color-4: #5b5944;
  --color-5: #a0a6b4;
}

SCSS

$color-1: #c6c8cc;
$color-2: #4f5c7f;
$color-3: #797574;
$color-4: #5b5944;
$color-5: #a0a6b4;

TAILWIND

colors: {
  'brand-1': '#c6c8cc',
  'brand-2': '#4f5c7f',
  'brand-3': '#797574',
  'brand-4': '#5b5944',
  'brand-5': '#a0a6b4',
}

RGB Array

[198, 200, 204], [79, 92, 127], [121, 117, 116], [91, 89, 68], [160, 166, 180]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C6C8CC, #4F5C7F, #797574, #5B5944, #A0A6B4 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: #c6c8cc; --color-2: #4f5c7f; --color-3: #797574; --color-4: #5b5944; --color-5: #a0a6b4. 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