#8B85E9 + #96B3D6 + #AFC7C5 + #DBC3C8 + #FBABF3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8B85E9

Wisteria · MediumSlateBlue · Cobalt Blue

HEX

#8B85E9

RGB

rgb(139, 133, 233)

HSL

hsl(244, 69%, 72%)

HSB

hsb(244, 43%, 91%)

CMYK

cmyk(40%, 43%, 0%, 9%)

Oklch

oklch(66.6% 0.146 284.4)

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

#96B3D6

Azure · LightSteelBlue · Cobalt Blue

HEX

#96B3D6

RGB

rgb(150, 179, 214)

HSL

hsl(213, 44%, 71%)

HSB

hsb(213, 30%, 84%)

CMYK

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

Oklch

oklch(75.7% 0.060 253.3)

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

#AFC7C5

Jade · Silver · Lake Green

HEX

#AFC7C5

RGB

rgb(175, 199, 197)

HSL

hsl(175, 18%, 73%)

HSB

hsb(175, 12%, 78%)

CMYK

cmyk(12%, 0%, 1%, 22%)

Oklch

oklch(81.1% 0.026 190.5)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#DBC3C8

Peach Pink · LightGray · Cherry Blossom

HEX

#DBC3C8

RGB

rgb(219, 195, 200)

HSL

hsl(347, 25%, 81%)

HSB

hsb(347, 11%, 86%)

CMYK

cmyk(0%, 11%, 9%, 14%)

Oklch

oklch(83.9% 0.028 3.5)

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

#FBABF3

Mauve · Violet · Lavender

HEX

#FBABF3

RGB

rgb(251, 171, 243)

HSL

hsl(306, 91%, 83%)

HSB

hsb(306, 32%, 98%)

CMYK

cmyk(0%, 32%, 3%, 2%)

Oklch

oklch(84.1% 0.130 330.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8B85E9

E2E986

Analogous

86B1E9

8B85E9

BE86E9

Triadic

8B85E9

E98D86

86E98D

Split-Comp.

8B85E9

E9BE86

B1E986

Tetradic

8B85E9

E986B1

E2E986

86E9BE

Contrast Matrix WCAG 2.1 Contrast

8B85E9	96B3D6	AFC7C5	DBC3C8	FBABF3
—	1.5 Fail	1.8 Fail	1.9 Fail	1.8 Fail
1.5 Fail	—	1.2 Fail	1.3 Fail	1.3 Fail
1.8 Fail	1.2 Fail	—	1.1 Fail	1.0 Fail
1.9 Fail	1.3 Fail	1.1 Fail	—	1.0 Fail
1.8 Fail	1.3 Fail	1.0 Fail	1.0 Fail	—

White BG

3.2AA Large

2.2Fail

1.8Fail

1.7Fail

Black BG

6.6AA

9.7AAA

11.8AAA

12.7AAA

12.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8888D1

A3A3CE

B9BAC5

D1D0C7

D8D8E2

Deuteranopia

8989CB

A19FCB

B8B6C6

D2D4C7

DDE3DD

Tritanopia

8BBEBA

97C7C5

B0C6C6

DAC6C6

F7D4D1

Achromatopsia

929292

AEAEAE

C0C0C0

CBCBCB

Shades & Tints Shades & Tints

#8B85E9

Dark

Light

#96B3D6

Dark

Light

#AFC7C5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8b85e9;
  --color-2: #96b3d6;
  --color-3: #afc7c5;
  --color-4: #dbc3c8;
  --color-5: #fbabf3;
}

SCSS

$color-1: #8b85e9;
$color-2: #96b3d6;
$color-3: #afc7c5;
$color-4: #dbc3c8;
$color-5: #fbabf3;

TAILWIND

colors: {
  'brand-1': '#8b85e9',
  'brand-2': '#96b3d6',
  'brand-3': '#afc7c5',
  'brand-4': '#dbc3c8',
  'brand-5': '#fbabf3',
}

RGB Array

[139, 133, 233], [150, 179, 214], [175, 199, 197], [219, 195, 200], [251, 171, 243]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8B85E9, #96B3D6, #AFC7C5, #DBC3C8, #FBABF3 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: #8b85e9; --color-2: #96b3d6; --color-3: #afc7c5; --color-4: #dbc3c8; --color-5: #fbabf3. 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