#8C8685 + #9878E9 + #AB99DD + #DCB3D4 + #FFB3D6 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8C8685

Ash · Gray · Warm Gray

HEX

#8C8685

RGB

rgb(140, 134, 133)

HSL

hsl(9, 3%, 54%)

HSB

hsb(9, 5%, 55%)

CMYK

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

Oklch

oklch(62.5% 0.007 28.9)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#9878E9

Wisteria · MediumSlateBlue · Cobalt Blue

HEX

#9878E9

RGB

rgb(152, 120, 233)

HSL

hsl(257, 72%, 69%)

HSB

hsb(257, 48%, 91%)

CMYK

cmyk(35%, 48%, 0%, 9%)

Oklch

oklch(65.3% 0.164 294.5)

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

#AB99DD

Wisteria · LightSteelBlue · Cobalt Blue

HEX

#AB99DD

RGB

rgb(171, 153, 221)

HSL

hsl(256, 50%, 73%)

HSB

hsb(256, 31%, 87%)

CMYK

cmyk(23%, 31%, 0%, 13%)

Oklch

oklch(72.4% 0.099 296.0)

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

#DCB3D4

Mauve · LightGray · Lilac Purple

HEX

#DCB3D4

RGB

rgb(220, 179, 212)

HSL

hsl(312, 37%, 78%)

HSB

hsb(312, 19%, 86%)

CMYK

cmyk(0%, 19%, 4%, 14%)

Oklch

oklch(81.3% 0.064 332.9)

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

#FFB3D6

Rouge · Pink · Cherry Blossom

HEX

#FFB3D6

RGB

rgb(255, 179, 214)

HSL

hsl(332, 100%, 85%)

HSB

hsb(332, 30%, 100%)

CMYK

cmyk(0%, 30%, 16%, 0%)

Oklch

oklch(84.8% 0.098 350.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8C8685

868C8D

Analogous

8D8689

8C8685

8D8B86

Triadic

8C8685

868D87

87868D

Split-Comp.

8C8685

868D8B

86898D

Tetradic

8C8685

898D86

868C8D

8B868D

Contrast Matrix WCAG 2.1 Contrast

8C8685	9878E9	AB99DD	DCB3D4	FFB3D6
—	1.1 Fail	1.4 Fail	2.0 Fail	2.2 Fail
1.1 Fail	—	1.3 Fail	1.8 Fail	2.0 Fail
1.4 Fail	1.3 Fail	—	1.4 Fail	1.5 Fail
2.0 Fail	1.8 Fail	1.4 Fail	—	1.1 Fail
2.2 Fail	2.0 Fail	1.5 Fail	1.1 Fail	—

White BG

3.6AA Large

3.4AA Large

2.5Fail

1.8Fail

1.7Fail

Black BG

5.9AA

6.2AA

8.3AAA

11.4AAA

12.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

898985

8A8ACE

A3A3CD

CACACC

DEDDCE

Deuteranopia

8A8A85

8C8EC7

A4A6C9

CDD0CA

E3E8CB

Tritanopia

8C8585

96B8B3

AAC0BD

DAC6C4

FBC7C5

Achromatopsia

888888

8E8E8E

A6A6A6

C3C3C3

CECECE

Shades & Tints Shades & Tints

#8C8685

Dark

Light

#9878E9

Dark

Light

#AB99DD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8c8685;
  --color-2: #9878e9;
  --color-3: #ab99dd;
  --color-4: #dcb3d4;
  --color-5: #ffb3d6;
}

SCSS

$color-1: #8c8685;
$color-2: #9878e9;
$color-3: #ab99dd;
$color-4: #dcb3d4;
$color-5: #ffb3d6;

TAILWIND

colors: {
  'brand-1': '#8c8685',
  'brand-2': '#9878e9',
  'brand-3': '#ab99dd',
  'brand-4': '#dcb3d4',
  'brand-5': '#ffb3d6',
}

RGB Array

[140, 134, 133], [152, 120, 233], [171, 153, 221], [220, 179, 212], [255, 179, 214]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8C8685, #9878E9, #AB99DD, #DCB3D4, #FFB3D6 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: #8c8685; --color-2: #9878e9; --color-3: #ab99dd; --color-4: #dcb3d4; --color-5: #ffb3d6. 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