← Back to Editor

#4E4557 · #904C84 · #DD3D84 · #FE6063 · #D69E50

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

#4E4557

Dark Plum · DarkSlateGray · Eggplant

HEX
#4E4557
RGB
rgb(78, 69, 87)
HSL
hsl(270, 12%, 31%)
HSB
hsb(270, 21%, 34%)
CMYK
cmyk(10%, 21%, 0%, 66%)
Oklch
oklch(40.6% 0.032 307.6)

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

#904C84

Rose Purple · Gray · Violet

HEX
#904C84
RGB
rgb(144, 76, 132)
HSL
hsl(311, 31%, 43%)
HSB
hsb(311, 47%, 56%)
CMYK
cmyk(0%, 47%, 8%, 44%)
Oklch
oklch(51.8% 0.117 334.1)

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

#DD3D84

Dark Violet · MediumVioletRed · Rose Pink

HEX
#DD3D84
RGB
rgb(221, 61, 132)
HSL
hsl(333, 70%, 55%)
HSB
hsb(333, 72%, 87%)
CMYK
cmyk(0%, 72%, 40%, 13%)
Oklch
oklch(61.5% 0.204 358.1)

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

#FE6063

Peach Pink · Tomato · Coral Red

HEX
#FE6063
RGB
rgb(254, 96, 99)
HSL
hsl(359, 99%, 69%)
HSB
hsb(359, 62%, 100%)
CMYK
cmyk(0%, 62%, 61%, 0%)
Oklch
oklch(69.5% 0.193 22.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#D69E50

Ginger · SandyBrown · Warm Sun

HEX
#D69E50
RGB
rgb(214, 158, 80)
HSL
hsl(35, 62%, 58%)
HSB
hsb(35, 63%, 84%)
CMYK
cmyk(0%, 26%, 63%, 16%)
Oklch
oklch(73.7% 0.116 73.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4E4557
4F5946

Analogous

464659
4E4557
594659

Triadic

4E4557
594F46
46594F

Split-Comp.

4E4557
595946
465946

Tetradic

4E4557
594646
4F5946
465959

Contrast Matrix WCAG 2.1 Contrast

4E4557
904C84
DD3D84
FE6063
D69E50
—
1.5
Fail
2.2
Fail
3.1
AA Large
3.8
AA Large
1.5
Fail
—
1.4
Fail
2.0
Fail
2.5
Fail
2.2
Fail
1.4
Fail
—
1.4
Fail
1.7
Fail
3.1
AA Large
2.0
Fail
1.4
Fail
—
1.3
Fail
3.8
AA Large
2.5
Fail
1.7
Fail
1.3
Fail
—
White BG
9.1AAA
5.9AA
4.1AA Large
3.0Fail
2.4Fail
Black BG
2.3Fail
3.6AA Large
5.1AA
7.1AAA
8.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4A4A53
737276
989673
BAB862
BEBD63

Deuteranopia

4B4B52
777C73
A1AD6F
C3CF62
C1C567

Tritanopia

4E4F4E
8D6C69
D56562
F66262
D37275

Achromatopsia

4A4A4A
676767
757575
909090
A6A6A6

Shades & Tints Shades & Tints

#4E4557

Dark
Light

#904C84

Dark
Light

#DD3D84

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4e4557;
  --color-2: #904c84;
  --color-3: #dd3d84;
  --color-4: #fe6063;
  --color-5: #d69e50;
}

SCSS

$color-1: #4e4557;
$color-2: #904c84;
$color-3: #dd3d84;
$color-4: #fe6063;
$color-5: #d69e50;

TAILWIND

colors: {
  'brand-1': '#4e4557',
  'brand-2': '#904c84',
  'brand-3': '#dd3d84',
  'brand-4': '#fe6063',
  'brand-5': '#d69e50',
}

RGB Array

[78, 69, 87], [144, 76, 132], [221, 61, 132], [254, 96, 99], [214, 158, 80]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4E4557, #904C84, #DD3D84, #FE6063, #D69E50 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: #4e4557; --color-2: #904c84; --color-3: #dd3d84; --color-4: #fe6063; --color-5: #d69e50. 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