← Back to Editor

#D3D1D4 · #D7BBA5 · #779F87 · #216676 · #393B47

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

#D3D1D4

Silver Gray · LightGray · Pearl Gray

HEX
#D3D1D4
RGB
rgb(211, 209, 212)
HSL
hsl(280, 3%, 83%)
HSB
hsb(280, 1%, 83%)
CMYK
cmyk(0%, 1%, 0%, 17%)
Oklch
oklch(86.3% 0.005 314.8)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#D7BBA5

Apricot · Tan · Warm Sun

HEX
#D7BBA5
RGB
rgb(215, 187, 165)
HSL
hsl(26, 38%, 75%)
HSB
hsb(26, 23%, 84%)
CMYK
cmyk(0%, 13%, 23%, 16%)
Oklch
oklch(81.0% 0.044 60.3)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#779F87

Celadon · LightSlateGray · Olive Green

HEX
#779F87
RGB
rgb(119, 159, 135)
HSL
hsl(144, 17%, 55%)
HSB
hsb(144, 25%, 62%)
CMYK
cmyk(25%, 0%, 15%, 38%)
Oklch
oklch(66.6% 0.056 158.1)

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

#216676

Lake Blue · Teal · Mint Ice

HEX
#216676
RGB
rgb(33, 102, 118)
HSL
hsl(191, 56%, 30%)
HSB
hsb(191, 72%, 46%)
CMYK
cmyk(72%, 14%, 0%, 54%)
Oklch
oklch(47.5% 0.072 216.3)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#393B47

Indigo · DarkSlateGray · Prussian Blue

HEX
#393B47
RGB
rgb(57, 59, 71)
HSL
hsl(231, 11%, 25%)
HSB
hsb(231, 20%, 28%)
CMYK
cmyk(20%, 17%, 0%, 72%)
Oklch
oklch(35.5% 0.021 277.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D3D1D4
D3D5D2

Analogous

D3D2D5
D3D1D4
D5D2D5

Triadic

D3D1D4
D5D4D2
D2D5D4

Split-Comp.

D3D1D4
D5D5D2
D2D5D3

Tetradic

D3D1D4
D5D3D2
D3D5D2
D2D5D5

Contrast Matrix WCAG 2.1 Contrast

D3D1D4
D7BBA5
779F87
216676
393B47
—
1.2
Fail
2.0
Fail
4.3
AA Large
7.3
AAA
1.2
Fail
—
1.6
Fail
3.6
AA Large
6.1
AA
2.0
Fail
1.6
Fail
—
2.2
Fail
3.8
AA Large
4.3
AA Large
3.6
AA Large
2.2
Fail
—
1.7
Fail
7.3
AAA
6.1
AA
3.8
AA Large
1.7
Fail
—
White BG
1.5Fail
1.8Fail
3.0Fail
6.5AA
11.1AAA
Black BG
13.8AAA
11.5AAA
7.1AAA
3.2AA Large
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D2D2D3
CBCBAA
88898D
3F3F72
3A3A44

Deuteranopia

D2D2D3
CDCFAC
86838E
3B3671
3A3A43

Tritanopia

D3D3D3
D6AFAF
799192
246F6E
394241

Achromatopsia

D2D2D2
C1C1C1
909090
535353
3C3C3C

Shades & Tints Shades & Tints

#D3D1D4

Dark
Light

#D7BBA5

Dark
Light

#779F87

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d3d1d4;
  --color-2: #d7bba5;
  --color-3: #779f87;
  --color-4: #216676;
  --color-5: #393b47;
}

SCSS

$color-1: #d3d1d4;
$color-2: #d7bba5;
$color-3: #779f87;
$color-4: #216676;
$color-5: #393b47;

TAILWIND

colors: {
  'brand-1': '#d3d1d4',
  'brand-2': '#d7bba5',
  'brand-3': '#779f87',
  'brand-4': '#216676',
  'brand-5': '#393b47',
}

RGB Array

[211, 209, 212], [215, 187, 165], [119, 159, 135], [33, 102, 118], [57, 59, 71]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D3D1D4, #D7BBA5, #779F87, #216676, #393B47 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: #d3d1d4; --color-2: #d7bba5; --color-3: #779f87; --color-4: #216676; --color-5: #393b47. 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