#C7BECD + #C8AFCC + #CC9BC7 + #CC87B4 + #CC688E · muted - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C7BECD

Lilac · Silver · Lilac Purple

HEX

#C7BECD

RGB

rgb(199, 190, 205)

HSL

hsl(276, 13%, 77%)

HSB

hsb(276, 7%, 80%)

CMYK

cmyk(3%, 7%, 0%, 20%)

Oklch

oklch(81.3% 0.023 312.1)

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

#C8AFCC

Lilac · Silver · Lilac Purple

HEX

#C8AFCC

RGB

rgb(200, 175, 204)

HSL

hsl(292, 22%, 74%)

HSB

hsb(292, 14%, 80%)

CMYK

cmyk(2%, 14%, 0%, 20%)

Oklch

oklch(78.5% 0.049 321.6)

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

#CC9BC7

Mauve · Silver · Lilac Purple

HEX

#CC9BC7

RGB

rgb(204, 155, 199)

HSL

hsl(306, 32%, 70%)

HSB

hsb(306, 24%, 80%)

CMYK

cmyk(0%, 24%, 2%, 20%)

Oklch

oklch(74.9% 0.083 329.8)

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

#CC87B4

Mauve · Orchid · Rose Pink

HEX

#CC87B4

RGB

rgb(204, 135, 180)

HSL

hsl(321, 40%, 66%)

HSB

hsb(321, 34%, 80%)

CMYK

cmyk(0%, 34%, 12%, 20%)

Oklch

oklch(70.7% 0.102 340.7)

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

#CC688E

Dark Violet · LightCoral · Rose Pink

HEX

#CC688E

RGB

rgb(204, 104, 142)

HSL

hsl(337, 50%, 60%)

HSB

hsb(337, 49%, 80%)

CMYK

cmyk(0%, 49%, 30%, 20%)

Oklch

oklch(64.5% 0.133 357.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C7BECD

C3CCBD

Analogous

BEBDCC

C7BECD

CCBDCA

Triadic

C7BECD

CCC6BD

BDCCC6

Split-Comp.

C7BECD

CACCBD

BDCCBE

Tetradic

C7BECD

CCBEBD

C3CCBD

BDCACC

Contrast Matrix WCAG 2.1 Contrast

C7BECD	C8AFCC	CC9BC7	CC87B4	CC688E
—	1.1 Fail	1.3 Fail	1.5 Fail	2.0 Fail
1.1 Fail	—	1.2 Fail	1.4 Fail	1.8 Fail
1.3 Fail	1.2 Fail	—	1.2 Fail	1.5 Fail
1.5 Fail	1.4 Fail	1.2 Fail	—	1.3 Fail
2.0 Fail	1.8 Fail	1.5 Fail	1.3 Fail	—

White BG

1.8Fail

2.0Fail

2.3Fail

2.7Fail

3.5AA Large

Black BG

11.7AAA

10.5AAA

9.1AAA

7.7AAA

5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C3C3C9

BDBDC5

B7B6BC

AEAEA9

A1A085

Deuteranopia

C4C4C9

BFC1C3

BABDBA

B2B7A7

A7AE83

Tritanopia

C7C7C6

C7BFBE

CAB4B2

C9A19F

C77E7C

Achromatopsia

C2C2C2

BABABA

AFAFAF

A1A1A1

8A8A8A

Shades & Tints Shades & Tints

#C7BECD

Dark

Light

#C8AFCC

Dark

Light

#CC9BC7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c7becd;
  --color-2: #c8afcc;
  --color-3: #cc9bc7;
  --color-4: #cc87b4;
  --color-5: #cc688e;
}

SCSS

$color-1: #c7becd;
$color-2: #c8afcc;
$color-3: #cc9bc7;
$color-4: #cc87b4;
$color-5: #cc688e;

TAILWIND

colors: {
  'brand-1': '#c7becd',
  'brand-2': '#c8afcc',
  'brand-3': '#cc9bc7',
  'brand-4': '#cc87b4',
  'brand-5': '#cc688e',
}

RGB Array

[199, 190, 205], [200, 175, 204], [204, 155, 199], [204, 135, 180], [204, 104, 142]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This muted-style palette of #C7BECD, #C8AFCC, #CC9BC7, #CC87B4, #CC688E 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: #c7becd; --color-2: #c8afcc; --color-3: #cc9bc7; --color-4: #cc87b4; --color-5: #cc688e. 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 muted-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