← Back to Editor

#D8D4C8 · #C2B8AE · #A4A4A2 · #9397A0 · #373A5D

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

#D8D4C8

Goose Yellow · LightGray · Lemon Cream

HEX
#D8D4C8
RGB
rgb(216, 212, 200)
HSL
hsl(45, 17%, 82%)
HSB
hsb(45, 7%, 85%)
CMYK
cmyk(0%, 2%, 7%, 15%)
Oklch
oklch(87.0% 0.017 91.6)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#C2B8AE

Goose Yellow · Silver · Warm Sun

HEX
#C2B8AE
RGB
rgb(194, 184, 174)
HSL
hsl(30, 14%, 72%)
HSB
hsb(30, 10%, 76%)
CMYK
cmyk(0%, 5%, 10%, 24%)
Oklch
oklch(78.8% 0.018 67.6)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#A4A4A2

Ash · DarkGray · Silver Sand

HEX
#A4A4A2
RGB
rgb(164, 164, 162)
HSL
hsl(60, 1%, 64%)
HSB
hsb(60, 1%, 64%)
CMYK
cmyk(0%, 0%, 1%, 36%)
Oklch
oklch(71.8% 0.003 106.5)

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

#9397A0

Ash · DarkGray · Silver Sand

HEX
#9397A0
RGB
rgb(147, 151, 160)
HSL
hsl(222, 6%, 60%)
HSB
hsb(222, 8%, 63%)
CMYK
cmyk(8%, 6%, 0%, 37%)
Oklch
oklch(67.6% 0.014 266.7)

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

#373A5D

Indigo · DarkSlateGray · Prussian Blue

HEX
#373A5D
RGB
rgb(55, 58, 93)
HSL
hsl(235, 26%, 29%)
HSB
hsb(235, 41%, 36%)
CMYK
cmyk(41%, 38%, 0%, 64%)
Oklch
oklch(36.2% 0.060 279.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8D4C8
C9CDD9

Analogous

D9CDC9
D8D4C8
D5D9C9

Triadic

D8D4C8
C9D9D5
D5C9D9

Split-Comp.

D8D4C8
C9D5D9
CDC9D9

Tetradic

D8D4C8
C9D9CD
C9CDD9
D9C9D5

Contrast Matrix WCAG 2.1 Contrast

D8D4C8
C2B8AE
A4A4A2
9397A0
373A5D
—
1.3
Fail
1.7
Fail
2.0
Fail
7.4
AAA
1.3
Fail
—
1.3
Fail
1.5
Fail
5.6
AA
1.7
Fail
1.3
Fail
—
1.2
Fail
4.4
AA Large
2.0
Fail
1.5
Fail
1.2
Fail
—
3.7
AA Large
7.4
AAA
5.6
AA
4.4
AA Large
3.7
AA Large
—
White BG
1.5Fail
2.0Fail
2.5Fail
2.9Fail
10.9AAA
Black BG
14.2AAA
10.8AAA
8.4AAA
7.2AAA
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D6CB
BEBEB0
A4A4A2
95959E
383855

Deuteranopia

D7D7CC
BEBFB1
A4A4A3
95949D
383853

Tritanopia

D8CDCE
C1B2B3
A4A3A3
939C9C
374E4C

Achromatopsia

D4D4D4
BABABA
A4A4A4
979797
3D3D3D

Shades & Tints Shades & Tints

#D8D4C8

Dark
Light

#C2B8AE

Dark
Light

#A4A4A2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8d4c8;
  --color-2: #c2b8ae;
  --color-3: #a4a4a2;
  --color-4: #9397a0;
  --color-5: #373a5d;
}

SCSS

$color-1: #d8d4c8;
$color-2: #c2b8ae;
$color-3: #a4a4a2;
$color-4: #9397a0;
$color-5: #373a5d;

TAILWIND

colors: {
  'brand-1': '#d8d4c8',
  'brand-2': '#c2b8ae',
  'brand-3': '#a4a4a2',
  'brand-4': '#9397a0',
  'brand-5': '#373a5d',
}

RGB Array

[216, 212, 200], [194, 184, 174], [164, 164, 162], [147, 151, 160], [55, 58, 93]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D8D4C8, #C2B8AE, #A4A4A2, #9397A0, #373A5D 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: #d8d4c8; --color-2: #c2b8ae; --color-3: #a4a4a2; --color-4: #9397a0; --color-5: #373a5d. 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