← Back to Editor

#4D4054 · #B50B8D · #D32794 · #FB5096 · #C69BB7

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

#4D4054

Dark Plum · DarkSlateGray · Eggplant

HEX
#4D4054
RGB
rgb(77, 64, 84)
HSL
hsl(279, 14%, 29%)
HSB
hsb(279, 24%, 33%)
CMYK
cmyk(8%, 24%, 0%, 67%)
Oklch
oklch(39.3% 0.037 313.7)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#B50B8D

Rose Purple · MediumVioletRed · Eggplant

HEX
#B50B8D
RGB
rgb(181, 11, 141)
HSL
hsl(314, 89%, 38%)
HSB
hsb(314, 94%, 71%)
CMYK
cmyk(0%, 94%, 22%, 29%)
Oklch
oklch(52.3% 0.221 341.6)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#D32794

Rose Purple · MediumVioletRed · Camellia

HEX
#D32794
RGB
rgb(211, 39, 148)
HSL
hsl(322, 69%, 49%)
HSB
hsb(322, 82%, 83%)
CMYK
cmyk(0%, 82%, 30%, 17%)
Oklch
oklch(58.9% 0.225 347.9)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

#FB5096

Rouge · LightCoral · Rose Pink

HEX
#FB5096
RGB
rgb(251, 80, 150)
HSL
hsl(335, 96%, 65%)
HSB
hsb(335, 68%, 98%)
CMYK
cmyk(0%, 68%, 40%, 2%)
Oklch
oklch(68.6% 0.214 359.4)

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

#C69BB7

Mauve · DarkGray · Rose Pink

HEX
#C69BB7
RGB
rgb(198, 155, 183)
HSL
hsl(321, 27%, 69%)
HSB
hsb(321, 22%, 78%)
CMYK
cmyk(0%, 22%, 8%, 22%)
Oklch
oklch(73.8% 0.063 339.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4D4054
475440

Analogous

434054
4D4054
544051

Triadic

4D4054
544D40
40544D

Split-Comp.

4D4054
515440
405443

Tetradic

4D4054
544340
475440
405154

Contrast Matrix WCAG 2.1 Contrast

4D4054
B50B8D
D32794
FB5096
C69BB7
—
1.6
Fail
2.1
Fail
3.1
AA Large
4.0
AA Large
1.6
Fail
—
1.3
Fail
2.0
Fail
2.6
Fail
2.1
Fail
1.3
Fail
—
1.5
Fail
2.0
Fail
3.1
AA Large
2.0
Fail
1.5
Fail
—
1.3
Fail
4.0
AA Large
2.6
Fail
2.0
Fail
1.3
Fail
—
White BG
9.6AAA
6.2AA
4.7AA
3.1AA Large
2.4Fail
Black BG
2.2Fail
3.4AA Large
4.5AA Large
6.7AA
8.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

47474F
6B6A6E
89877A
B1AF85
B3B3B0

Deuteranopia

48494E
758266
939F73
BBC881
B6B9AF

Tritanopia

4C4B4B
AD554F
CA6560
F27875
C4ABAA

Achromatopsia

464646
4D4D4D
676767
8B8B8B
ABABAB

Shades & Tints Shades & Tints

#4D4054

Dark
Light

#B50B8D

Dark
Light

#D32794

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4d4054;
  --color-2: #b50b8d;
  --color-3: #d32794;
  --color-4: #fb5096;
  --color-5: #c69bb7;
}

SCSS

$color-1: #4d4054;
$color-2: #b50b8d;
$color-3: #d32794;
$color-4: #fb5096;
$color-5: #c69bb7;

TAILWIND

colors: {
  'brand-1': '#4d4054',
  'brand-2': '#b50b8d',
  'brand-3': '#d32794',
  'brand-4': '#fb5096',
  'brand-5': '#c69bb7',
}

RGB Array

[77, 64, 84], [181, 11, 141], [211, 39, 148], [251, 80, 150], [198, 155, 183]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4D4054, #B50B8D, #D32794, #FB5096, #C69BB7 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: #4d4054; --color-2: #b50b8d; --color-3: #d32794; --color-4: #fb5096; --color-5: #c69bb7. 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