#B54FC7 + #9693C2 + #9ECDD9 + #B5EBD6 + #D6FFDC - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B54FC7

Royal Purple · MediumOrchid · Violet

HEX

#B54FC7

RGB

rgb(181, 79, 199)

HSL

hsl(291, 52%, 55%)

HSB

hsb(291, 60%, 78%)

CMYK

cmyk(9%, 60%, 0%, 22%)

Oklch

oklch(60.5% 0.197 321.4)

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

#9693C2

Wisteria · DarkGray · Cobalt Blue

HEX

#9693C2

RGB

rgb(150, 147, 194)

HSL

hsl(244, 28%, 67%)

HSB

hsb(244, 24%, 76%)

CMYK

cmyk(23%, 24%, 0%, 24%)

Oklch

oklch(68.3% 0.069 287.4)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#9ECDD9

Sky Blue · LightSteelBlue · Lake Green

HEX

#9ECDD9

RGB

rgb(158, 205, 217)

HSL

hsl(192, 44%, 74%)

HSB

hsb(192, 27%, 85%)

CMYK

cmyk(27%, 6%, 0%, 15%)

Oklch

oklch(81.9% 0.052 215.1)

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

#B5EBD6

Jade · LightBlue · Mint Green

HEX

#B5EBD6

RGB

rgb(181, 235, 214)

HSL

hsl(157, 57%, 82%)

HSB

hsb(157, 23%, 92%)

CMYK

cmyk(23%, 0%, 9%, 8%)

Oklch

oklch(89.7% 0.062 169.1)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

#D6FFDC

Emerald · Beige · Mint Green

HEX

#D6FFDC

RGB

rgb(214, 255, 220)

HSL

hsl(129, 100%, 92%)

HSB

hsb(129, 16%, 100%)

CMYK

cmyk(16%, 0%, 14%, 0%)

Oklch

oklch(96.2% 0.063 149.2)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B54FC7

62C851

Analogous

7A51C8

B54FC7

C8519E

Triadic

B54FC7

C8B651

51C8B6

Split-Comp.

B54FC7

9EC851

51C87A

Tetradic

B54FC7

C87A51

62C851

519EC8

Contrast Matrix WCAG 2.1 Contrast

B54FC7	9693C2	9ECDD9	B5EBD6	D6FFDC
—	1.5 Fail	2.5 Fail	3.2 AA Large	3.9 AA Large
1.5 Fail	—	1.7 Fail	2.2 Fail	2.6 Fail
2.5 Fail	1.7 Fail	—	1.3 Fail	1.6 Fail
3.2 AA Large	2.2 Fail	1.3 Fail	—	1.2 Fail
3.9 AA Large	2.6 Fail	1.6 Fail	1.2 Fail	—

White BG

4.3AA Large

2.9Fail

1.7Fail

1.3Fail

1.1Fail

Black BG

4.9AA

7.2AAA

12.2AAA

15.8AAA

19.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8988AA

9595B7

B2B3D6

CCCDDB

E8E8E4

Deuteranopia

8F96A3

9595B4

B0ACD5

C9C5DC

E5E2E7

Tritanopia

B0938E

96AEAC

A0D4D3

B8DFE0

D8EBED

Achromatopsia

7B7B7B

999999

C0C0C0

D8D8D8

EFEFEF

Shades & Tints Shades & Tints

#B54FC7

Dark

Light

#9693C2

Dark

Light

#9ECDD9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b54fc7;
  --color-2: #9693c2;
  --color-3: #9ecdd9;
  --color-4: #b5ebd6;
  --color-5: #d6ffdc;
}

SCSS

$color-1: #b54fc7;
$color-2: #9693c2;
$color-3: #9ecdd9;
$color-4: #b5ebd6;
$color-5: #d6ffdc;

TAILWIND

colors: {
  'brand-1': '#b54fc7',
  'brand-2': '#9693c2',
  'brand-3': '#9ecdd9',
  'brand-4': '#b5ebd6',
  'brand-5': '#d6ffdc',
}

RGB Array

[181, 79, 199], [150, 147, 194], [158, 205, 217], [181, 235, 214], [214, 255, 220]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B54FC7, #9693C2, #9ECDD9, #B5EBD6, #D6FFDC 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: #b54fc7; --color-2: #9693c2; --color-3: #9ecdd9; --color-4: #b5ebd6; --color-5: #d6ffdc. 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