← Back to Editor

#E23A6C · #B5559D · #B286B1 · #BFB09B · #B7C8A7

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

#E23A6C

Dark Violet · MediumVioletRed · Rose Pink

HEX
#E23A6C
RGB
rgb(226, 58, 108)
HSL
hsl(342, 74%, 56%)
HSB
hsb(342, 74%, 89%)
CMYK
cmyk(0%, 74%, 52%, 11%)
Oklch
oklch(61.4% 0.205 8.3)

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

#B5559D

Rose Purple · MediumOrchid · Violet

HEX
#B5559D
RGB
rgb(181, 85, 157)
HSL
hsl(315, 39%, 52%)
HSB
hsb(315, 53%, 71%)
CMYK
cmyk(0%, 53%, 13%, 29%)
Oklch
oklch(59.2% 0.152 337.9)

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

#B286B1

Mauve · DarkGray · Lilac Purple

HEX
#B286B1
RGB
rgb(178, 134, 177)
HSL
hsl(301, 22%, 61%)
HSB
hsb(301, 25%, 70%)
CMYK
cmyk(0%, 25%, 1%, 30%)
Oklch
oklch(67.7% 0.080 327.2)

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

#BFB09B

Ginger · Tan · Warm Sun

HEX
#BFB09B
RGB
rgb(191, 176, 155)
HSL
hsl(35, 22%, 68%)
HSB
hsb(35, 19%, 75%)
CMYK
cmyk(0%, 8%, 19%, 25%)
Oklch
oklch(76.4% 0.034 76.4)

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

#B7C8A7

Celadon · Silver · Apple Green

HEX
#B7C8A7
RGB
rgb(183, 200, 167)
HSL
hsl(91, 23%, 72%)
HSB
hsb(91, 16%, 78%)
CMYK
cmyk(8%, 0%, 16%, 22%)
Oklch
oklch(81.1% 0.049 129.7)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E23A6C
3CE2B0

Analogous

E23CC1
E23A6C
E25D3C

Triadic

E23A6C
6EE23C
3C6EE2

Split-Comp.

E23A6C
3CE25D
3CC1E2

Tetradic

E23A6C
C1E23C
3CE2B0
5D3CE2

Contrast Matrix WCAG 2.1 Contrast

E23A6C
B5559D
B286B1
BFB09B
B7C8A7
—
1.1
Fail
1.4
Fail
2.0
Fail
2.3
Fail
1.1
Fail
—
1.5
Fail
2.1
Fail
2.5
Fail
1.4
Fail
1.5
Fail
—
1.4
Fail
1.7
Fail
2.0
Fail
2.1
Fail
1.4
Fail
—
1.2
Fail
2.3
Fail
2.5
Fail
1.7
Fail
1.2
Fail
—
White BG
4.2AA Large
4.4AA Large
3.0AA Large
2.1Fail
1.8Fail
Black BG
5.1AA
4.8AA
6.9AA
9.9AAA
11.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

999860
8B8B8C
9F9FA7
B9B8A0
BEBFAF

Deuteranopia

A3B05D
919887
A2A5A4
B9BBA1
BDBCB1

Tritanopia

DA5654
B07E7B
B09E9D
BEA4A5
B8B5B7

Achromatopsia

727272
7A7A7A
989898
B2B2B2
BFBFBF

Shades & Tints Shades & Tints

#E23A6C

Dark
Light

#B5559D

Dark
Light

#B286B1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e23a6c;
  --color-2: #b5559d;
  --color-3: #b286b1;
  --color-4: #bfb09b;
  --color-5: #b7c8a7;
}

SCSS

$color-1: #e23a6c;
$color-2: #b5559d;
$color-3: #b286b1;
$color-4: #bfb09b;
$color-5: #b7c8a7;

TAILWIND

colors: {
  'brand-1': '#e23a6c',
  'brand-2': '#b5559d',
  'brand-3': '#b286b1',
  'brand-4': '#bfb09b',
  'brand-5': '#b7c8a7',
}

RGB Array

[226, 58, 108], [181, 85, 157], [178, 134, 177], [191, 176, 155], [183, 200, 167]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E23A6C, #B5559D, #B286B1, #BFB09B, #B7C8A7 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: #e23a6c; --color-2: #b5559d; --color-3: #b286b1; --color-4: #bfb09b; --color-5: #b7c8a7. 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