← Back to Editor

#35242D · #4F4B4B · #78786E · #84968F · #87A2B0

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

#35242D

Rose Purple · DarkSlateGray · Raspberry

HEX
#35242D
RGB
rgb(53, 36, 45)
HSL
hsl(328, 19%, 17%)
HSB
hsb(328, 32%, 21%)
CMYK
cmyk(0%, 32%, 15%, 79%)
Oklch
oklch(28.4% 0.030 346.1)

Traditional「Rose Purple」· Paint「Raspberry」· Creative Blush Sunrise

#4F4B4B

Dark Cyan · DarkSlateGray · Charcoal

HEX
#4F4B4B
RGB
rgb(79, 75, 75)
HSL
hsl(0, 3%, 30%)
HSB
hsb(0, 5%, 31%)
CMYK
cmyk(0%, 5%, 5%, 69%)
Oklch
oklch(41.7% 0.005 17.4)

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

#78786E

Ink Gray · Gray · Warm Gray

HEX
#78786E
RGB
rgb(120, 120, 110)
HSL
hsl(60, 4%, 45%)
HSB
hsb(60, 8%, 47%)
CMYK
cmyk(0%, 0%, 8%, 53%)
Oklch
oklch(57.0% 0.015 106.9)

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

#84968F

Mineral Blue · LightSlateGray · Warm Gray

HEX
#84968F
RGB
rgb(132, 150, 143)
HSL
hsl(157, 8%, 55%)
HSB
hsb(157, 12%, 59%)
CMYK
cmyk(12%, 0%, 5%, 41%)
Oklch
oklch(65.7% 0.023 170.2)

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

#87A2B0

Sky Blue · DarkGray · Cobalt Blue

HEX
#87A2B0
RGB
rgb(135, 162, 176)
HSL
hsl(200, 21%, 61%)
HSB
hsb(200, 23%, 69%)
CMYK
cmyk(23%, 8%, 0%, 31%)
Oklch
oklch(69.6% 0.036 230.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

35242D
23342B

Analogous

332334
35242D
342324

Triadic

35242D
2C3423
232C34

Split-Comp.

35242D
243423
233433

Tetradic

35242D
343323
23342B
232434

Contrast Matrix WCAG 2.1 Contrast

35242D
4F4B4B
78786E
84968F
87A2B0
—
1.7
Fail
3.3
AA Large
4.7
AA
5.4
AA
1.7
Fail
—
1.9
Fail
2.8
Fail
3.2
AA Large
3.3
AA Large
1.9
Fail
—
1.4
Fail
1.7
Fail
4.7
AA
2.8
Fail
1.4
Fail
—
1.2
Fail
5.4
AA
3.2
AA Large
1.7
Fail
1.2
Fail
—
White BG
14.6AAA
8.6AAA
4.5AA Large
3.1AA Large
2.7Fail
Black BG
1.4Fail
2.4Fail
4.7AA
6.7AA
7.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2D2B
4D4D4B
787870
8C8C91
9393AD

Deuteranopia

2F302A
4E4E4B
787871
8B8991
918FAC

Tritanopia

342929
4F4B4B
787273
859292
88AAA9

Achromatopsia

2A2A2A
4C4C4C
777777
909090
9C9C9C

Shades & Tints Shades & Tints

#35242D

Dark
Light

#4F4B4B

Dark
Light

#78786E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #35242d;
  --color-2: #4f4b4b;
  --color-3: #78786e;
  --color-4: #84968f;
  --color-5: #87a2b0;
}

SCSS

$color-1: #35242d;
$color-2: #4f4b4b;
$color-3: #78786e;
$color-4: #84968f;
$color-5: #87a2b0;

TAILWIND

colors: {
  'brand-1': '#35242d',
  'brand-2': '#4f4b4b',
  'brand-3': '#78786e',
  'brand-4': '#84968f',
  'brand-5': '#87a2b0',
}

RGB Array

[53, 36, 45], [79, 75, 75], [120, 120, 110], [132, 150, 143], [135, 162, 176]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #35242D, #4F4B4B, #78786E, #84968F, #87A2B0 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: #35242d; --color-2: #4f4b4b; --color-3: #78786e; --color-4: #84968f; --color-5: #87a2b0. 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