#A5B2F9 + #C3ACE3 + #DCA6C8 + #F1A1B5 + #9C8E8E · dark - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A5B2F9

Azure · LightSteelBlue · Sky Blue

HEX

#A5B2F9

RGB

rgb(165, 178, 249)

HSL

hsl(231, 88%, 81%)

HSB

hsb(231, 34%, 98%)

CMYK

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

Oklch

oklch(78.0% 0.102 275.8)

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

#C3ACE3

Wisteria · LightSteelBlue · Lilac Purple

HEX

#C3ACE3

RGB

rgb(195, 172, 227)

HSL

hsl(265, 50%, 78%)

HSB

hsb(265, 24%, 89%)

CMYK

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

Oklch

oklch(78.3% 0.081 303.7)

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

#DCA6C8

Mauve · Silver · Cherry Blossom

HEX

#DCA6C8

RGB

rgb(220, 166, 200)

HSL

hsl(322, 44%, 76%)

HSB

hsb(322, 25%, 86%)

CMYK

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

Oklch

oklch(78.5% 0.077 340.9)

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

#F1A1B5

Peach Pink · LightPink · Coral Red

HEX

#F1A1B5

RGB

rgb(241, 161, 181)

HSL

hsl(345, 74%, 79%)

HSB

hsb(345, 33%, 95%)

CMYK

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

Oklch

oklch(79.3% 0.098 3.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#9C8E8E

Ash · Gray · Silver Sand

HEX

#9C8E8E

RGB

rgb(156, 142, 142)

HSL

hsl(0, 7%, 58%)

HSB

hsb(0, 9%, 61%)

CMYK

cmyk(0%, 9%, 9%, 39%)

Oklch

oklch(65.9% 0.017 17.6)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A5B2F9

F9ECA4

Analogous

A4DBF9

A5B2F9

C2A4F9

Triadic

A5B2F9

F9A4B1

B1F9A4

Split-Comp.

A5B2F9

F9C2A4

DBF9A4

Tetradic

A5B2F9

F9A4DB

F9ECA4

A4F9C2

Contrast Matrix WCAG 2.1 Contrast

A5B2F9	C3ACE3	DCA6C8	F1A1B5	9C8E8E
—	1.0 Fail	1.0 Fail	1.0 Fail	1.5 Fail
1.0 Fail	—	1.0 Fail	1.0 Fail	1.5 Fail
1.0 Fail	1.0 Fail	—	1.0 Fail	1.5 Fail
1.0 Fail	1.0 Fail	1.0 Fail	—	1.6 Fail
1.5 Fail	1.5 Fail	1.5 Fail	1.6 Fail	—

White BG

2.0Fail

3.1AA Large

Black BG

10.3AAA

10.5AAA

6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ABABE8

B9B9D6

C5C4C0

CECEB0

96968E

Deuteranopia

AAA9E4

BABCD2

C8CCBE

D3D9AF

97988E

Tritanopia

A6DAD7

C2CBC9

D9B9B8

EDACAC

9B8E8E

Achromatopsia

B6B6B6

B9B9B9

BABABA

BBBBBB

929292

Shades & Tints Shades & Tints

#A5B2F9

Dark

Light

#C3ACE3

Dark

Light

#DCA6C8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a5b2f9;
  --color-2: #c3ace3;
  --color-3: #dca6c8;
  --color-4: #f1a1b5;
  --color-5: #9c8e8e;
}

SCSS

$color-1: #a5b2f9;
$color-2: #c3ace3;
$color-3: #dca6c8;
$color-4: #f1a1b5;
$color-5: #9c8e8e;

TAILWIND

colors: {
  'brand-1': '#a5b2f9',
  'brand-2': '#c3ace3',
  'brand-3': '#dca6c8',
  'brand-4': '#f1a1b5',
  'brand-5': '#9c8e8e',
}

RGB Array

[165, 178, 249], [195, 172, 227], [220, 166, 200], [241, 161, 181], [156, 142, 142]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #A5B2F9, #C3ACE3, #DCA6C8, #F1A1B5, #9C8E8E 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: #a5b2f9; --color-2: #c3ace3; --color-3: #dca6c8; --color-4: #f1a1b5; --color-5: #9c8e8e. 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 dark-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