#D5F5F3 + #AADAE1 + #A7BDDB + #A8A0CF + #AA64B6 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D5F5F3

Jade · Lavender · Glacier Blue

HEX

#D5F5F3

RGB

rgb(213, 245, 243)

HSL

hsl(176, 62%, 90%)

HSB

hsb(176, 13%, 96%)

CMYK

cmyk(13%, 0%, 1%, 4%)

Oklch

oklch(94.7% 0.033 192.0)

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

#AADAE1

Sky Blue · LightBlue · Glacier Blue

HEX

#AADAE1

RGB

rgb(170, 218, 225)

HSL

hsl(188, 48%, 77%)

HSB

hsb(188, 24%, 88%)

CMYK

cmyk(24%, 3%, 0%, 12%)

Oklch

oklch(85.7% 0.051 207.3)

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

#A7BDDB

Azure · LightSteelBlue · Cobalt Blue

HEX

#A7BDDB

RGB

rgb(167, 189, 219)

HSL

hsl(215, 42%, 76%)

HSB

hsb(215, 24%, 86%)

CMYK

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

Oklch

oklch(79.2% 0.049 256.2)

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

#A8A0CF

Wisteria · DarkGray · Cobalt Blue

HEX

#A8A0CF

RGB

rgb(168, 160, 207)

HSL

hsl(250, 33%, 72%)

HSB

hsb(250, 23%, 81%)

CMYK

cmyk(19%, 23%, 0%, 19%)

Oklch

oklch(72.9% 0.068 292.4)

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

#AA64B6

Dark Plum · MediumOrchid · Violet

HEX

#AA64B6

RGB

rgb(170, 100, 182)

HSL

hsl(291, 36%, 55%)

HSB

hsb(291, 45%, 71%)

CMYK

cmyk(7%, 45%, 0%, 29%)

Oklch

oklch(61.2% 0.141 321.6)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D5F5F3

F5D6D8

Analogous

D6F5E3

D5F5F3

D6E8F5

Triadic

D5F5F3

F3D6F5

F5F3D6

Split-Comp.

D5F5F3

F5D6E8

F5E3D6

Tetradic

D5F5F3

E3D6F5

F5D6D8

E8F5D6

Contrast Matrix WCAG 2.1 Contrast

D5F5F3	AADAE1	A7BDDB	A8A0CF	AA64B6
—	1.3 Fail	1.7 Fail	2.1 Fail	3.5 AA Large
1.3 Fail	—	1.3 Fail	1.6 Fail	2.7 Fail
1.7 Fail	1.3 Fail	—	1.3 Fail	2.1 Fail
2.1 Fail	1.6 Fail	1.3 Fail	—	1.7 Fail
3.5 AA Large	2.7 Fail	2.1 Fail	1.7 Fail	—

White BG

1.2Fail

1.5Fail

1.9Fail

2.4Fail

4.0AA Large

Black BG

18.2AAA

13.8AAA

10.9AAA

8.6AAA

5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E3F3

BFBFDF

B1B1D4

A5A4C4

8C8BA2

Deuteranopia

E1DFF4

BCB8DF

AFAED2

A5A6C1

90959D

Tritanopia

D7F4F4

ACDEDE

A8CECD

A8BBB9

A7928F

Achromatopsia

EBEBEB

CCCCCC

BABABA

A8A8A8

828282

Shades & Tints Shades & Tints

#D5F5F3

Dark

Light

#AADAE1

Dark

Light

#A7BDDB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d5f5f3;
  --color-2: #aadae1;
  --color-3: #a7bddb;
  --color-4: #a8a0cf;
  --color-5: #aa64b6;
}

SCSS

$color-1: #d5f5f3;
$color-2: #aadae1;
$color-3: #a7bddb;
$color-4: #a8a0cf;
$color-5: #aa64b6;

TAILWIND

colors: {
  'brand-1': '#d5f5f3',
  'brand-2': '#aadae1',
  'brand-3': '#a7bddb',
  'brand-4': '#a8a0cf',
  'brand-5': '#aa64b6',
}

RGB Array

[213, 245, 243], [170, 218, 225], [167, 189, 219], [168, 160, 207], [170, 100, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D5F5F3, #AADAE1, #A7BDDB, #A8A0CF, #AA64B6 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: #d5f5f3; --color-2: #aadae1; --color-3: #a7bddb; --color-4: #a8a0cf; --color-5: #aa64b6. 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