#DCAFBC + #C5C1C7 + #AED3D2 + #97E6DE + #BAD3E2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DCAFBC

Rouge · Silver · Cherry Blossom

HEX

#DCAFBC

RGB

rgb(220, 175, 188)

HSL

hsl(343, 39%, 77%)

HSB

hsb(343, 20%, 86%)

CMYK

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

Oklch

oklch(79.8% 0.055 359.3)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#C5C1C7

Silver Gray · Silver · Pearl Gray

HEX

#C5C1C7

RGB

rgb(197, 193, 199)

HSL

hsl(280, 5%, 77%)

HSB

hsb(280, 3%, 78%)

CMYK

cmyk(1%, 3%, 0%, 22%)

Oklch

oklch(81.6% 0.009 314.8)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#AED3D2

Jade · LightSteelBlue · Lake Green

HEX

#AED3D2

RGB

rgb(174, 211, 210)

HSL

hsl(178, 30%, 75%)

HSB

hsb(178, 18%, 83%)

CMYK

cmyk(18%, 0%, 0%, 17%)

Oklch

oklch(84.0% 0.039 194.4)

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

#97E6DE

Jade · LightBlue · Lake Green

HEX

#97E6DE

RGB

rgb(151, 230, 222)

HSL

hsl(174, 61%, 75%)

HSB

hsb(174, 34%, 90%)

CMYK

cmyk(34%, 0%, 3%, 10%)

Oklch

oklch(87.2% 0.079 187.8)

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

#BAD3E2

Sky Blue · LightBlue · Sky Blue

HEX

#BAD3E2

RGB

rgb(186, 211, 226)

HSL

hsl(203, 41%, 81%)

HSB

hsb(203, 18%, 89%)

CMYK

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

Oklch

oklch(85.3% 0.034 234.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DCAFBC

ADDBCE

Analogous

DBADD1

DCAFBC

DBB7AD

Triadic

DCAFBC

BADBAD

ADBADB

Split-Comp.

DCAFBC

ADDBB7

ADD1DB

Tetradic

DCAFBC

D1DBAD

ADDBCE

B7ADDB

Contrast Matrix WCAG 2.1 Contrast

DCAFBC	C5C1C7	AED3D2	97E6DE	BAD3E2
—	1.1 Fail	1.2 Fail	1.3 Fail	1.2 Fail
1.1 Fail	—	1.1 Fail	1.2 Fail	1.1 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.0 Fail
1.3 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
1.2 Fail	1.1 Fail	1.0 Fail	1.1 Fail	—

White BG

1.9Fail

1.8Fail

1.6Fail

1.4Fail

1.6Fail

Black BG

10.9AAA

11.8AAA

13.0AAA

14.7AAA

13.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9C8B9

C3C3C6

BEBED2

B9BAE0

C5C5DE

Deuteranopia

CBCFB8

C4C4C5

BCB9D2

B5AFE0

C3C2DE

Tritanopia

DAB6B6

C5C4C4

B0D2D2

9BE1E2

BBDCDB

Achromatopsia

BEBEBE

C3C3C3

C8C8C8

CDCDCD

Shades & Tints Shades & Tints

#DCAFBC

Dark

Light

#C5C1C7

Dark

Light

#AED3D2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dcafbc;
  --color-2: #c5c1c7;
  --color-3: #aed3d2;
  --color-4: #97e6de;
  --color-5: #bad3e2;
}

SCSS

$color-1: #dcafbc;
$color-2: #c5c1c7;
$color-3: #aed3d2;
$color-4: #97e6de;
$color-5: #bad3e2;

TAILWIND

colors: {
  'brand-1': '#dcafbc',
  'brand-2': '#c5c1c7',
  'brand-3': '#aed3d2',
  'brand-4': '#97e6de',
  'brand-5': '#bad3e2',
}

RGB Array

[220, 175, 188], [197, 193, 199], [174, 211, 210], [151, 230, 222], [186, 211, 226]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DCAFBC, #C5C1C7, #AED3D2, #97E6DE, #BAD3E2 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: #dcafbc; --color-2: #c5c1c7; --color-3: #aed3d2; --color-4: #97e6de; --color-5: #bad3e2. 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