← Back to Editor

#544958 · #916477 · #BD6C83 · #D6736A · #F0A979

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#544958

Dark Plum · DarkSlateGray · Charcoal

HEX
#544958
RGB
rgb(84, 73, 88)
HSL
hsl(284, 9%, 32%)
HSB
hsb(284, 17%, 35%)
CMYK
cmyk(5%, 17%, 0%, 65%)
Oklch
oklch(42.2% 0.028 317.0)

Traditional「Dark Plum」· Paint「Charcoal」· Creative Midnight Shadow

#916477

Dark Violet · Gray · Camellia

HEX
#916477
RGB
rgb(145, 100, 119)
HSL
hsl(335, 18%, 48%)
HSB
hsb(335, 31%, 57%)
CMYK
cmyk(0%, 31%, 18%, 43%)
Oklch
oklch(55.6% 0.064 352.4)

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

#BD6C83

Dark Violet · LightCoral · Rose Pink

HEX
#BD6C83
RGB
rgb(189, 108, 131)
HSL
hsl(343, 38%, 58%)
HSB
hsb(343, 43%, 74%)
CMYK
cmyk(0%, 43%, 31%, 26%)
Oklch
oklch(62.8% 0.106 2.4)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#D6736A

Peach Pink · LightCoral · Coral Red

HEX
#D6736A
RGB
rgb(214, 115, 106)
HSL
hsl(5, 57%, 63%)
HSB
hsb(5, 50%, 84%)
CMYK
cmyk(0%, 46%, 50%, 16%)
Oklch
oklch(66.5% 0.126 26.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#F0A979

Apricot · LightSalmon · Warm Sun

HEX
#F0A979
RGB
rgb(240, 169, 121)
HSL
hsl(24, 80%, 71%)
HSB
hsb(24, 50%, 94%)
CMYK
cmyk(0%, 30%, 50%, 6%)
Oklch
oklch(79.2% 0.105 54.7)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

544958
4E594A

Analogous

4E4A59
544958
594A56

Triadic

544958
59554A
4A5955

Split-Comp.

544958
56594A
4A594E

Tetradic

544958
594E4A
4E594A
4A5659

Contrast Matrix WCAG 2.1 Contrast

544958
916477
BD6C83
D6736A
F0A979
—
1.7
Fail
2.3
Fail
2.6
Fail
4.3
AA Large
1.7
Fail
—
1.3
Fail
1.5
Fail
2.5
Fail
2.3
Fail
1.3
Fail
—
1.2
Fail
1.9
Fail
2.6
Fail
1.5
Fail
1.2
Fail
—
1.6
Fail
4.3
AA Large
2.5
Fail
1.9
Fail
1.6
Fail
—
White BG
8.5AAA
4.9AA
3.7AA Large
3.2AA Large
2.0Fail
Black BG
2.5Fail
4.3AA Large
5.6AA
6.5AA
10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4F4F54
7E7D72
9A997D
ABAA6C
D1D185

Deuteranopia

505154
808471
9FA57C
B1B86D
D5DB87

Tritanopia

535251
8F6F6E
B97978
D16E6E
EC8E90

Achromatopsia

4E4E4E
747474
878787
909090
B9B9B9

Shades & Tints Shades & Tints

#544958

Dark
Light

#916477

Dark
Light

#BD6C83

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #544958;
  --color-2: #916477;
  --color-3: #bd6c83;
  --color-4: #d6736a;
  --color-5: #f0a979;
}

SCSS

$color-1: #544958;
$color-2: #916477;
$color-3: #bd6c83;
$color-4: #d6736a;
$color-5: #f0a979;

TAILWIND

colors: {
  'brand-1': '#544958',
  'brand-2': '#916477',
  'brand-3': '#bd6c83',
  'brand-4': '#d6736a',
  'brand-5': '#f0a979',
}

RGB Array

[84, 73, 88], [145, 100, 119], [189, 108, 131], [214, 115, 106], [240, 169, 121]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #544958, #916477, #BD6C83, #D6736A, #F0A979 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: #544958; --color-2: #916477; --color-3: #bd6c83; --color-4: #d6736a; --color-5: #f0a979. 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 general-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