#CAE6EF + #9ECED3 + #8FBDC9 + #A29FDB + #937ABF - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CAE6EF

Sky Blue · Lavender · Glacier Blue

HEX

#CAE6EF

RGB

rgb(202, 230, 239)

HSL

hsl(195, 54%, 86%)

HSB

hsb(195, 15%, 94%)

CMYK

cmyk(15%, 4%, 0%, 6%)

Oklch

oklch(90.7% 0.032 219.1)

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

#9ECED3

Sky Blue · LightSteelBlue · Lake Green

HEX

#9ECED3

RGB

rgb(158, 206, 211)

HSL

hsl(186, 38%, 72%)

HSB

hsb(186, 25%, 83%)

CMYK

cmyk(25%, 2%, 0%, 17%)

Oklch

oklch(81.9% 0.051 204.2)

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

#8FBDC9

Sky Blue · SkyBlue · Lake Green

HEX

#8FBDC9

RGB

rgb(143, 189, 201)

HSL

hsl(192, 35%, 67%)

HSB

hsb(192, 29%, 79%)

CMYK

cmyk(29%, 6%, 0%, 21%)

Oklch

oklch(77.0% 0.051 215.5)

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

#A29FDB

Wisteria · LightSteelBlue · Cobalt Blue

HEX

#A29FDB

RGB

rgb(162, 159, 219)

HSL

hsl(243, 45%, 74%)

HSB

hsb(243, 27%, 86%)

CMYK

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

Oklch

oklch(72.7% 0.086 286.3)

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

#937ABF

Wisteria · LightSlateGray · Lilac Purple

HEX

#937ABF

RGB

rgb(147, 122, 191)

HSL

hsl(262, 35%, 61%)

HSB

hsb(262, 36%, 75%)

CMYK

cmyk(23%, 36%, 0%, 25%)

Oklch

oklch(63.0% 0.105 300.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CAE6EF

EFD2C8

Analogous

C8EFE5

CAE6EF

C8D2EF

Triadic

CAE6EF

EFC8E5

E5EFC8

Split-Comp.

CAE6EF

EFC8D2

EFE5C8

Tetradic

CAE6EF

E5C8EF

EFD2C8

D2EFC8

Contrast Matrix WCAG 2.1 Contrast

CAE6EF	9ECED3	8FBDC9	A29FDB	937ABF
—	1.3 Fail	1.6 Fail	1.9 Fail	2.8 Fail
1.3 Fail	—	1.2 Fail	1.4 Fail	2.1 Fail
1.6 Fail	1.2 Fail	—	1.2 Fail	1.8 Fail
1.9 Fail	1.4 Fail	1.2 Fail	—	1.5 Fail
2.8 Fail	2.1 Fail	1.8 Fail	1.5 Fail	—

White BG

1.3Fail

1.7Fail

2.0Fail

2.5Fail

3.6AA Large

Black BG

16.1AAA

12.2AAA

10.3AAA

8.5AAA

5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D6ED

B3B3D2

A3A3C6

A1A1CC

8888AE

Deuteranopia

D5D2EC

B0ACD2

A09DC5

A1A1C9

8A8CAA

Tritanopia

CBEBEB

A0D1D1

91C4C3

A2C1BF

92A19E

Achromatopsia

DFDFDF

C0C0C0

B1B1B1

A7A7A7

898989

Shades & Tints Shades & Tints

#CAE6EF

Dark

Light

#9ECED3

Dark

Light

#8FBDC9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cae6ef;
  --color-2: #9eced3;
  --color-3: #8fbdc9;
  --color-4: #a29fdb;
  --color-5: #937abf;
}

SCSS

$color-1: #cae6ef;
$color-2: #9eced3;
$color-3: #8fbdc9;
$color-4: #a29fdb;
$color-5: #937abf;

TAILWIND

colors: {
  'brand-1': '#cae6ef',
  'brand-2': '#9eced3',
  'brand-3': '#8fbdc9',
  'brand-4': '#a29fdb',
  'brand-5': '#937abf',
}

RGB Array

[202, 230, 239], [158, 206, 211], [143, 189, 201], [162, 159, 219], [147, 122, 191]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CAE6EF, #9ECED3, #8FBDC9, #A29FDB, #937ABF 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: #cae6ef; --color-2: #9eced3; --color-3: #8fbdc9; --color-4: #a29fdb; --color-5: #937abf. 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