← Back to Editor

#3D333B · #6C5F63 · #947F7D · #C7988A · #E6D5B7

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#3D333B

Rose Purple · DarkSlateGray · Dark Stone

HEX
#3D333B
RGB
rgb(61, 51, 59)
HSL
hsl(312, 9%, 22%)
HSB
hsb(312, 16%, 24%)
CMYK
cmyk(0%, 16%, 3%, 76%)
Oklch
oklch(33.5% 0.020 332.8)

Traditional「Rose Purple」· Paint「Dark Stone」· Creative Midnight Shadow

#6C5F63

Ink Gray · DimGray · Charcoal

HEX
#6C5F63
RGB
rgb(108, 95, 99)
HSL
hsl(342, 6%, 40%)
HSB
hsb(342, 12%, 42%)
CMYK
cmyk(0%, 12%, 8%, 58%)
Oklch
oklch(49.9% 0.018 357.2)

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

#947F7D

Crimson · Gray · Passion Red

HEX
#947F7D
RGB
rgb(148, 127, 125)
HSL
hsl(5, 10%, 54%)
HSB
hsb(5, 16%, 58%)
CMYK
cmyk(0%, 14%, 16%, 42%)
Oklch
oklch(61.5% 0.026 24.3)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#C7988A

Peach Pink · Tan · Coral Red

HEX
#C7988A
RGB
rgb(199, 152, 138)
HSL
hsl(14, 35%, 66%)
HSB
hsb(14, 31%, 78%)
CMYK
cmyk(0%, 24%, 31%, 22%)
Oklch
oklch(72.0% 0.060 37.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#E6D5B7

Goose Yellow · Wheat · Peach Orange

HEX
#E6D5B7
RGB
rgb(230, 213, 183)
HSL
hsl(38, 48%, 81%)
HSB
hsb(38, 20%, 90%)
CMYK
cmyk(0%, 7%, 20%, 10%)
Oklch
oklch(87.9% 0.044 81.9)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3D333B
333D35

Analogous

3A333D
3D333B
3D3336

Triadic

3D333B
3B3D33
333B3D

Split-Comp.

3D333B
363D33
333D3A

Tetradic

3D333B
3D3A33
333D35
33363D

Contrast Matrix WCAG 2.1 Contrast

3D333B
6C5F63
947F7D
C7988A
E6D5B7
—
2.0
Fail
3.2
AA Large
4.8
AA
8.4
AAA
2.0
Fail
—
1.6
Fail
2.4
Fail
4.2
AA Large
3.2
AA Large
1.6
Fail
—
1.5
Fail
2.6
Fail
4.8
AA
2.4
Fail
1.5
Fail
—
1.8
Fail
8.4
AAA
4.2
AA Large
2.6
Fail
1.8
Fail
—
White BG
12.1AAA
6.1AA
3.8AA Large
2.5Fail
1.4Fail
Black BG
1.7Fail
3.5AA Large
5.6AA
8.3AAA
14.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

393939
666662
8B8B7D
B3B28D
DFDEBE

Deuteranopia

393A39
676862
8C8E7E
B5B98E
E0E1C0

Tritanopia

3C3837
6B6161
937E7E
C59091
E5C4C5

Achromatopsia

373737
636363
858585
A4A4A4
D7D7D7

Shades & Tints Shades & Tints

#3D333B

Dark
Light

#6C5F63

Dark
Light

#947F7D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3d333b;
  --color-2: #6c5f63;
  --color-3: #947f7d;
  --color-4: #c7988a;
  --color-5: #e6d5b7;
}

SCSS

$color-1: #3d333b;
$color-2: #6c5f63;
$color-3: #947f7d;
$color-4: #c7988a;
$color-5: #e6d5b7;

TAILWIND

colors: {
  'brand-1': '#3d333b',
  'brand-2': '#6c5f63',
  'brand-3': '#947f7d',
  'brand-4': '#c7988a',
  'brand-5': '#e6d5b7',
}

RGB Array

[61, 51, 59], [108, 95, 99], [148, 127, 125], [199, 152, 138], [230, 213, 183]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3D333B, #6C5F63, #947F7D, #C7988A, #E6D5B7 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: #3d333b; --color-2: #6c5f63; --color-3: #947f7d; --color-4: #c7988a; --color-5: #e6d5b7. 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