#4A4456 + #D986C3 + #B58DAC + #898FAD + #3B9FB6 · dark - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#4A4456

Deep Indigo · DarkSlateGray · Eggplant

HEX

#4A4456

RGB

rgb(74, 68, 86)

HSL

hsl(260, 12%, 30%)

HSB

hsb(260, 21%, 34%)

CMYK

cmyk(14%, 21%, 0%, 66%)

Oklch

oklch(40.0% 0.031 300.2)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#D986C3

Mauve · Orchid · Lilac Purple

HEX

#D986C3

RGB

rgb(217, 134, 195)

HSL

hsl(316, 52%, 69%)

HSB

hsb(316, 38%, 85%)

CMYK

cmyk(0%, 38%, 10%, 15%)

Oklch

oklch(72.6% 0.127 337.3)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#B58DAC

Mauve · DarkGray · Lilac Purple

HEX

#B58DAC

RGB

rgb(181, 141, 172)

HSL

hsl(313, 21%, 63%)

HSB

hsb(313, 22%, 71%)

CMYK

cmyk(0%, 22%, 5%, 29%)

Oklch

oklch(69.1% 0.064 334.3)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#898FAD

Azure · LightSlateGray · Cobalt Blue

HEX

#898FAD

RGB

rgb(137, 143, 173)

HSL

hsl(230, 18%, 61%)

HSB

hsb(230, 21%, 68%)

CMYK

cmyk(21%, 17%, 0%, 32%)

Oklch

oklch(65.6% 0.045 276.2)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#3B9FB6

Lake Blue · SteelBlue · Mint Ice

HEX

#3B9FB6

RGB

rgb(59, 159, 182)

HSL

hsl(191, 51%, 47%)

HSB

hsb(191, 68%, 71%)

CMYK

cmyk(68%, 13%, 0%, 29%)

Oklch

oklch(65.4% 0.097 216.0)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4A4456

505643

Analogous

434656

4A4456

534356

Triadic

4A4456

564943

435649

Split-Comp.

4A4456

565343

465643

Tetradic

4A4456

564346

505643

435653

Contrast Matrix WCAG 2.1 Contrast

4A4456	D986C3	B58DAC	898FAD	3B9FB6
—	3.6 AA Large	3.3 AA Large	2.9 Fail	3.0 AA Large
3.6 AA Large	—	1.1 Fail	1.2 Fail	1.2 Fail
3.3 AA Large	1.1 Fail	—	1.1 Fail	1.1 Fail
2.9 Fail	1.2 Fail	1.1 Fail	—	1.0 Fail
3.0 AA Large	1.2 Fail	1.1 Fail	1.0 Fail	—

White BG

9.3AAA

2.6Fail

2.8Fail

3.2AA Large

3.1AA Large

Black BG

2.3Fail

8.1AAA

7.4AAA

6.6AA

6.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

474752

B5B4B4

A4A3A4

8C8CA6

6667B0

Deuteranopia

484851

BAC0B1

A6A9A3

8B8BA4

6159AF

Tritanopia

4A4E4D

D5A9A6

B39F9D

89A09F

40ACAB

Achromatopsia

484848

A6A6A6

9C9C9C

919191

848484

Shades & Tints Shades & Tints

#4A4456

Dark

Light

#D986C3

Dark

Light

#B58DAC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4a4456;
  --color-2: #d986c3;
  --color-3: #b58dac;
  --color-4: #898fad;
  --color-5: #3b9fb6;
}

SCSS

$color-1: #4a4456;
$color-2: #d986c3;
$color-3: #b58dac;
$color-4: #898fad;
$color-5: #3b9fb6;

TAILWIND

colors: {
  'brand-1': '#4a4456',
  'brand-2': '#d986c3',
  'brand-3': '#b58dac',
  'brand-4': '#898fad',
  'brand-5': '#3b9fb6',
}

RGB Array

[74, 68, 86], [217, 134, 195], [181, 141, 172], [137, 143, 173], [59, 159, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #4A4456, #D986C3, #B58DAC, #898FAD, #3B9FB6 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: #4a4456; --color-2: #d986c3; --color-3: #b58dac; --color-4: #898fad; --color-5: #3b9fb6. 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 dark-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