← Back to Editor

#9A9EA8 · #C5B8C0 · #DFD5D4 · #965A75 · #5F2E3F

muted

A 5-color muted 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

#9A9EA8

Ash · DarkGray · Silver Sand

HEX
#9A9EA8
RGB
rgb(154, 158, 168)
HSL
hsl(223, 7%, 63%)
HSB
hsb(223, 8%, 66%)
CMYK
cmyk(8%, 6%, 0%, 34%)
Oklch
oklch(69.9% 0.015 268.4)

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

#C5B8C0

Mauve · Silver · Rose Pink

HEX
#C5B8C0
RGB
rgb(197, 184, 192)
HSL
hsl(323, 10%, 75%)
HSB
hsb(323, 7%, 77%)
CMYK
cmyk(0%, 7%, 3%, 23%)
Oklch
oklch(79.6% 0.018 340.0)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

#DFD5D4

Peach Pink · LightGray · Cherry Blossom

HEX
#DFD5D4
RGB
rgb(223, 213, 212)
HSL
hsl(5, 15%, 85%)
HSB
hsb(5, 5%, 87%)
CMYK
cmyk(0%, 4%, 5%, 13%)
Oklch
oklch(88.1% 0.011 24.3)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#965A75

Dark Violet · Gray · Camellia

HEX
#965A75
RGB
rgb(150, 90, 117)
HSL
hsl(333, 25%, 47%)
HSB
hsb(333, 40%, 59%)
CMYK
cmyk(0%, 40%, 22%, 41%)
Oklch
oklch(54.3% 0.086 351.9)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#5F2E3F

Dark Violet · DarkSlateGray · Camellia

HEX
#5F2E3F
RGB
rgb(95, 46, 63)
HSL
hsl(339, 35%, 28%)
HSB
hsb(339, 52%, 37%)
CMYK
cmyk(0%, 52%, 34%, 63%)
Oklch
oklch(37.2% 0.074 359.3)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9A9EA8
A7A49A

Analogous

9AA4A7
9A9EA8
9D9AA7

Triadic

9A9EA8
A79A9E
9EA79A

Split-Comp.

9A9EA8
A79D9A
A4A79A

Tetradic

9A9EA8
A79AA4
A7A49A
9AA79D

Contrast Matrix WCAG 2.1 Contrast

9A9EA8
C5B8C0
DFD5D4
965A75
5F2E3F
—
1.4
Fail
1.9
Fail
1.9
Fail
4.0
AA Large
1.4
Fail
—
1.3
Fail
2.7
Fail
5.6
AA
1.9
Fail
1.3
Fail
—
3.6
AA Large
7.5
AAA
1.9
Fail
2.7
Fail
3.6
AA Large
—
2.1
Fail
4.0
AA Large
5.6
AA
7.5
AAA
2.1
Fail
—
White BG
2.7Fail
1.9Fail
1.4Fail
5.2AA
10.8AAA
Black BG
7.8AAA
11.0AAA
14.6AAA
4.0AA Large
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9C9CA6
BFBFBE
DBDBD4
7C7B6E
4A493B

Deuteranopia

9C9BA5
C0C1BE
DBDCD4
80846D
4D503A

Tritanopia

9AA4A3
C4BDBC
DFD4D4
936968
5D3837

Achromatopsia

9E9E9E
BDBDBD
D8D8D8
6F6F6F
3F3F3F

Shades & Tints Shades & Tints

#9A9EA8

Dark
Light

#C5B8C0

Dark
Light

#DFD5D4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9a9ea8;
  --color-2: #c5b8c0;
  --color-3: #dfd5d4;
  --color-4: #965a75;
  --color-5: #5f2e3f;
}

SCSS

$color-1: #9a9ea8;
$color-2: #c5b8c0;
$color-3: #dfd5d4;
$color-4: #965a75;
$color-5: #5f2e3f;

TAILWIND

colors: {
  'brand-1': '#9a9ea8',
  'brand-2': '#c5b8c0',
  'brand-3': '#dfd5d4',
  'brand-4': '#965a75',
  'brand-5': '#5f2e3f',
}

RGB Array

[154, 158, 168], [197, 184, 192], [223, 213, 212], [150, 90, 117], [95, 46, 63]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This muted-style palette of #9A9EA8, #C5B8C0, #DFD5D4, #965A75, #5F2E3F 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: #9a9ea8; --color-2: #c5b8c0; --color-3: #dfd5d4; --color-4: #965a75; --color-5: #5f2e3f. 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 muted-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