#BD3ABD + #E7AEE7 + #E4CFE4 + #BDB5BD + #63DCE7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BD3ABD

Rose Purple · MediumOrchid · Violet

HEX

#BD3ABD

RGB

rgb(189, 58, 189)

HSL

hsl(300, 53%, 48%)

HSB

hsb(300, 69%, 74%)

CMYK

cmyk(0%, 69%, 0%, 26%)

Oklch

oklch(58.8% 0.220 327.9)

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

#E7AEE7

Mauve · Pink · Lilac Purple

HEX

#E7AEE7

RGB

rgb(231, 174, 231)

HSL

hsl(300, 54%, 79%)

HSB

hsb(300, 25%, 91%)

CMYK

cmyk(0%, 25%, 0%, 9%)

Oklch

oklch(82.1% 0.100 326.4)

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

#E4CFE4

Mauve · LightGray · Lavender

HEX

#E4CFE4

RGB

rgb(228, 207, 228)

HSL

hsl(300, 28%, 85%)

HSB

hsb(300, 9%, 89%)

CMYK

cmyk(0%, 9%, 0%, 11%)

Oklch

oklch(87.8% 0.036 325.9)

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

#BDB5BD

Silver Gray · Silver · Pearl Gray

HEX

#BDB5BD

RGB

rgb(189, 181, 189)

HSL

hsl(300, 6%, 73%)

HSB

hsb(300, 4%, 74%)

CMYK

cmyk(0%, 4%, 0%, 26%)

Oklch

oklch(78.2% 0.014 325.7)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#63DCE7

Sky Blue · SkyBlue · Lake Green

HEX

#63DCE7

RGB

rgb(99, 220, 231)

HSL

hsl(185, 73%, 65%)

HSB

hsb(185, 57%, 91%)

CMYK

cmyk(57%, 5%, 0%, 9%)

Oklch

oklch(83.0% 0.109 203.4)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BD3ABD

3ABB3A

Analogous

7A3ABB

BD3ABD

BB3A7A

Triadic

BD3ABD

BBBB3A

3ABBBB

Split-Comp.

BD3ABD

7ABB3A

3ABB7A

Tetradic

BD3ABD

BB7A3A

3ABB3A

3A7ABB

Contrast Matrix WCAG 2.1 Contrast

BD3ABD	E7AEE7	E4CFE4	BDB5BD	63DCE7
—	2.6 Fail	3.2 AA Large	2.3 Fail	2.9 Fail
2.6 Fail	—	1.2 Fail	1.1 Fail	1.1 Fail
3.2 AA Large	1.2 Fail	—	1.4 Fail	1.1 Fail
2.3 Fail	1.1 Fail	1.4 Fail	—	1.2 Fail
2.9 Fail	1.1 Fail	1.1 Fail	1.2 Fail	—

White BG

4.7AA

1.8Fail

1.5Fail

2.0Fail

1.6Fail

Black BG

4.5AA

11.6AAA

14.3AAA

10.5AAA

12.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

84839D

CECED9

DBDBDF

BAB9BB

9798E4

Deuteranopia

8C9696

D2D6D6

DCDEDE

BABBBB

9087E4

Tritanopia

B6847F

E4CECC

E3DBDA

BDBAB9

69E2E2

Achromatopsia

707070

C6C6C6

D8D8D8

B8B8B8

B9B9B9

Shades & Tints Shades & Tints

#BD3ABD

Dark

Light

#E7AEE7

Dark

Light

#E4CFE4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bd3abd;
  --color-2: #e7aee7;
  --color-3: #e4cfe4;
  --color-4: #bdb5bd;
  --color-5: #63dce7;
}

SCSS

$color-1: #bd3abd;
$color-2: #e7aee7;
$color-3: #e4cfe4;
$color-4: #bdb5bd;
$color-5: #63dce7;

TAILWIND

colors: {
  'brand-1': '#bd3abd',
  'brand-2': '#e7aee7',
  'brand-3': '#e4cfe4',
  'brand-4': '#bdb5bd',
  'brand-5': '#63dce7',
}

RGB Array

[189, 58, 189], [231, 174, 231], [228, 207, 228], [189, 181, 189], [99, 220, 231]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BD3ABD, #E7AEE7, #E4CFE4, #BDB5BD, #63DCE7 is ideal for: health products, baby brands, fresh-style blogs. 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: #bd3abd; --color-2: #e7aee7; --color-3: #e4cfe4; --color-4: #bdb5bd; --color-5: #63dce7. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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