#9F9CD6 + #A3B2D9 + #A3C8D9 + #A8E3D8 + #A2F2C6 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9F9CD6

Wisteria · LightSteelBlue · Cobalt Blue

HEX

#9F9CD6

RGB

rgb(159, 156, 214)

HSL

hsl(243, 41%, 73%)

HSB

hsb(243, 27%, 84%)

CMYK

cmyk(26%, 27%, 0%, 16%)

Oklch

oklch(71.7% 0.084 286.4)

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

#A3B2D9

Azure · LightSteelBlue · Cobalt Blue

HEX

#A3B2D9

RGB

rgb(163, 178, 217)

HSL

hsl(223, 42%, 75%)

HSB

hsb(223, 25%, 85%)

CMYK

cmyk(25%, 18%, 0%, 15%)

Oklch

oklch(76.5% 0.059 268.5)

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

#A3C8D9

Sky Blue · LightSteelBlue · Lake Green

HEX

#A3C8D9

RGB

rgb(163, 200, 217)

HSL

hsl(199, 42%, 75%)

HSB

hsb(199, 25%, 85%)

CMYK

cmyk(25%, 8%, 0%, 15%)

Oklch

oklch(81.2% 0.046 227.5)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#A8E3D8

Jade · LightBlue · Glacier Blue

HEX

#A8E3D8

RGB

rgb(168, 227, 216)

HSL

hsl(169, 51%, 77%)

HSB

hsb(169, 26%, 89%)

CMYK

cmyk(26%, 0%, 5%, 11%)

Oklch

oklch(87.3% 0.062 182.0)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#A2F2C6

Emerald · LightBlue · Apple Green

HEX

#A2F2C6

RGB

rgb(162, 242, 198)

HSL

hsl(147, 75%, 79%)

HSB

hsb(147, 33%, 95%)

CMYK

cmyk(33%, 0%, 18%, 5%)

Oklch

oklch(89.8% 0.100 159.5)

Traditional「Emerald」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9F9CD6

D4D69E

Analogous

9EB7D6

9F9CD6

BD9ED6

Triadic

9F9CD6

D6A19E

9ED6A1

Split-Comp.

9F9CD6

D6BD9E

B7D69E

Tetradic

9F9CD6

D69EB7

D4D69E

9ED6BD

Contrast Matrix WCAG 2.1 Contrast

9F9CD6	A3B2D9	A3C8D9	A8E3D8	A2F2C6
—	1.2 Fail	1.4 Fail	1.8 Fail	2.0 Fail
1.2 Fail	—	1.2 Fail	1.5 Fail	1.6 Fail
1.4 Fail	1.2 Fail	—	1.2 Fail	1.4 Fail
1.8 Fail	1.5 Fail	1.2 Fail	—	1.1 Fail
2.0 Fail	1.6 Fail	1.4 Fail	1.1 Fail	—

White BG

2.6Fail

2.1Fail

1.8Fail

1.4Fail

1.3Fail

Black BG

8.2AAA

9.9AAA

11.8AAA

14.6AAA

16.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9E9EC8

A9AAD0

B3B3D5

C2C2DB

C5C5D1

Deuteranopia

9E9EC5

A9A8CD

B1AED4

BEBADB

C0BAD3

Tritanopia

9FBDBA

A4C8C6

A5D2D1

ABDDDD

A6D9DB

Achromatopsia

A4A4A4

B2B2B2

BFBFBF

D0D0D0

D5D5D5

Shades & Tints Shades & Tints

#9F9CD6

Dark

Light

#A3B2D9

Dark

Light

#A3C8D9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9f9cd6;
  --color-2: #a3b2d9;
  --color-3: #a3c8d9;
  --color-4: #a8e3d8;
  --color-5: #a2f2c6;
}

SCSS

$color-1: #9f9cd6;
$color-2: #a3b2d9;
$color-3: #a3c8d9;
$color-4: #a8e3d8;
$color-5: #a2f2c6;

TAILWIND

colors: {
  'brand-1': '#9f9cd6',
  'brand-2': '#a3b2d9',
  'brand-3': '#a3c8d9',
  'brand-4': '#a8e3d8',
  'brand-5': '#a2f2c6',
}

RGB Array

[159, 156, 214], [163, 178, 217], [163, 200, 217], [168, 227, 216], [162, 242, 198]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9F9CD6, #A3B2D9, #A3C8D9, #A8E3D8, #A2F2C6 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: #9f9cd6; --color-2: #a3b2d9; --color-3: #a3c8d9; --color-4: #a8e3d8; --color-5: #a2f2c6. 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