#C5CCFF + #BABDD2 + #AFAEA5 + #CC7895 + #EA4385 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C5CCFF

Azure · LightBlue · Sky Blue

HEX

#C5CCFF

RGB

rgb(197, 204, 255)

HSL

hsl(233, 100%, 89%)

HSB

hsb(233, 23%, 100%)

CMYK

cmyk(23%, 20%, 0%, 0%)

Oklch

oklch(85.7% 0.071 278.7)

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

#BABDD2

Azure · LightSteelBlue · Cobalt Blue

HEX

#BABDD2

RGB

rgb(186, 189, 210)

HSL

hsl(232, 21%, 78%)

HSB

hsb(232, 11%, 82%)

CMYK

cmyk(11%, 10%, 0%, 18%)

Oklch

oklch(80.3% 0.030 279.2)

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

#AFAEA5

Ash · DarkGray · Silver Sand

HEX

#AFAEA5

RGB

rgb(175, 174, 165)

HSL

hsl(54, 6%, 67%)

HSB

hsb(54, 6%, 69%)

CMYK

cmyk(0%, 1%, 6%, 31%)

Oklch

oklch(74.9% 0.013 101.6)

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

#CC7895

Rouge · LightCoral · Rose Pink

HEX

#CC7895

RGB

rgb(204, 120, 149)

HSL

hsl(339, 45%, 64%)

HSB

hsb(339, 41%, 80%)

CMYK

cmyk(0%, 41%, 27%, 20%)

Oklch

oklch(67.2% 0.110 358.3)

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

#EA4385

Dark Violet · DeepPink · Rose Pink

HEX

#EA4385

RGB

rgb(234, 67, 133)

HSL

hsl(336, 80%, 59%)

HSB

hsb(336, 71%, 92%)

CMYK

cmyk(0%, 71%, 43%, 8%)

Oklch

oklch(64.2% 0.208 1.0)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C5CCFF

FFF8C7

Analogous

C7E9FF

C5CCFF

DCC7FF

Triadic

C5CCFF

FFC7CD

CDFFC7

Split-Comp.

C5CCFF

FFDCC7

E9FFC7

Tetradic

C5CCFF

FFC7E9

FFF8C7

C7FFDC

Contrast Matrix WCAG 2.1 Contrast

C5CCFF	BABDD2	AFAEA5	CC7895	EA4385
—	1.2 Fail	1.4 Fail	2.0 Fail	2.4 Fail
1.2 Fail	—	1.2 Fail	1.7 Fail	2.0 Fail
1.4 Fail	1.2 Fail	—	1.4 Fail	1.7 Fail
2.0 Fail	1.7 Fail	1.4 Fail	—	1.2 Fail
2.4 Fail	2.0 Fail	1.7 Fail	1.2 Fail	—

White BG

1.6Fail

1.9Fail

2.2Fail

3.1AA Large

3.7AA Large

Black BG

13.5AAA

11.3AAA

9.4AAA

6.7AA

5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C8C8F3

BBBBCD

AFAFA7

A8A78E

A2A075

Deuteranopia

C8C7F0

BBBBCC

AFAFA8

ADB38C

ABB871

Tritanopia

C5E9E7

BAC9C8

AFA9A9

C88887

E26866

Achromatopsia

D0D0D0

BEBEBE

ADADAD

949494

7C7C7C

Shades & Tints Shades & Tints

#C5CCFF

Dark

Light

#BABDD2

Dark

Light

#AFAEA5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c5ccff;
  --color-2: #babdd2;
  --color-3: #afaea5;
  --color-4: #cc7895;
  --color-5: #ea4385;
}

SCSS

$color-1: #c5ccff;
$color-2: #babdd2;
$color-3: #afaea5;
$color-4: #cc7895;
$color-5: #ea4385;

TAILWIND

colors: {
  'brand-1': '#c5ccff',
  'brand-2': '#babdd2',
  'brand-3': '#afaea5',
  'brand-4': '#cc7895',
  'brand-5': '#ea4385',
}

RGB Array

[197, 204, 255], [186, 189, 210], [175, 174, 165], [204, 120, 149], [234, 67, 133]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C5CCFF, #BABDD2, #AFAEA5, #CC7895, #EA4385 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: #c5ccff; --color-2: #babdd2; --color-3: #afaea5; --color-4: #cc7895; --color-5: #ea4385. 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