#8F9AD9 + #A49AD9 + #BF9FD4 + #D4A9CD + #D1B6C3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8F9AD9

Azure · CornflowerBlue · Cobalt Blue

HEX

#8F9AD9

RGB

rgb(143, 154, 217)

HSL

hsl(231, 49%, 71%)

HSB

hsb(231, 34%, 85%)

CMYK

cmyk(34%, 29%, 0%, 15%)

Oklch

oklch(70.2% 0.093 276.1)

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

#A49AD9

Wisteria · LightSteelBlue · Cobalt Blue

HEX

#A49AD9

RGB

rgb(164, 154, 217)

HSL

hsl(250, 45%, 73%)

HSB

hsb(250, 29%, 85%)

CMYK

cmyk(24%, 29%, 0%, 15%)

Oklch

oklch(71.8% 0.091 291.2)

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

#BF9FD4

Lilac · Silver · Lilac Purple

HEX

#BF9FD4

RGB

rgb(191, 159, 212)

HSL

hsl(276, 38%, 73%)

HSB

hsb(276, 25%, 83%)

CMYK

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

Oklch

oklch(74.9% 0.082 311.7)

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

#D4A9CD

Mauve · Silver · Lilac Purple

HEX

#D4A9CD

RGB

rgb(212, 169, 205)

HSL

hsl(310, 33%, 75%)

HSB

hsb(310, 20%, 83%)

CMYK

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

Oklch

oklch(78.5% 0.069 331.8)

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

#D1B6C3

Rouge · Silver · Cherry Blossom

HEX

#D1B6C3

RGB

rgb(209, 182, 195)

HSL

hsl(331, 23%, 77%)

HSB

hsb(331, 13%, 82%)

CMYK

cmyk(0%, 13%, 7%, 18%)

Oklch

oklch(80.3% 0.035 347.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8F9AD9

D9CE91

Analogous

91C0D9

8F9AD9

AA91D9

Triadic

8F9AD9

D9919C

9CD991

Split-Comp.

8F9AD9

D9AA91

C0D991

Tetradic

8F9AD9

D991C0

D9CE91

91D9AA

Contrast Matrix WCAG 2.1 Contrast

8F9AD9	A49AD9	BF9FD4	D4A9CD	D1B6C3
—	1.1 Fail	1.2 Fail	1.3 Fail	1.4 Fail
1.1 Fail	—	1.1 Fail	1.3 Fail	1.4 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.3 Fail	1.3 Fail	1.1 Fail	—	1.1 Fail
1.4 Fail	1.4 Fail	1.2 Fail	1.1 Fail	—

White BG

2.7Fail

2.6Fail

2.3Fail

2.0Fail

1.9Fail

Black BG

7.8AAA

8.2AAA

9.1AAA

10.4AAA

11.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9494CA

A0A0CA

B1B1C7

C1C1C4

C5C5C0

Deuteranopia

9392C6

A0A1C6

B3B5C4

C4C7C2

C7C9BF

Tritanopia

90BEBB

A3BEBB

BDBDBB

D2BDBC

D0BDBD

Achromatopsia

9E9E9E

A4A4A4

AFAFAF

BABABA

C0C0C0

Shades & Tints Shades & Tints

#8F9AD9

Dark

Light

#A49AD9

Dark

Light

#BF9FD4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8f9ad9;
  --color-2: #a49ad9;
  --color-3: #bf9fd4;
  --color-4: #d4a9cd;
  --color-5: #d1b6c3;
}

SCSS

$color-1: #8f9ad9;
$color-2: #a49ad9;
$color-3: #bf9fd4;
$color-4: #d4a9cd;
$color-5: #d1b6c3;

TAILWIND

colors: {
  'brand-1': '#8f9ad9',
  'brand-2': '#a49ad9',
  'brand-3': '#bf9fd4',
  'brand-4': '#d4a9cd',
  'brand-5': '#d1b6c3',
}

RGB Array

[143, 154, 217], [164, 154, 217], [191, 159, 212], [212, 169, 205], [209, 182, 195]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8F9AD9, #A49AD9, #BF9FD4, #D4A9CD, #D1B6C3 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: #8f9ad9; --color-2: #a49ad9; --color-3: #bf9fd4; --color-4: #d4a9cd; --color-5: #d1b6c3. 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