← Back to Editor

#3A333D · #644658 · #8E9C87 · #B8F1B6 · #434C53

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

#3A333D

Dark Plum · DarkSlateGray · Dark Stone

HEX
#3A333D
RGB
rgb(58, 51, 61)
HSL
hsl(282, 9%, 22%)
HSB
hsb(282, 16%, 24%)
CMYK
cmyk(5%, 16%, 0%, 76%)
Oklch
oklch(33.2% 0.020 315.8)

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

#644658

Rose Purple · DimGray · Camellia

HEX
#644658
RGB
rgb(100, 70, 88)
HSL
hsl(324, 18%, 33%)
HSB
hsb(324, 30%, 39%)
CMYK
cmyk(0%, 30%, 12%, 61%)
Oklch
oklch(43.3% 0.049 342.6)

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

#8E9C87

Celadon · Gray · Olive Green

HEX
#8E9C87
RGB
rgb(142, 156, 135)
HSL
hsl(100, 10%, 57%)
HSB
hsb(100, 13%, 61%)
CMYK
cmyk(9%, 0%, 13%, 39%)
Oklch
oklch(67.6% 0.034 135.1)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#B8F1B6

Emerald · LightGray · Mint Green

HEX
#B8F1B6
RGB
rgb(184, 241, 182)
HSL
hsl(118, 68%, 83%)
HSB
hsb(118, 24%, 95%)
CMYK
cmyk(24%, 0%, 24%, 5%)
Oklch
oklch(90.4% 0.098 143.9)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#434C53

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#434C53
RGB
rgb(67, 76, 83)
HSL
hsl(206, 11%, 29%)
HSB
hsb(206, 19%, 33%)
CMYK
cmyk(19%, 8%, 0%, 67%)
Oklch
oklch(41.1% 0.017 241.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3A333D
363D33

Analogous

35333D
3A333D
3D333B

Triadic

3A333D
3D3A33
333D3A

Split-Comp.

3A333D
3B3D33
333D35

Tetradic

3A333D
3D3533
363D33
333B3D

Contrast Matrix WCAG 2.1 Contrast

3A333D
644658
8E9C87
B8F1B6
434C53
—
1.5
Fail
4.2
AA Large
9.5
AAA
1.4
Fail
1.5
Fail
—
2.8
Fail
6.4
AA
1.1
Fail
4.2
AA Large
2.8
Fail
—
2.2
Fail
3.0
AA Large
9.5
AAA
6.4
AA
2.2
Fail
—
6.8
AA
1.4
Fail
1.1
Fail
3.0
AA Large
6.8
AA
—
White BG
12.2AAA
8.2AAA
2.9Fail
1.3Fail
8.8AAA
Black BG
1.7Fail
2.6Fail
7.3AAA
16.3AAA
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

37373B
575754
94948C
D1D1C4
474751

Deuteranopia

37383A
595B53
93928D
CDC9C8
464651

Tritanopia

3A3938
63504F
8F9091
BBD0D2
435050

Achromatopsia

363636
515151
959595
D9D9D9
4A4A4A

Shades & Tints Shades & Tints

#3A333D

Dark
Light

#644658

Dark
Light

#8E9C87

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3a333d;
  --color-2: #644658;
  --color-3: #8e9c87;
  --color-4: #b8f1b6;
  --color-5: #434c53;
}

SCSS

$color-1: #3a333d;
$color-2: #644658;
$color-3: #8e9c87;
$color-4: #b8f1b6;
$color-5: #434c53;

TAILWIND

colors: {
  'brand-1': '#3a333d',
  'brand-2': '#644658',
  'brand-3': '#8e9c87',
  'brand-4': '#b8f1b6',
  'brand-5': '#434c53',
}

RGB Array

[58, 51, 61], [100, 70, 88], [142, 156, 135], [184, 241, 182], [67, 76, 83]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3A333D, #644658, #8E9C87, #B8F1B6, #434C53 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: #3a333d; --color-2: #644658; --color-3: #8e9c87; --color-4: #b8f1b6; --color-5: #434c53. 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