← Back to Editor

#3C4143 · #4A5153 · #32757C · #888687 · #D4CCC8

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

#3C4143

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#3C4143
RGB
rgb(60, 65, 67)
HSL
hsl(197, 6%, 25%)
HSB
hsb(197, 10%, 26%)
CMYK
cmyk(10%, 3%, 0%, 74%)
Oklch
oklch(37.1% 0.008 223.6)

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

#4A5153

Ink Gray · DarkSlateGray · Charcoal

HEX
#4A5153
RGB
rgb(74, 81, 83)
HSL
hsl(193, 6%, 31%)
HSB
hsb(193, 11%, 33%)
CMYK
cmyk(11%, 2%, 0%, 67%)
Oklch
oklch(42.9% 0.010 216.7)

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

#32757C

Slate Blue · SeaGreen · Mint Ice

HEX
#32757C
RGB
rgb(50, 117, 124)
HSL
hsl(186, 43%, 34%)
HSB
hsb(186, 60%, 49%)
CMYK
cmyk(60%, 6%, 0%, 51%)
Oklch
oklch(52.2% 0.068 204.6)

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

#888687

Ash · Gray · Warm Gray

HEX
#888687
RGB
rgb(136, 134, 135)
HSL
hsl(330, 1%, 53%)
HSB
hsb(330, 1%, 53%)
CMYK
cmyk(0%, 1%, 1%, 47%)
Oklch
oklch(62.2% 0.003 345.3)

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

#D4CCC8

Apricot · LightGray · Peach Orange

HEX
#D4CCC8
RGB
rgb(212, 204, 200)
HSL
hsl(20, 12%, 81%)
HSB
hsb(20, 6%, 83%)
CMYK
cmyk(0%, 4%, 6%, 17%)
Oklch
oklch(85.1% 0.011 48.6)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3C4143
443E3C

Analogous

3C4442
3C4143
3C3E44

Triadic

3C4143
443C41
41443C

Split-Comp.

3C4143
443C3E
44423C

Tetradic

3C4143
423C44
443E3C
3E443C

Contrast Matrix WCAG 2.1 Contrast

3C4143
4A5153
32757C
888687
D4CCC8
—
1.3
Fail
2.0
Fail
2.9
Fail
6.5
AA
1.3
Fail
—
1.5
Fail
2.2
Fail
5.1
AA
2.0
Fail
1.5
Fail
—
1.5
Fail
3.3
AA Large
2.9
Fail
2.2
Fail
1.5
Fail
—
2.3
Fail
6.5
AA
5.1
AA
3.3
AA Large
2.3
Fail
—
White BG
10.3AAA
8.1AAA
5.3AA
3.6AA Large
1.6Fail
Black BG
2.0Fail
2.6Fail
4.0AA Large
5.8AA
13.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3E3E43
4D4D53
4F507A
878787
D1D0C9

Deuteranopia

3E3E42
4D4C52
4B467A
878787
D1D2C9

Tritanopia

3C4242
4A5252
357979
888787
D4CACA

Achromatopsia

404040
4F4F4F
626262
878787
CECECE

Shades & Tints Shades & Tints

#3C4143

Dark
Light

#4A5153

Dark
Light

#32757C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3c4143;
  --color-2: #4a5153;
  --color-3: #32757c;
  --color-4: #888687;
  --color-5: #d4ccc8;
}

SCSS

$color-1: #3c4143;
$color-2: #4a5153;
$color-3: #32757c;
$color-4: #888687;
$color-5: #d4ccc8;

TAILWIND

colors: {
  'brand-1': '#3c4143',
  'brand-2': '#4a5153',
  'brand-3': '#32757c',
  'brand-4': '#888687',
  'brand-5': '#d4ccc8',
}

RGB Array

[60, 65, 67], [74, 81, 83], [50, 117, 124], [136, 134, 135], [212, 204, 200]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3C4143, #4A5153, #32757C, #888687, #D4CCC8 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: #3c4143; --color-2: #4a5153; --color-3: #32757c; --color-4: #888687; --color-5: #d4ccc8. 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