#C2DADA + #B7CCE2 + #AFB8E0 + #B0A2DC + #BF8ACF - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C2DADA

Sky Blue · LightGray · Glacier Blue

HEX

#C2DADA

RGB

rgb(194, 218, 218)

HSL

hsl(180, 24%, 81%)

HSB

hsb(180, 11%, 85%)

CMYK

cmyk(11%, 0%, 0%, 15%)

Oklch

oklch(87.1% 0.026 196.7)

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

#B7CCE2

Azure · LightSteelBlue · Cobalt Blue

HEX

#B7CCE2

RGB

rgb(183, 204, 226)

HSL

hsl(211, 43%, 80%)

HSB

hsb(211, 19%, 89%)

CMYK

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

Oklch

oklch(83.6% 0.038 249.5)

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

#AFB8E0

Azure · LightSteelBlue · Cobalt Blue

HEX

#AFB8E0

RGB

rgb(175, 184, 224)

HSL

hsl(229, 44%, 78%)

HSB

hsb(229, 22%, 88%)

CMYK

cmyk(22%, 18%, 0%, 12%)

Oklch

oklch(78.9% 0.058 275.1)

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

#B0A2DC

Wisteria · LightSteelBlue · Cobalt Blue

HEX

#B0A2DC

RGB

rgb(176, 162, 220)

HSL

hsl(254, 45%, 75%)

HSB

hsb(254, 26%, 86%)

CMYK

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

Oklch

oklch(74.5% 0.084 295.4)

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

#BF8ACF

Lilac · Orchid · Lilac Purple

HEX

#BF8ACF

RGB

rgb(191, 138, 207)

HSL

hsl(286, 42%, 68%)

HSB

hsb(286, 33%, 81%)

CMYK

cmyk(8%, 33%, 0%, 19%)

Oklch

oklch(70.9% 0.114 318.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C2DADA

DAC3C3

Analogous

C3DACF

C2DADA

C3CFDA

Triadic

C2DADA

DAC3DA

DADAC3

Split-Comp.

C2DADA

DAC3CF

DACFC3

Tetradic

C2DADA

CFC3DA

DAC3C3

CFDAC3

Contrast Matrix WCAG 2.1 Contrast

C2DADA	B7CCE2	AFB8E0	B0A2DC	BF8ACF
—	1.1 Fail	1.3 Fail	1.6 Fail	1.8 Fail
1.1 Fail	—	1.2 Fail	1.4 Fail	1.6 Fail
1.3 Fail	1.2 Fail	—	1.2 Fail	1.4 Fail
1.6 Fail	1.4 Fail	1.2 Fail	—	1.2 Fail
1.8 Fail	1.6 Fail	1.4 Fail	1.2 Fail	—

White BG

1.5Fail

1.6Fail

2.0Fail

2.3Fail

2.7Fail

Black BG

14.3AAA

12.7AAA

10.8AAA

9.0AAA

7.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCDDA

C0C0DD

B3B3D6

AAAACE

A8A8BE

Deuteranopia

CBC9DA

BFBDDB

B2B2D4

ABACCB

ABAFBA

Tritanopia

C3DADA

B8D8D8

AFCFCD

AFC3C0

BCB1AE

Achromatopsia

D3D3D3

C8C8C8

BABABA

ADADAD

A2A2A2

Shades & Tints Shades & Tints

#C2DADA

Dark

Light

#B7CCE2

Dark

Light

#AFB8E0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c2dada;
  --color-2: #b7cce2;
  --color-3: #afb8e0;
  --color-4: #b0a2dc;
  --color-5: #bf8acf;
}

SCSS

$color-1: #c2dada;
$color-2: #b7cce2;
$color-3: #afb8e0;
$color-4: #b0a2dc;
$color-5: #bf8acf;

TAILWIND

colors: {
  'brand-1': '#c2dada',
  'brand-2': '#b7cce2',
  'brand-3': '#afb8e0',
  'brand-4': '#b0a2dc',
  'brand-5': '#bf8acf',
}

RGB Array

[194, 218, 218], [183, 204, 226], [175, 184, 224], [176, 162, 220], [191, 138, 207]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C2DADA, #B7CCE2, #AFB8E0, #B0A2DC, #BF8ACF 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: #c2dada; --color-2: #b7cce2; --color-3: #afb8e0; --color-4: #b0a2dc; --color-5: #bf8acf. 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