#849696 + #8E9FBF + #BAA3D4 + #E7A3F0 + #D9C5CE - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#849696

Slate Blue · LightSlateGray · Warm Gray

HEX

#849696

RGB

rgb(132, 150, 150)

HSL

hsl(180, 8%, 55%)

HSB

hsb(180, 12%, 59%)

CMYK

cmyk(12%, 0%, 0%, 41%)

Oklch

oklch(65.9% 0.021 196.7)

Traditional「Slate Blue」· Paint「Warm Gray」· Creative Urban Concrete

#8E9FBF

Azure · DarkGray · Cobalt Blue

HEX

#8E9FBF

RGB

rgb(142, 159, 191)

HSL

hsl(219, 28%, 65%)

HSB

hsb(219, 26%, 75%)

CMYK

cmyk(26%, 17%, 0%, 25%)

Oklch

oklch(70.0% 0.051 263.0)

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

#BAA3D4

Wisteria · Silver · Lilac Purple

HEX

#BAA3D4

RGB

rgb(186, 163, 212)

HSL

hsl(268, 36%, 74%)

HSB

hsb(268, 23%, 83%)

CMYK

cmyk(12%, 23%, 0%, 17%)

Oklch

oklch(75.2% 0.073 306.0)

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

#E7A3F0

Lilac · Violet · Lilac Purple

HEX

#E7A3F0

RGB

rgb(231, 163, 240)

HSL

hsl(293, 72%, 79%)

HSB

hsb(293, 32%, 94%)

CMYK

cmyk(4%, 32%, 0%, 6%)

Oklch

oklch(80.6% 0.128 322.6)

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

#D9C5CE

Rouge · LightGray · Cherry Blossom

HEX

#D9C5CE

RGB

rgb(217, 197, 206)

HSL

hsl(333, 21%, 81%)

HSB

hsb(333, 9%, 85%)

CMYK

cmyk(0%, 9%, 5%, 15%)

Oklch

oklch(84.3% 0.025 348.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

849696

958383

Analogous

83958C

849696

838C95

Triadic

849696

958395

959583

Split-Comp.

849696

95838C

958C83

Tetradic

849696

8C8395

958383

8C9583

Contrast Matrix WCAG 2.1 Contrast

849696	8E9FBF	BAA3D4	E7A3F0	D9C5CE
—	1.2 Fail	1.4 Fail	1.6 Fail	1.9 Fail
1.2 Fail	—	1.2 Fail	1.4 Fail	1.6 Fail
1.4 Fail	1.2 Fail	—	1.2 Fail	1.4 Fail
1.6 Fail	1.4 Fail	1.2 Fail	—	1.2 Fail
1.9 Fail	1.6 Fail	1.4 Fail	1.2 Fail	—

White BG

3.1AA Large

2.7Fail

2.3Fail

1.9Fail

1.6Fail

Black BG

6.8AA

7.9AAA

9.3AAA

10.9AAA

12.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8C8C96

9596B7

B0B0C8

CAC9DD

D0D0CC

Deuteranopia

8B8996

9493B5

B1B3C5

CED3D9

D2D3CB

Tritanopia

859696

8FB1B0

B9BFBD

E4CFCB

D8CACA

Achromatopsia

919191

9E9E9E

AFAFAF

C0C0C0

CCCCCC

Shades & Tints Shades & Tints

#849696

Dark

Light

#8E9FBF

Dark

Light

#BAA3D4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #849696;
  --color-2: #8e9fbf;
  --color-3: #baa3d4;
  --color-4: #e7a3f0;
  --color-5: #d9c5ce;
}

SCSS

$color-1: #849696;
$color-2: #8e9fbf;
$color-3: #baa3d4;
$color-4: #e7a3f0;
$color-5: #d9c5ce;

TAILWIND

colors: {
  'brand-1': '#849696',
  'brand-2': '#8e9fbf',
  'brand-3': '#baa3d4',
  'brand-4': '#e7a3f0',
  'brand-5': '#d9c5ce',
}

RGB Array

[132, 150, 150], [142, 159, 191], [186, 163, 212], [231, 163, 240], [217, 197, 206]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #849696, #8E9FBF, #BAA3D4, #E7A3F0, #D9C5CE 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: #849696; --color-2: #8e9fbf; --color-3: #baa3d4; --color-4: #e7a3f0; --color-5: #d9c5ce. 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