#AD8DC4 + #A5BAD6 + #A9DADB + #C4EFDF + #E3E8E1 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#AD8DC4

Lilac · DarkGray · Lilac Purple

HEX

#AD8DC4

RGB

rgb(173, 141, 196)

HSL

hsl(275, 32%, 66%)

HSB

hsb(275, 28%, 77%)

CMYK

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

Oklch

oklch(69.2% 0.086 310.6)

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

#A5BAD6

Azure · LightSteelBlue · Cobalt Blue

HEX

#A5BAD6

RGB

rgb(165, 186, 214)

HSL

hsl(214, 37%, 74%)

HSB

hsb(214, 23%, 84%)

CMYK

cmyk(23%, 13%, 0%, 16%)

Oklch

oklch(78.2% 0.046 255.7)

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

#A9DADB

Sky Blue · LightBlue · Glacier Blue

HEX

#A9DADB

RGB

rgb(169, 218, 219)

HSL

hsl(181, 41%, 76%)

HSB

hsb(181, 23%, 86%)

CMYK

cmyk(23%, 0%, 0%, 14%)

Oklch

oklch(85.5% 0.051 197.8)

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

#C4EFDF

Jade · LightBlue · Mint Green

HEX

#C4EFDF

RGB

rgb(196, 239, 223)

HSL

hsl(158, 57%, 85%)

HSB

hsb(158, 18%, 94%)

CMYK

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

Oklch

oklch(91.7% 0.049 170.6)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

#E3E8E1

Celadon · Beige · Mint Green

HEX

#E3E8E1

RGB

rgb(227, 232, 225)

HSL

hsl(103, 13%, 90%)

HSB

hsb(103, 3%, 91%)

CMYK

cmyk(2%, 0%, 3%, 9%)

Oklch

oklch(92.5% 0.011 136.6)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AD8DC4

A4C48D

Analogous

918DC4

AD8DC4

C48DBF

Triadic

AD8DC4

C4AD8D

8DC4AD

Split-Comp.

AD8DC4

BFC48D

8DC491

Tetradic

AD8DC4

C4918D

A4C48D

8DBFC4

Contrast Matrix WCAG 2.1 Contrast

AD8DC4	A5BAD6	A9DADB	C4EFDF	E3E8E1
—	1.4 Fail	1.9 Fail	2.3 Fail	2.3 Fail
1.4 Fail	—	1.3 Fail	1.6 Fail	1.6 Fail
1.9 Fail	1.3 Fail	—	1.2 Fail	1.2 Fail
2.3 Fail	1.6 Fail	1.2 Fail	—	1.0 Fail
2.3 Fail	1.6 Fail	1.2 Fail	1.0 Fail	—

White BG

2.8Fail

2.0Fail

1.5Fail

1.3Fail

1.2Fail

Black BG

7.4AAA

10.6AAA

13.7AAA

16.8AAA

16.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9F9FB7

AEAECF

BEBFDB

D7D7E3

E5E5E3

Deuteranopia

A1A3B4

ADABCE

BBB8DB

D4D1E4

E5E4E3

Tritanopia

ABACAA

A6CAC9

ABDBDB

C6E6E7

E3E4E4

Achromatopsia

9D9D9D

B7B7B7

CBCBCB

E0E0E0

E6E6E6

Shades & Tints Shades & Tints

#AD8DC4

Dark

Light

#A5BAD6

Dark

Light

#A9DADB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ad8dc4;
  --color-2: #a5bad6;
  --color-3: #a9dadb;
  --color-4: #c4efdf;
  --color-5: #e3e8e1;
}

SCSS

$color-1: #ad8dc4;
$color-2: #a5bad6;
$color-3: #a9dadb;
$color-4: #c4efdf;
$color-5: #e3e8e1;

TAILWIND

colors: {
  'brand-1': '#ad8dc4',
  'brand-2': '#a5bad6',
  'brand-3': '#a9dadb',
  'brand-4': '#c4efdf',
  'brand-5': '#e3e8e1',
}

RGB Array

[173, 141, 196], [165, 186, 214], [169, 218, 219], [196, 239, 223], [227, 232, 225]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #AD8DC4, #A5BAD6, #A9DADB, #C4EFDF, #E3E8E1 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: #ad8dc4; --color-2: #a5bad6; --color-3: #a9dadb; --color-4: #c4efdf; --color-5: #e3e8e1. 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 cool-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