← Back to Editor

#446E97 · #7882A7 · #9D9BA8 · #C5B7A8 · #EFD7A5

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 Library

Color Details Color Details

#446E97

Indigo · SteelBlue · Navy Blue

HEX
#446E97
RGB
rgb(68, 110, 151)
HSL
hsl(210, 38%, 43%)
HSB
hsb(210, 55%, 59%)
CMYK
cmyk(55%, 27%, 0%, 41%)
Oklch
oklch(52.5% 0.080 249.0)

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

#7882A7

Azure · LightSlateGray · Navy Blue

HEX
#7882A7
RGB
rgb(120, 130, 167)
HSL
hsl(227, 21%, 56%)
HSB
hsb(227, 28%, 65%)
CMYK
cmyk(28%, 22%, 0%, 35%)
Oklch
oklch(61.2% 0.057 272.8)

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

#9D9BA8

Ash · DarkGray · Silver Sand

HEX
#9D9BA8
RGB
rgb(157, 155, 168)
HSL
hsl(249, 7%, 63%)
HSB
hsb(249, 8%, 66%)
CMYK
cmyk(7%, 8%, 0%, 34%)
Oklch
oklch(69.5% 0.019 293.0)

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

#C5B7A8

Goose Yellow · Silver · Warm Sun

HEX
#C5B7A8
RGB
rgb(197, 183, 168)
HSL
hsl(31, 20%, 72%)
HSB
hsb(31, 15%, 77%)
CMYK
cmyk(0%, 7%, 15%, 23%)
Oklch
oklch(78.7% 0.026 69.4)

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

#EFD7A5

Goose Yellow · Wheat · Lemon Cream

HEX
#EFD7A5
RGB
rgb(239, 215, 165)
HSL
hsl(41, 70%, 79%)
HSB
hsb(41, 31%, 94%)
CMYK
cmyk(0%, 10%, 31%, 6%)
Oklch
oklch(88.7% 0.070 85.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

446E97
976E44

Analogous

449797
446E97
444497

Triadic

446E97
97446E
6E9744

Split-Comp.

446E97
974444
979744

Tetradic

446E97
974497
976E44
449744

Contrast Matrix WCAG 2.1 Contrast

446E97
7882A7
9D9BA8
C5B7A8
EFD7A5
—
1.4
Fail
2.0
Fail
2.7
Fail
3.8
AA Large
1.4
Fail
—
1.4
Fail
1.9
Fail
2.7
Fail
2.0
Fail
1.4
Fail
—
1.4
Fail
1.9
Fail
2.7
Fail
1.9
Fail
1.4
Fail
—
1.4
Fail
3.8
AA Large
2.7
Fail
1.9
Fail
1.4
Fail
—
White BG
5.4AA
3.8AA Large
2.7Fail
2.0Fail
1.4Fail
Black BG
3.9AA Large
5.5AA
7.7AAA
10.7AAA
14.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

56578D
7C7C9E
9C9CA5
BFBFAC
E5E4B1

Deuteranopia

54518B
7C7B9C
9C9CA4
C0C1AD
E6E8B4

Tritanopia

468584
799795
9DA2A2
C4AEAF
EEBBBD

Achromatopsia

666666
838383
9D9D9D
B9B9B9
D8D8D8

Shades & Tints Shades & Tints

#446E97

Dark
Light

#7882A7

Dark
Light

#9D9BA8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #446e97;
  --color-2: #7882a7;
  --color-3: #9d9ba8;
  --color-4: #c5b7a8;
  --color-5: #efd7a5;
}

SCSS

$color-1: #446e97;
$color-2: #7882a7;
$color-3: #9d9ba8;
$color-4: #c5b7a8;
$color-5: #efd7a5;

TAILWIND

colors: {
  'brand-1': '#446e97',
  'brand-2': '#7882a7',
  'brand-3': '#9d9ba8',
  'brand-4': '#c5b7a8',
  'brand-5': '#efd7a5',
}

RGB Array

[68, 110, 151], [120, 130, 167], [157, 155, 168], [197, 183, 168], [239, 215, 165]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This muted-style palette of #446E97, #7882A7, #9D9BA8, #C5B7A8, #EFD7A5 is ideal for: corporate websites, product showcases, portfolios. 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: #446e97; --color-2: #7882a7; --color-3: #9d9ba8; --color-4: #c5b7a8; --color-5: #efd7a5. 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. 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