← Back to Editor

#3D3C46 · #615B79 · #B89898 · #D3D1B8 · #D9EDD8

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

#3D3C46

Deep Indigo · DarkSlateGray · Dark Stone

HEX
#3D3C46
RGB
rgb(61, 60, 70)
HSL
hsl(246, 8%, 25%)
HSB
hsb(246, 14%, 27%)
CMYK
cmyk(13%, 14%, 0%, 73%)
Oklch
oklch(36.1% 0.017 290.1)

Traditional「Deep Indigo」· Paint「Dark Stone」· Creative Midnight Shadow

#615B79

Deep Indigo · DimGray · Navy Blue

HEX
#615B79
RGB
rgb(97, 91, 121)
HSL
hsl(252, 14%, 42%)
HSB
hsb(252, 25%, 47%)
CMYK
cmyk(20%, 25%, 0%, 53%)
Oklch
oklch(48.8% 0.048 293.7)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#B89898

Peach Pink · DarkGray · Coral Red

HEX
#B89898
RGB
rgb(184, 152, 152)
HSL
hsl(0, 18%, 66%)
HSB
hsb(0, 17%, 72%)
CMYK
cmyk(0%, 17%, 17%, 28%)
Oklch
oklch(70.9% 0.038 18.1)

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

#D3D1B8

Fresh Green · Silver · Lemon Cream

HEX
#D3D1B8
RGB
rgb(211, 209, 184)
HSL
hsl(56, 23%, 77%)
HSB
hsb(56, 13%, 83%)
CMYK
cmyk(0%, 1%, 13%, 17%)
Oklch
oklch(85.6% 0.034 103.3)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#D9EDD8

Celadon · LightGray · Mint Green

HEX
#D9EDD8
RGB
rgb(217, 237, 216)
HSL
hsl(117, 37%, 89%)
HSB
hsb(117, 9%, 93%)
CMYK
cmyk(8%, 0%, 9%, 7%)
Oklch
oklch(92.6% 0.035 144.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3D3C46
44453B

Analogous

3B3F45
3D3C46
413B45

Triadic

3D3C46
453C3B
3B453C

Split-Comp.

3D3C46
45413B
3F453B

Tetradic

3D3C46
453B3F
44453B
3B4541

Contrast Matrix WCAG 2.1 Contrast

3D3C46
615B79
B89898
D3D1B8
D9EDD8
—
1.7
Fail
4.1
AA Large
7.0
AAA
8.8
AAA
1.7
Fail
—
2.4
Fail
4.1
AA Large
5.2
AA
4.1
AA Large
2.4
Fail
—
1.7
Fail
2.1
Fail
7.0
AAA
4.1
AA Large
1.7
Fail
—
1.3
Fail
8.8
AAA
5.2
AA
2.1
Fail
1.3
Fail
—
White BG
10.9AAA
6.4AA
2.6Fail
1.5Fail
1.2Fail
Black BG
1.9Fail
3.3AA Large
8.0AAA
13.6AAA
17.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3D3D44
5E5E72
AAAA98
D2D2BE
E2E2DD

Deuteranopia

3D3D43
5F5F70
ACAE98
D2D2BF
E1DFDE

Tritanopia

3D4241
616C6B
B69898
D3C3C4
DAE1E2

Achromatopsia

3D3D3D
606060
A2A2A2
CFCFCF
E5E5E5

Shades & Tints Shades & Tints

#3D3C46

Dark
Light

#615B79

Dark
Light

#B89898

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3d3c46;
  --color-2: #615b79;
  --color-3: #b89898;
  --color-4: #d3d1b8;
  --color-5: #d9edd8;
}

SCSS

$color-1: #3d3c46;
$color-2: #615b79;
$color-3: #b89898;
$color-4: #d3d1b8;
$color-5: #d9edd8;

TAILWIND

colors: {
  'brand-1': '#3d3c46',
  'brand-2': '#615b79',
  'brand-3': '#b89898',
  'brand-4': '#d3d1b8',
  'brand-5': '#d9edd8',
}

RGB Array

[61, 60, 70], [97, 91, 121], [184, 152, 152], [211, 209, 184], [217, 237, 216]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3D3C46, #615B79, #B89898, #D3D1B8, #D9EDD8 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: #3d3c46; --color-2: #615b79; --color-3: #b89898; --color-4: #d3d1b8; --color-5: #d9edd8. 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