← Back to Editor

#FF4C93 · #5F3E6A · #9A87AE · #B09FBD · #88838B

A 5-color palette 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

#FF4C93

Rouge · DeepPink · Rose Pink

HEX
#FF4C93
RGB
rgb(255, 76, 147)
HSL
hsl(336, 100%, 65%)
HSB
hsb(336, 70%, 100%)
CMYK
cmyk(0%, 70%, 42%, 0%)
Oklch
oklch(68.7% 0.221 0.7)

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

#5F3E6A

Dark Plum · DarkSlateBlue · Eggplant

HEX
#5F3E6A
RGB
rgb(95, 62, 106)
HSL
hsl(285, 26%, 33%)
HSB
hsb(285, 42%, 42%)
CMYK
cmyk(10%, 42%, 0%, 58%)
Oklch
oklch(42.0% 0.081 317.4)

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

#9A87AE

Wisteria · DarkGray · Lilac Purple

HEX
#9A87AE
RGB
rgb(154, 135, 174)
HSL
hsl(269, 19%, 61%)
HSB
hsb(269, 22%, 68%)
CMYK
cmyk(11%, 22%, 0%, 32%)
Oklch
oklch(65.4% 0.061 306.9)

Traditional「Wisteria」· Paint「Lilac Purple」· Creative Lavender Dream

#B09FBD

Lilac · DarkGray · Lilac Purple

HEX
#B09FBD
RGB
rgb(176, 159, 189)
HSL
hsl(274, 19%, 68%)
HSB
hsb(274, 16%, 74%)
CMYK
cmyk(7%, 16%, 0%, 26%)
Oklch
oklch(72.7% 0.047 310.5)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#88838B

Ash · Gray · Warm Gray

HEX
#88838B
RGB
rgb(136, 131, 139)
HSL
hsl(278, 3%, 53%)
HSB
hsb(278, 6%, 55%)
CMYK
cmyk(2%, 6%, 0%, 45%)
Oklch
oklch(61.7% 0.013 313.2)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF4C93
4DFFB8

Analogous

FF4DED
FF4C93
FF5E4D

Triadic

FF4C93
94FF4D
4D94FF

Split-Comp.

FF4C93
4DFF5E
4DEDFF

Tetradic

FF4C93
EDFF4D
4DFFB8
5E4DFF

Contrast Matrix WCAG 2.1 Contrast

FF4C93
5F3E6A
9A87AE
B09FBD
88838B
—
2.8
Fail
1.0
Fail
1.3
Fail
1.2
Fail
2.8
Fail
—
2.7
Fail
3.6
AA Large
2.4
Fail
1.0
Fail
2.7
Fail
—
1.3
Fail
1.1
Fail
1.3
Fail
3.6
AA Large
1.3
Fail
—
1.5
Fail
1.2
Fail
2.4
Fail
1.1
Fail
1.5
Fail
—
White BG
3.1AA Large
8.8AAA
3.3AA Large
2.5Fail
3.7AA Large
Black BG
6.7AA
2.4Fail
6.5AA
8.5AAA
5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1B082
51505F
9292A5
A9A8B6
868689

Deuteranopia

BCC97E
53555D
9394A2
AAABB4
868789

Tritanopia

F67471
5D5755
999D9B
AFB0AF
888887

Achromatopsia

8A8A8A
4D4D4D
919191
A8A8A8
858585

Shades & Tints Shades & Tints

#FF4C93

Dark
Light

#5F3E6A

Dark
Light

#9A87AE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff4c93;
  --color-2: #5f3e6a;
  --color-3: #9a87ae;
  --color-4: #b09fbd;
  --color-5: #88838b;
}

SCSS

$color-1: #ff4c93;
$color-2: #5f3e6a;
$color-3: #9a87ae;
$color-4: #b09fbd;
$color-5: #88838b;

TAILWIND

colors: {
  'brand-1': '#ff4c93',
  'brand-2': '#5f3e6a',
  'brand-3': '#9a87ae',
  'brand-4': '#b09fbd',
  'brand-5': '#88838b',
}

RGB Array

[255, 76, 147], [95, 62, 106], [154, 135, 174], [176, 159, 189], [136, 131, 139]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF4C93, #5F3E6A, #9A87AE, #B09FBD, #88838B 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: #ff4c93; --color-2: #5f3e6a; --color-3: #9a87ae; --color-4: #b09fbd; --color-5: #88838b. 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