← Back to Editor

#303646 · #57617A · #7D8BAE · #B88FA9 · #FFBDA7

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

#303646

Indigo · DarkSlateGray · Prussian Blue

HEX
#303646
RGB
rgb(48, 54, 70)
HSL
hsl(224, 19%, 23%)
HSB
hsb(224, 31%, 27%)
CMYK
cmyk(31%, 23%, 0%, 73%)
Oklch
oklch(33.4% 0.030 268.7)

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

#57617A

Indigo · DimGray · Navy Blue

HEX
#57617A
RGB
rgb(87, 97, 122)
HSL
hsl(223, 17%, 41%)
HSB
hsb(223, 29%, 48%)
CMYK
cmyk(29%, 20%, 0%, 52%)
Oklch
oklch(49.4% 0.042 267.8)

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

#7D8BAE

Azure · LightSlateGray · Navy Blue

HEX
#7D8BAE
RGB
rgb(125, 139, 174)
HSL
hsl(223, 23%, 59%)
HSB
hsb(223, 28%, 68%)
CMYK
cmyk(28%, 20%, 0%, 32%)
Oklch
oklch(63.8% 0.055 267.8)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#B88FA9

Mauve · DarkGray · Rose Pink

HEX
#B88FA9
RGB
rgb(184, 143, 169)
HSL
hsl(322, 22%, 64%)
HSB
hsb(322, 22%, 72%)
CMYK
cmyk(0%, 22%, 8%, 28%)
Oklch
oklch(69.7% 0.061 340.5)

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

#FFBDA7

Apricot · LightPink · Peach Orange

HEX
#FFBDA7
RGB
rgb(255, 189, 167)
HSL
hsl(15, 100%, 83%)
HSB
hsb(15, 35%, 100%)
CMYK
cmyk(0%, 26%, 35%, 0%)
Oklch
oklch(85.3% 0.083 39.2)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

303646
464030

Analogous

304146
303646
353046

Triadic

303646
463035
354630

Split-Comp.

303646
463530
414630

Tetradic

303646
463041
464030
304635

Contrast Matrix WCAG 2.1 Contrast

303646
57617A
7D8BAE
B88FA9
FFBDA7
—
1.9
Fail
3.5
AA Large
4.3
AA Large
7.5
AAA
1.9
Fail
—
1.8
Fail
2.2
Fail
3.9
AA Large
3.5
AA Large
1.8
Fail
—
1.2
Fail
2.1
Fail
4.3
AA Large
2.2
Fail
1.2
Fail
—
1.7
Fail
7.5
AAA
3.9
AA Large
2.1
Fail
1.7
Fail
—
White BG
12.1AAA
6.2AA
3.4AA Large
2.8Fail
1.6Fail
Black BG
1.7Fail
3.4AA Large
6.2AA
7.5AAA
13.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

333342
5B5B74
8383A6
A6A6A3
E2E2AC

Deuteranopia

323241
5B5A72
8281A4
A9ACA1
E6EBAE

Tritanopia

303F3E
576F6E
7E9F9D
B69E9D
FCB1B1

Achromatopsia

363636
616161
8B8B8B
9E9E9E
CECECE

Shades & Tints Shades & Tints

#303646

Dark
Light

#57617A

Dark
Light

#7D8BAE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #303646;
  --color-2: #57617a;
  --color-3: #7d8bae;
  --color-4: #b88fa9;
  --color-5: #ffbda7;
}

SCSS

$color-1: #303646;
$color-2: #57617a;
$color-3: #7d8bae;
$color-4: #b88fa9;
$color-5: #ffbda7;

TAILWIND

colors: {
  'brand-1': '#303646',
  'brand-2': '#57617a',
  'brand-3': '#7d8bae',
  'brand-4': '#b88fa9',
  'brand-5': '#ffbda7',
}

RGB Array

[48, 54, 70], [87, 97, 122], [125, 139, 174], [184, 143, 169], [255, 189, 167]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This muted-style palette of #303646, #57617A, #7D8BAE, #B88FA9, #FFBDA7 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #303646; --color-2: #57617a; --color-3: #7d8bae; --color-4: #b88fa9; --color-5: #ffbda7. 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. 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