#B55B7A + #B28DB1 + #9DBED7 + #C1CCDC + #E4D6E7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B55B7A

Dark Violet · Gray · Rose Pink

HEX

#B55B7A

RGB

rgb(181, 91, 122)

HSL

hsl(339, 38%, 53%)

HSB

hsb(339, 50%, 71%)

CMYK

cmyk(0%, 50%, 33%, 29%)

Oklch

oklch(58.8% 0.121 359.6)

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

#B28DB1

Mauve · DarkGray · Lilac Purple

HEX

#B28DB1

RGB

rgb(178, 141, 177)

HSL

hsl(302, 19%, 63%)

HSB

hsb(302, 21%, 70%)

CMYK

cmyk(0%, 21%, 1%, 30%)

Oklch

oklch(69.0% 0.067 327.1)

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

#9DBED7

Sky Blue · LightSteelBlue · Cobalt Blue

HEX

#9DBED7

RGB

rgb(157, 190, 215)

HSL

hsl(206, 42%, 73%)

HSB

hsb(206, 27%, 84%)

CMYK

cmyk(27%, 12%, 0%, 16%)

Oklch

oklch(78.6% 0.050 241.0)

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

#C1CCDC

Azure · LightSteelBlue · Sky Blue

HEX

#C1CCDC

RGB

rgb(193, 204, 220)

HSL

hsl(216, 28%, 81%)

HSB

hsb(216, 12%, 86%)

CMYK

cmyk(12%, 7%, 0%, 14%)

Oklch

oklch(84.2% 0.025 257.7)

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

#E4D6E7

Lilac · Lavender · Lavender

HEX

#E4D6E7

RGB

rgb(228, 214, 231)

HSL

hsl(289, 26%, 87%)

HSB

hsb(289, 7%, 91%)

CMYK

cmyk(1%, 7%, 0%, 9%)

Oklch

oklch(89.2% 0.027 320.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B55B7A

5AB595

Analogous

B55AA7

B55B7A

B5675A

Triadic

B55B7A

79B55A

5A79B5

Split-Comp.

B55B7A

5AB567

5AA7B5

Tetradic

B55B7A

A7B55A

5AB595

675AB5

Contrast Matrix WCAG 2.1 Contrast

B55B7A	B28DB1	9DBED7	C1CCDC	E4D6E7
—	1.5 Fail	2.3 Fail	2.7 Fail	3.2 AA Large
1.5 Fail	—	1.5 Fail	1.8 Fail	2.1 Fail
2.3 Fail	1.5 Fail	—	1.2 Fail	1.4 Fail
2.7 Fail	1.8 Fail	1.2 Fail	—	1.2 Fail
3.2 AA Large	2.1 Fail	1.4 Fail	1.2 Fail	—

White BG

4.4AA Large

2.9Fail

1.9Fail

1.6Fail

1.4Fail

Black BG

4.7AA

7.3AAA

10.8AAA

12.9AAA

15.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8D72

A2A2A8

ABACD1

C6C6D8

DEDEE3

Deuteranopia

939A71

A4A7A6

A9A7D0

C5C4D7

DFE0E2

Tritanopia

B16D6B

B0A1A0

9FCCCB

C2D5D4

E3E0DF

Achromatopsia

797979

9C9C9C

B7B7B7

CBCBCB

DCDCDC

Shades & Tints Shades & Tints

#B55B7A

Dark

Light

#B28DB1

Dark

Light

#9DBED7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b55b7a;
  --color-2: #b28db1;
  --color-3: #9dbed7;
  --color-4: #c1ccdc;
  --color-5: #e4d6e7;
}

SCSS

$color-1: #b55b7a;
$color-2: #b28db1;
$color-3: #9dbed7;
$color-4: #c1ccdc;
$color-5: #e4d6e7;

TAILWIND

colors: {
  'brand-1': '#b55b7a',
  'brand-2': '#b28db1',
  'brand-3': '#9dbed7',
  'brand-4': '#c1ccdc',
  'brand-5': '#e4d6e7',
}

RGB Array

[181, 91, 122], [178, 141, 177], [157, 190, 215], [193, 204, 220], [228, 214, 231]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B55B7A, #B28DB1, #9DBED7, #C1CCDC, #E4D6E7 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: #b55b7a; --color-2: #b28db1; --color-3: #9dbed7; --color-4: #c1ccdc; --color-5: #e4d6e7. 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