← Back to Editor

#0C0D11 · #DDDED8 · #B7BCB5 · #A49C8F · #7F978A

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

#0C0D11

Indigo · Black · Deep Sea Blue

HEX
#0C0D11
RGB
rgb(12, 13, 17)
HSL
hsl(228, 17%, 6%)
HSB
hsb(228, 29%, 7%)
CMYK
cmyk(29%, 24%, 0%, 93%)
Oklch
oklch(16.0% 0.009 274.3)

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

#DDDED8

Willow Green · LightGray · Cloud White

HEX
#DDDED8
RGB
rgb(221, 222, 216)
HSL
hsl(70, 8%, 86%)
HSB
hsb(70, 3%, 87%)
CMYK
cmyk(0%, 0%, 3%, 13%)
Oklch
oklch(89.8% 0.008 114.2)

Traditional「Willow Green」· Paint「Cloud White」· Creative Silver Lining

#B7BCB5

Silver Gray · Silver · Pearl Gray

HEX
#B7BCB5
RGB
rgb(183, 188, 181)
HSL
hsl(103, 5%, 72%)
HSB
hsb(103, 4%, 74%)
CMYK
cmyk(3%, 0%, 4%, 26%)
Oklch
oklch(78.9% 0.011 136.6)

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

#A49C8F

Ginger · DarkGray · Warm Sun

HEX
#A49C8F
RGB
rgb(164, 156, 143)
HSL
hsl(37, 10%, 60%)
HSB
hsb(37, 13%, 64%)
CMYK
cmyk(0%, 5%, 13%, 36%)
Oklch
oklch(69.6% 0.021 80.1)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#7F978A

Celadon · LightSlateGray · Olive Green

HEX
#7F978A
RGB
rgb(127, 151, 138)
HSL
hsl(147, 10%, 55%)
HSB
hsb(147, 16%, 59%)
CMYK
cmyk(16%, 0%, 9%, 41%)
Oklch
oklch(65.4% 0.033 161.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0C0D11
12110D

Analogous

0D1012
0C0D11
0E0D12

Triadic

0C0D11
120D0E
0E120D

Split-Comp.

0C0D11
120E0D
10120D

Tetradic

0C0D11
120D10
12110D
0D120E

Contrast Matrix WCAG 2.1 Contrast

0C0D11
DDDED8
B7BCB5
A49C8F
7F978A
—
14.3
AAA
10.1
AAA
7.1
AAA
6.2
AA
14.3
AAA
—
1.4
Fail
2.0
Fail
2.3
Fail
10.1
AAA
1.4
Fail
—
1.4
Fail
1.6
Fail
7.1
AAA
2.0
Fail
1.4
Fail
—
1.2
Fail
6.2
AA
2.3
Fail
1.6
Fail
1.2
Fail
—
White BG
19.4AAA
1.4Fail
1.9Fail
2.7Fail
3.1AA Large
Black BG
1.1Fail
15.5AAA
10.9AAA
7.7AAA
6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

0C0C10
DDDDD9
B9B9B7
A1A092
898A8D

Deuteranopia

0C0C10
DDDDDA
B9B9B7
A1A293
88868E

Tritanopia

0C0F0F
DDDBDB
B7B8B8
A49595
809090

Achromatopsia

0D0D0D
DDDDDD
BABABA
9D9D9D
8E8E8E

Shades & Tints Shades & Tints

#0C0D11

Dark
Light

#DDDED8

Dark
Light

#B7BCB5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0c0d11;
  --color-2: #ddded8;
  --color-3: #b7bcb5;
  --color-4: #a49c8f;
  --color-5: #7f978a;
}

SCSS

$color-1: #0c0d11;
$color-2: #ddded8;
$color-3: #b7bcb5;
$color-4: #a49c8f;
$color-5: #7f978a;

TAILWIND

colors: {
  'brand-1': '#0c0d11',
  'brand-2': '#ddded8',
  'brand-3': '#b7bcb5',
  'brand-4': '#a49c8f',
  'brand-5': '#7f978a',
}

RGB Array

[12, 13, 17], [221, 222, 216], [183, 188, 181], [164, 156, 143], [127, 151, 138]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This muted-style palette of #0C0D11, #DDDED8, #B7BCB5, #A49C8F, #7F978A 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: #0c0d11; --color-2: #ddded8; --color-3: #b7bcb5; --color-4: #a49c8f; --color-5: #7f978a. 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