← Back to Editor

#9A9793 · #CCD05D · #CDC0C1 · #D6BAC0 · #403D51

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

#9A9793

Ash · DarkGray · Silver Sand

HEX
#9A9793
RGB
rgb(154, 151, 147)
HSL
hsl(34, 3%, 59%)
HSB
hsb(34, 5%, 60%)
CMYK
cmyk(0%, 2%, 5%, 40%)
Oklch
oklch(67.8% 0.007 75.4)

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

#CCD05D

Autumn Sage · BurlyWood · Sunflower

HEX
#CCD05D
RGB
rgb(204, 208, 93)
HSL
hsl(62, 55%, 59%)
HSB
hsb(62, 55%, 82%)
CMYK
cmyk(2%, 0%, 55%, 18%)
Oklch
oklch(83.2% 0.138 110.9)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#CDC0C1

Peach Pink · Silver · Coral Red

HEX
#CDC0C1
RGB
rgb(205, 192, 193)
HSL
hsl(355, 12%, 78%)
HSB
hsb(355, 6%, 80%)
CMYK
cmyk(0%, 6%, 6%, 20%)
Oklch
oklch(81.9% 0.015 12.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#D6BAC0

Peach Pink · Silver · Coral Red

HEX
#D6BAC0
RGB
rgb(214, 186, 192)
HSL
hsl(347, 25%, 78%)
HSB
hsb(347, 13%, 84%)
CMYK
cmyk(0%, 13%, 10%, 16%)
Oklch
oklch(81.5% 0.033 3.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#403D51

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#403D51
RGB
rgb(64, 61, 81)
HSL
hsl(249, 14%, 28%)
HSB
hsb(249, 25%, 32%)
CMYK
cmyk(21%, 25%, 0%, 68%)
Oklch
oklch(37.1% 0.034 291.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9A9793
93969A

Analogous

9A9493
9A9793
999A93

Triadic

9A9793
939A97
97939A

Split-Comp.

9A9793
93999A
94939A

Tetradic

9A9793
939A94
93969A
9A9399

Contrast Matrix WCAG 2.1 Contrast

9A9793
CCD05D
CDC0C1
D6BAC0
403D51
—
1.8
Fail
1.6
Fail
1.6
Fail
3.6
AA Large
1.8
Fail
—
1.1
Fail
1.1
Fail
6.4
AA
1.6
Fail
1.1
Fail
—
1.0
Fail
5.9
AA
1.6
Fail
1.1
Fail
1.0
Fail
—
5.8
AA
3.6
AA Large
6.4
AA
5.9
AA
5.8
AA
—
White BG
2.9Fail
1.6Fail
1.8Fail
1.8Fail
10.5AAA
Black BG
7.2AAA
12.7AAA
11.9AAA
11.6AAA
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

999994
CECE79
C7C7C1
CACABF
3F3F4C

Deuteranopia

999994
CECD80
C8C9C1
CCCEBE
3F3F4B

Tritanopia

9A9595
CC8F94
CCC1C1
D5BDBD
404848

Achromatopsia

979797
C2C2C2
C4C4C4
C3C3C3
404040

Shades & Tints Shades & Tints

#9A9793

Dark
Light

#CCD05D

Dark
Light

#CDC0C1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9a9793;
  --color-2: #ccd05d;
  --color-3: #cdc0c1;
  --color-4: #d6bac0;
  --color-5: #403d51;
}

SCSS

$color-1: #9a9793;
$color-2: #ccd05d;
$color-3: #cdc0c1;
$color-4: #d6bac0;
$color-5: #403d51;

TAILWIND

colors: {
  'brand-1': '#9a9793',
  'brand-2': '#ccd05d',
  'brand-3': '#cdc0c1',
  'brand-4': '#d6bac0',
  'brand-5': '#403d51',
}

RGB Array

[154, 151, 147], [204, 208, 93], [205, 192, 193], [214, 186, 192], [64, 61, 81]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9A9793, #CCD05D, #CDC0C1, #D6BAC0, #403D51 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: #9a9793; --color-2: #ccd05d; --color-3: #cdc0c1; --color-4: #d6bac0; --color-5: #403d51. 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