← Back to Editor

#CDC8C5 · #838E92 · #666970 · #554747 · #361F27

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

#CDC8C5

Silver Gray · Silver · Pearl Gray

HEX
#CDC8C5
RGB
rgb(205, 200, 197)
HSL
hsl(22, 7%, 79%)
HSB
hsb(22, 4%, 80%)
CMYK
cmyk(0%, 2%, 4%, 20%)
Oklch
oklch(83.6% 0.007 53.4)

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

#838E92

Ash · LightSlateGray · Warm Gray

HEX
#838E92
RGB
rgb(131, 142, 146)
HSL
hsl(196, 6%, 54%)
HSB
hsb(196, 10%, 57%)
CMYK
cmyk(10%, 3%, 0%, 43%)
Oklch
oklch(63.9% 0.014 221.5)

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

#666970

Ink Gray · DimGray · Warm Gray

HEX
#666970
RGB
rgb(102, 105, 112)
HSL
hsl(222, 5%, 42%)
HSB
hsb(222, 9%, 44%)
CMYK
cmyk(9%, 6%, 0%, 56%)
Oklch
oklch(52.1% 0.012 267.3)

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

#554747

Crimson · DarkSlateGray · Charcoal

HEX
#554747
RGB
rgb(85, 71, 71)
HSL
hsl(0, 9%, 31%)
HSB
hsb(0, 16%, 33%)
CMYK
cmyk(0%, 16%, 16%, 67%)
Oklch
oklch(41.2% 0.019 18.0)

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

#361F27

Dark Violet · DarkSlateGray · Raspberry

HEX
#361F27
RGB
rgb(54, 31, 39)
HSL
hsl(339, 27%, 17%)
HSB
hsb(339, 43%, 21%)
CMYK
cmyk(0%, 43%, 28%, 79%)
Oklch
oklch(27.2% 0.038 357.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CDC8C5
C6CACD

Analogous

CDC6C7
CDC8C5
CDCCC6

Triadic

CDC8C5
C6CDC8
C8C6CD

Split-Comp.

CDC8C5
C6CDCC
C6C7CD

Tetradic

CDC8C5
C7CDC6
C6CACD
CCC6CD

Contrast Matrix WCAG 2.1 Contrast

CDC8C5
838E92
666970
554747
361F27
—
2.0
Fail
3.3
AA Large
5.3
AA
9.2
AAA
2.0
Fail
—
1.6
Fail
2.6
Fail
4.5
AA
3.3
AA Large
1.6
Fail
—
1.6
Fail
2.8
Fail
5.3
AA
2.6
Fail
1.6
Fail
—
1.7
Fail
9.2
AAA
4.5
AA
2.8
Fail
1.7
Fail
—
White BG
1.7Fail
3.4AA Large
5.5AA
8.8AAA
15.2AAA
Black BG
12.7AAA
6.2AA
3.8AA Large
2.4Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCBC6
888891
67676E
4F4F47
2C2C25

Deuteranopia

CBCCC6
878691
67676E
505147
2D2F25

Tritanopia

CDC6C6
849090
666D6D
544747
352423

Achromatopsia

C9C9C9
8B8B8B
696969
4B4B4B
272727

Shades & Tints Shades & Tints

#CDC8C5

Dark
Light

#838E92

Dark
Light

#666970

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cdc8c5;
  --color-2: #838e92;
  --color-3: #666970;
  --color-4: #554747;
  --color-5: #361f27;
}

SCSS

$color-1: #cdc8c5;
$color-2: #838e92;
$color-3: #666970;
$color-4: #554747;
$color-5: #361f27;

TAILWIND

colors: {
  'brand-1': '#cdc8c5',
  'brand-2': '#838e92',
  'brand-3': '#666970',
  'brand-4': '#554747',
  'brand-5': '#361f27',
}

RGB Array

[205, 200, 197], [131, 142, 146], [102, 105, 112], [85, 71, 71], [54, 31, 39]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CDC8C5, #838E92, #666970, #554747, #361F27 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: #cdc8c5; --color-2: #838e92; --color-3: #666970; --color-4: #554747; --color-5: #361f27. 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