#CED9CC + #86D9CE + #9CB1CF + #AD77BA + #B4469C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CED9CC

Celadon · LightGray · Mint Green

HEX

#CED9CC

RGB

rgb(206, 217, 204)

HSL

hsl(111, 15%, 83%)

HSB

hsb(111, 6%, 85%)

CMYK

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

Oklch

oklch(87.3% 0.021 140.9)

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

#86D9CE

Jade · SkyBlue · Lake Green

HEX

#86D9CE

RGB

rgb(134, 217, 206)

HSL

hsl(172, 52%, 69%)

HSB

hsb(172, 38%, 85%)

CMYK

cmyk(38%, 0%, 5%, 15%)

Oklch

oklch(82.9% 0.083 185.1)

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

#9CB1CF

Azure · LightSteelBlue · Cobalt Blue

HEX

#9CB1CF

RGB

rgb(156, 177, 207)

HSL

hsl(215, 35%, 71%)

HSB

hsb(215, 25%, 81%)

CMYK

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

Oklch

oklch(75.4% 0.049 257.3)

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

#AD77BA

Dark Plum · MediumOrchid · Violet

HEX

#AD77BA

RGB

rgb(173, 119, 186)

HSL

hsl(288, 33%, 60%)

HSB

hsb(288, 36%, 73%)

CMYK

cmyk(7%, 36%, 0%, 27%)

Oklch

oklch(64.8% 0.114 319.7)

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

#B4469C

Rose Purple · MediumOrchid · Violet

HEX

#B4469C

RGB

rgb(180, 70, 156)

HSL

hsl(313, 44%, 49%)

HSB

hsb(313, 61%, 71%)

CMYK

cmyk(0%, 61%, 13%, 29%)

Oklch

oklch(57.1% 0.174 337.1)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CED9CC

D8CDDA

Analogous

D6DACD

CED9CC

CDDAD2

Triadic

CED9CC

CDCFDA

DACDCF

Split-Comp.

CED9CC

D2CDDA

DACDD6

Tetradic

CED9CC

CDD6DA

D8CDDA

DAD2CD

Contrast Matrix WCAG 2.1 Contrast

CED9CC	86D9CE	9CB1CF	AD77BA	B4469C
—	1.1 Fail	1.5 Fail	2.4 Fail	3.4 AA Large
1.1 Fail	—	1.3 Fail	2.1 Fail	3.0 Fail
1.5 Fail	1.3 Fail	—	1.6 Fail	2.2 Fail
2.4 Fail	2.1 Fail	1.6 Fail	—	1.4 Fail
3.4 AA Large	3.0 Fail	2.2 Fail	1.4 Fail	—

White BG

1.5Fail

1.6Fail

2.2Fail

3.4AA Large

4.9AA

Black BG

14.4AAA

12.8AAA

9.6AAA

6.1AA

4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D3D3CF

AAABD1

A5A5C8

9695AA

848387

Deuteranopia

D2D1D0

A59FD1

A4A2C6

999DA6

8B9382

Tritanopia

CFD2D2

8AD3D3

9DC2C1

AA9D9A

AF7773

Achromatopsia

D4D4D4

BFBFBF

AEAEAE

8F8F8F

717171

Shades & Tints Shades & Tints

#CED9CC

Dark

Light

#86D9CE

Dark

Light

#9CB1CF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ced9cc;
  --color-2: #86d9ce;
  --color-3: #9cb1cf;
  --color-4: #ad77ba;
  --color-5: #b4469c;
}

SCSS

$color-1: #ced9cc;
$color-2: #86d9ce;
$color-3: #9cb1cf;
$color-4: #ad77ba;
$color-5: #b4469c;

TAILWIND

colors: {
  'brand-1': '#ced9cc',
  'brand-2': '#86d9ce',
  'brand-3': '#9cb1cf',
  'brand-4': '#ad77ba',
  'brand-5': '#b4469c',
}

RGB Array

[206, 217, 204], [134, 217, 206], [156, 177, 207], [173, 119, 186], [180, 70, 156]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CED9CC, #86D9CE, #9CB1CF, #AD77BA, #B4469C 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: #ced9cc; --color-2: #86d9ce; --color-3: #9cb1cf; --color-4: #ad77ba; --color-5: #b4469c. 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