← Back to Editor

#DBDFD4 · #C7BCB4 · #9E9EA3 · #736D78 · #5C4E66

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

#DBDFD4

Willow Green · LightGray · Mint Green

HEX
#DBDFD4
RGB
rgb(219, 223, 212)
HSL
hsl(82, 15%, 85%)
HSB
hsb(82, 5%, 87%)
CMYK
cmyk(2%, 0%, 5%, 13%)
Oklch
oklch(89.8% 0.015 123.1)

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

#C7BCB4

Apricot · Silver · Warm Sun

HEX
#C7BCB4
RGB
rgb(199, 188, 180)
HSL
hsl(25, 15%, 74%)
HSB
hsb(25, 10%, 78%)
CMYK
cmyk(0%, 6%, 10%, 22%)
Oklch
oklch(80.2% 0.017 58.6)

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

#9E9EA3

Ash · DarkGray · Silver Sand

HEX
#9E9EA3
RGB
rgb(158, 158, 163)
HSL
hsl(240, 3%, 63%)
HSB
hsb(240, 3%, 64%)
CMYK
cmyk(3%, 3%, 0%, 36%)
Oklch
oklch(70.1% 0.007 286.2)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#736D78

Ink Gray · DimGray · Warm Gray

HEX
#736D78
RGB
rgb(115, 109, 120)
HSL
hsl(273, 5%, 45%)
HSB
hsb(273, 9%, 47%)
CMYK
cmyk(4%, 9%, 0%, 53%)
Oklch
oklch(54.4% 0.018 309.9)

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

#5C4E66

Dark Plum · DimGray · Eggplant

HEX
#5C4E66
RGB
rgb(92, 78, 102)
HSL
hsl(275, 13%, 35%)
HSB
hsb(275, 24%, 40%)
CMYK
cmyk(10%, 24%, 0%, 60%)
Oklch
oklch(44.7% 0.042 311.0)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DBDFD4
D7D3DE

Analogous

DEDDD3
DBDFD4
D5DED3

Triadic

DBDFD4
D3DADE
DED3DA

Split-Comp.

DBDFD4
D3D5DE
DDD3DE

Tetradic

DBDFD4
D3DEDD
D7D3DE
DED3D5

Contrast Matrix WCAG 2.1 Contrast

DBDFD4
C7BCB4
9E9EA3
736D78
5C4E66
—
1.4
Fail
2.0
Fail
3.7
AA Large
5.7
AA
1.4
Fail
—
1.4
Fail
2.7
Fail
4.1
AA Large
2.0
Fail
1.4
Fail
—
1.9
Fail
2.9
Fail
3.7
AA Large
2.7
Fail
1.9
Fail
—
1.5
Fail
5.7
AA
4.1
AA Large
2.9
Fail
1.5
Fail
—
White BG
1.4Fail
1.9Fail
2.7Fail
5.0AA
7.7AAA
Black BG
15.5AAA
11.3AAA
7.9AAA
4.2AA Large
2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDDD7
C2C2B6
9E9EA2
707075
565660

Deuteranopia

DDDCD7
C3C4B6
9E9EA2
717175
57585F

Tritanopia

DBD9D9
C6B7B8
9EA1A1
737373
5B5C5B

Achromatopsia

DDDDDD
BEBEBE
9F9F9F
707070
555555

Shades & Tints Shades & Tints

#DBDFD4

Dark
Light

#C7BCB4

Dark
Light

#9E9EA3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dbdfd4;
  --color-2: #c7bcb4;
  --color-3: #9e9ea3;
  --color-4: #736d78;
  --color-5: #5c4e66;
}

SCSS

$color-1: #dbdfd4;
$color-2: #c7bcb4;
$color-3: #9e9ea3;
$color-4: #736d78;
$color-5: #5c4e66;

TAILWIND

colors: {
  'brand-1': '#dbdfd4',
  'brand-2': '#c7bcb4',
  'brand-3': '#9e9ea3',
  'brand-4': '#736d78',
  'brand-5': '#5c4e66',
}

RGB Array

[219, 223, 212], [199, 188, 180], [158, 158, 163], [115, 109, 120], [92, 78, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DBDFD4, #C7BCB4, #9E9EA3, #736D78, #5C4E66 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: #dbdfd4; --color-2: #c7bcb4; --color-3: #9e9ea3; --color-4: #736d78; --color-5: #5c4e66. 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