← Back to Editor

#352C37 · #535160 · #77898B · #97B8AC · #B4DEC6

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#352C37

Dark Plum · DarkSlateGray · Dark Purple

HEX
#352C37
RGB
rgb(53, 44, 55)
HSL
hsl(289, 11%, 19%)
HSB
hsb(289, 20%, 22%)
CMYK
cmyk(4%, 20%, 0%, 78%)
Oklch
oklch(30.7% 0.023 320.1)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

#535160

Deep Indigo · DimGray · Charcoal

HEX
#535160
RGB
rgb(83, 81, 96)
HSL
hsl(248, 8%, 35%)
HSB
hsb(248, 16%, 38%)
CMYK
cmyk(14%, 16%, 0%, 62%)
Oklch
oklch(44.2% 0.024 291.5)

Traditional「Deep Indigo」· Paint「Charcoal」· Creative Midnight Shadow

#77898B

Slate Blue · SlateGray · Warm Gray

HEX
#77898B
RGB
rgb(119, 137, 139)
HSL
hsl(186, 8%, 51%)
HSB
hsb(186, 14%, 55%)
CMYK
cmyk(14%, 1%, 0%, 45%)
Oklch
oklch(61.6% 0.021 204.8)

Traditional「Slate Blue」· Paint「Warm Gray」· Creative Urban Concrete

#97B8AC

Jade · DarkGray · Apple Green

HEX
#97B8AC
RGB
rgb(151, 184, 172)
HSL
hsl(158, 19%, 66%)
HSB
hsb(158, 18%, 72%)
CMYK
cmyk(18%, 0%, 7%, 28%)
Oklch
oklch(75.5% 0.040 171.1)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#B4DEC6

Celadon · Silver · Apple Green

HEX
#B4DEC6
RGB
rgb(180, 222, 198)
HSL
hsl(146, 39%, 79%)
HSB
hsb(146, 19%, 87%)
CMYK
cmyk(19%, 0%, 11%, 13%)
Oklch
oklch(86.4% 0.055 160.0)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

352C37
2D362B

Analogous

2E2B36
352C37
362B32

Triadic

352C37
36342B
2B3634

Split-Comp.

352C37
32362B
2B362E

Tetradic

352C37
362E2B
2D362B
2B3236

Contrast Matrix WCAG 2.1 Contrast

352C37
535160
77898B
97B8AC
B4DEC6
—
1.7
Fail
3.7
AA Large
6.2
AA
9.1
AAA
1.7
Fail
—
2.1
Fail
3.6
AA Large
5.2
AA
3.7
AA Large
2.1
Fail
—
1.7
Fail
2.5
Fail
6.2
AA
3.6
AA Large
1.7
Fail
—
1.5
Fail
9.1
AAA
5.2
AA
2.5
Fail
1.5
Fail
—
White BG
13.4AAA
7.7AAA
3.7AA Large
2.1Fail
1.5Fail
Black BG
1.6Fail
2.7Fail
5.7AA
9.8AAA
14.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

313134
52525C
7F7F8B
A5A6AF
C6C7CC

Deuteranopia

323234
52525B
7E7C8A
A3A1B0
C4C1CD

Tritanopia

353232
535A59
788A8A
99B1B2
B6D0D1

Achromatopsia

303030
535353
848484
ADADAD
CFCFCF

Shades & Tints Shades & Tints

#352C37

Dark
Light

#535160

Dark
Light

#77898B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #352c37;
  --color-2: #535160;
  --color-3: #77898b;
  --color-4: #97b8ac;
  --color-5: #b4dec6;
}

SCSS

$color-1: #352c37;
$color-2: #535160;
$color-3: #77898b;
$color-4: #97b8ac;
$color-5: #b4dec6;

TAILWIND

colors: {
  'brand-1': '#352c37',
  'brand-2': '#535160',
  'brand-3': '#77898b',
  'brand-4': '#97b8ac',
  'brand-5': '#b4dec6',
}

RGB Array

[53, 44, 55], [83, 81, 96], [119, 137, 139], [151, 184, 172], [180, 222, 198]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #352C37, #535160, #77898B, #97B8AC, #B4DEC6 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: #352c37; --color-2: #535160; --color-3: #77898b; --color-4: #97b8ac; --color-5: #b4dec6. 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