#A7B8D9 + #CCA9D4 + #DE99CD + #FF78CD + #AA9FA6 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A7B8D9

Azure · LightSteelBlue · Cobalt Blue

HEX

#A7B8D9

RGB

rgb(167, 184, 217)

HSL

hsl(220, 40%, 75%)

HSB

hsb(220, 23%, 85%)

CMYK

cmyk(23%, 15%, 0%, 15%)

Oklch

oklch(78.1% 0.051 263.7)

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

#CCA9D4

Lilac · Silver · Lilac Purple

HEX

#CCA9D4

RGB

rgb(204, 169, 212)

HSL

hsl(289, 33%, 75%)

HSB

hsb(289, 20%, 83%)

CMYK

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

Oklch

oklch(78.0% 0.071 320.0)

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

#DE99CD

Mauve · Orchid · Lilac Purple

HEX

#DE99CD

RGB

rgb(222, 153, 205)

HSL

hsl(315, 51%, 74%)

HSB

hsb(315, 31%, 87%)

CMYK

cmyk(0%, 31%, 8%, 13%)

Oklch

oklch(76.6% 0.106 335.9)

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

#FF78CD

Mauve · Violet · Rose Pink

HEX

#FF78CD

RGB

rgb(255, 120, 205)

HSL

hsl(322, 100%, 74%)

HSB

hsb(322, 53%, 100%)

CMYK

cmyk(0%, 53%, 20%, 0%)

Oklch

oklch(75.6% 0.189 343.9)

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

#AA9FA6

Ash · DarkGray · Silver Sand

HEX

#AA9FA6

RGB

rgb(170, 159, 166)

HSL

hsl(322, 6%, 65%)

HSB

hsb(322, 6%, 67%)

CMYK

cmyk(0%, 6%, 2%, 33%)

Oklch

oklch(71.4% 0.016 339.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A7B8D9

D9C8A6

Analogous

A6D0D9

A7B8D9

AEA6D9

Triadic

A7B8D9

D9A6B7

B7D9A6

Split-Comp.

A7B8D9

D9AEA6

D0D9A6

Tetradic

A7B8D9

D9A6D0

D9C8A6

A6D9AE

Contrast Matrix WCAG 2.1 Contrast

A7B8D9	CCA9D4	DE99CD	FF78CD	AA9FA6
—	1.0 Fail	1.1 Fail	1.2 Fail	1.3 Fail
1.0 Fail	—	1.1 Fail	1.2 Fail	1.2 Fail
1.1 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.2 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
1.3 Fail	1.2 Fail	1.2 Fail	1.1 Fail	—

White BG

2.0Fail

2.1Fail

2.2Fail

2.4Fail

2.6Fail

Black BG

10.5AAA

10.2AAA

9.5AAA

8.8AAA

8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AEAFD1

BDBDCA

C0C0C0

C5C3B8

A5A5A4

Deuteranopia

ADACCF

BFC1C7

C4C9BD

CCD7B4

A6A7A4

Tritanopia

A8CBC9

CAC1C0

DBB6B4

F8A8A5

A9A3A3

Achromatopsia

B7B7B7

B8B8B8

B4B4B4

AAAAAA

A3A3A3

Shades & Tints Shades & Tints

#A7B8D9

Dark

Light

#CCA9D4

Dark

Light

#DE99CD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a7b8d9;
  --color-2: #cca9d4;
  --color-3: #de99cd;
  --color-4: #ff78cd;
  --color-5: #aa9fa6;
}

SCSS

$color-1: #a7b8d9;
$color-2: #cca9d4;
$color-3: #de99cd;
$color-4: #ff78cd;
$color-5: #aa9fa6;

TAILWIND

colors: {
  'brand-1': '#a7b8d9',
  'brand-2': '#cca9d4',
  'brand-3': '#de99cd',
  'brand-4': '#ff78cd',
  'brand-5': '#aa9fa6',
}

RGB Array

[167, 184, 217], [204, 169, 212], [222, 153, 205], [255, 120, 205], [170, 159, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A7B8D9, #CCA9D4, #DE99CD, #FF78CD, #AA9FA6 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: #a7b8d9; --color-2: #cca9d4; --color-3: #de99cd; --color-4: #ff78cd; --color-5: #aa9fa6. 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