#8E6FAB + #9C96C2 + #BFBEC9 + #E3BFC8 + #F4C46E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8E6FAB

Dark Plum · LightSlateGray · Violet

HEX

#8E6FAB

RGB

rgb(142, 111, 171)

HSL

hsl(271, 26%, 55%)

HSB

hsb(271, 35%, 67%)

CMYK

cmyk(17%, 35%, 0%, 33%)

Oklch

oklch(59.5% 0.095 307.4)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#9C96C2

Wisteria · DarkGray · Cobalt Blue

HEX

#9C96C2

RGB

rgb(156, 150, 194)

HSL

hsl(248, 27%, 67%)

HSB

hsb(248, 23%, 76%)

CMYK

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

Oklch

oklch(69.4% 0.064 290.9)

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

#BFBEC9

Wisteria · Silver · Pearl Gray

HEX

#BFBEC9

RGB

rgb(191, 190, 201)

HSL

hsl(245, 9%, 77%)

HSB

hsb(245, 5%, 79%)

CMYK

cmyk(5%, 5%, 0%, 21%)

Oklch

oklch(80.6% 0.015 290.2)

Traditional「Wisteria」· Paint「Pearl Gray」· Creative Silver Lining

#E3BFC8

Peach Pink · LightGray · Cherry Blossom

HEX

#E3BFC8

RGB

rgb(227, 191, 200)

HSL

hsl(345, 39%, 82%)

HSB

hsb(345, 16%, 89%)

CMYK

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

Oklch

oklch(83.8% 0.043 1.3)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#F4C46E

Ginger · SandyBrown · Warm Sun

HEX

#F4C46E

RGB

rgb(244, 196, 110)

HSL

hsl(39, 86%, 69%)

HSB

hsb(39, 55%, 96%)

CMYK

cmyk(0%, 20%, 55%, 4%)

Oklch

oklch(84.5% 0.118 80.7)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8E6FAB

8BAA6E

Analogous

6F6EAA

8E6FAB

AA6EA9

Triadic

8E6FAB

AA8D6E

6EAA8D

Split-Comp.

8E6FAB

A9AA6E

6EAA6F

Tetradic

8E6FAB

AA6F6E

8BAA6E

6EA9AA

Contrast Matrix WCAG 2.1 Contrast

8E6FAB	9C96C2	BFBEC9	E3BFC8	F4C46E
—	1.5 Fail	2.3 Fail	2.5 Fail	2.6 Fail
1.5 Fail	—	1.5 Fail	1.7 Fail	1.7 Fail
2.3 Fail	1.5 Fail	—	1.1 Fail	1.1 Fail
2.5 Fail	1.7 Fail	1.1 Fail	—	1.0 Fail
2.6 Fail	1.7 Fail	1.1 Fail	1.0 Fail	—

White BG

4.2AA Large

2.8Fail

1.8Fail

1.7Fail

1.6Fail

Black BG

5.0AA

7.6AAA

11.4AAA

12.6AAA

13.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

81809C

9999B7

BFBFC6

D3D3C6

DFDF83

Deuteranopia

828599

9A9AB5

BFBFC6

D6D8C5

E2E688

Tritanopia

8C918F

9CAFAD

BFC4C4

E1C4C4

F29397

Achromatopsia

7F7F7F

9D9D9D

C0C0C0

CBCBCB

C9C9C9

Shades & Tints Shades & Tints

#8E6FAB

Dark

Light

#9C96C2

Dark

Light

#BFBEC9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8e6fab;
  --color-2: #9c96c2;
  --color-3: #bfbec9;
  --color-4: #e3bfc8;
  --color-5: #f4c46e;
}

SCSS

$color-1: #8e6fab;
$color-2: #9c96c2;
$color-3: #bfbec9;
$color-4: #e3bfc8;
$color-5: #f4c46e;

TAILWIND

colors: {
  'brand-1': '#8e6fab',
  'brand-2': '#9c96c2',
  'brand-3': '#bfbec9',
  'brand-4': '#e3bfc8',
  'brand-5': '#f4c46e',
}

RGB Array

[142, 111, 171], [156, 150, 194], [191, 190, 201], [227, 191, 200], [244, 196, 110]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8E6FAB, #9C96C2, #BFBEC9, #E3BFC8, #F4C46E 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: #8e6fab; --color-2: #9c96c2; --color-3: #bfbec9; --color-4: #e3bfc8; --color-5: #f4c46e. 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