#9777CD + #C7B5E4 + #F2E0E9 + #D4B0C4 + #9A6A83 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9777CD

Wisteria · MediumSlateBlue · Lilac Purple

HEX

#9777CD

RGB

rgb(151, 119, 205)

HSL

hsl(262, 46%, 64%)

HSB

hsb(262, 42%, 80%)

CMYK

cmyk(26%, 42%, 0%, 20%)

Oklch

oklch(63.5% 0.129 299.9)

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

#C7B5E4

Wisteria · LightSteelBlue · Lilac Purple

HEX

#C7B5E4

RGB

rgb(199, 181, 228)

HSL

hsl(263, 47%, 80%)

HSB

hsb(263, 21%, 89%)

CMYK

cmyk(13%, 21%, 0%, 11%)

Oklch

oklch(80.4% 0.068 302.4)

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

#F2E0E9

Rouge · Linen · Cherry Blossom

HEX

#F2E0E9

RGB

rgb(242, 224, 233)

HSL

hsl(330, 41%, 91%)

HSB

hsb(330, 7%, 95%)

CMYK

cmyk(0%, 7%, 4%, 5%)

Oklch

oklch(92.4% 0.023 345.8)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#D4B0C4

Mauve · Silver · Cherry Blossom

HEX

#D4B0C4

RGB

rgb(212, 176, 196)

HSL

hsl(327, 30%, 76%)

HSB

hsb(327, 17%, 83%)

CMYK

cmyk(0%, 17%, 8%, 17%)

Oklch

oklch(79.5% 0.049 343.8)

Traditional「Mauve」· Paint「Cherry Blossom」· Creative Rose Petal

#9A6A83

Rose Purple · Gray · Rose Pink

HEX

#9A6A83

RGB

rgb(154, 106, 131)

HSL

hsl(329, 19%, 51%)

HSB

hsb(329, 31%, 60%)

CMYK

cmyk(0%, 31%, 15%, 40%)

Oklch

oklch(58.2% 0.070 346.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9777CD

AECD79

Analogous

7984CD

9777CD

C279CD

Triadic

9777CD

CD9879

79CD98

Split-Comp.

9777CD

CDC279

84CD79

Tetradic

9777CD

CD7984

AECD79

79CDC2

Contrast Matrix WCAG 2.1 Contrast

9777CD	C7B5E4	F2E0E9	D4B0C4	9A6A83
—	1.9 Fail	2.8 Fail	1.9 Fail	1.2 Fail
1.9 Fail	—	1.5 Fail	1.0 Fail	2.3 Fail
2.8 Fail	1.5 Fail	—	1.5 Fail	3.5 AA Large
1.9 Fail	1.0 Fail	1.5 Fail	—	2.3 Fail
1.2 Fail	2.3 Fail	3.5 AA Large	2.3 Fail	—

White BG

3.6AA Large

1.9Fail

1.3Fail

1.9Fail

4.4AA Large

Black BG

5.8AA

11.2AAA

16.6AAA

10.8AAA

4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8989B8

BFBFD9

EAEAE7

C4C4BF

85857D

Deuteranopia

8B8DB3

C0C2D6

EBEDE6

C7C9BE

888C7B

Tritanopia

95A8A4

C6D0CE

F1E5E5

D2BBBB

987877

Achromatopsia

8A8A8A

C0C0C0

E6E6E6

BDBDBD

7B7B7B

Shades & Tints Shades & Tints

#9777CD

Dark

Light

#C7B5E4

Dark

Light

#F2E0E9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9777cd;
  --color-2: #c7b5e4;
  --color-3: #f2e0e9;
  --color-4: #d4b0c4;
  --color-5: #9a6a83;
}

SCSS

$color-1: #9777cd;
$color-2: #c7b5e4;
$color-3: #f2e0e9;
$color-4: #d4b0c4;
$color-5: #9a6a83;

TAILWIND

colors: {
  'brand-1': '#9777cd',
  'brand-2': '#c7b5e4',
  'brand-3': '#f2e0e9',
  'brand-4': '#d4b0c4',
  'brand-5': '#9a6a83',
}

RGB Array

[151, 119, 205], [199, 181, 228], [242, 224, 233], [212, 176, 196], [154, 106, 131]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9777CD, #C7B5E4, #F2E0E9, #D4B0C4, #9A6A83 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: #9777cd; --color-2: #c7b5e4; --color-3: #f2e0e9; --color-4: #d4b0c4; --color-5: #9a6a83. 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