#CBFCF6 + #ADE9E2 + #C2C5CB + #DF94AD + #A2A897 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CBFCF6

Jade · Lavender · Glacier Blue

HEX

#CBFCF6

RGB

rgb(203, 252, 246)

HSL

hsl(173, 89%, 89%)

HSB

hsb(173, 19%, 99%)

CMYK

cmyk(19%, 0%, 2%, 1%)

Oklch

oklch(95.6% 0.050 187.2)

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

#ADE9E2

Jade · LightBlue · Glacier Blue

HEX

#ADE9E2

RGB

rgb(173, 233, 226)

HSL

hsl(173, 58%, 80%)

HSB

hsb(173, 26%, 91%)

CMYK

cmyk(26%, 0%, 3%, 9%)

Oklch

oklch(89.1% 0.061 187.2)

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

#C2C5CB

Azure · Silver · Pearl Gray

HEX

#C2C5CB

RGB

rgb(194, 197, 203)

HSL

hsl(220, 8%, 78%)

HSB

hsb(220, 4%, 80%)

CMYK

cmyk(4%, 3%, 0%, 20%)

Oklch

oklch(82.3% 0.009 264.5)

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

#DF94AD

Rouge · Tan · Rose Pink

HEX

#DF94AD

RGB

rgb(223, 148, 173)

HSL

hsl(340, 54%, 73%)

HSB

hsb(340, 34%, 87%)

CMYK

cmyk(0%, 34%, 22%, 13%)

Oklch

oklch(74.8% 0.095 358.1)

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

#A2A897

Willow Green · DarkGray · Silver Sand

HEX

#A2A897

RGB

rgb(162, 168, 151)

HSL

hsl(81, 9%, 63%)

HSB

hsb(81, 10%, 66%)

CMYK

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

Oklch

oklch(72.2% 0.025 122.9)

Traditional「Willow Green」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CBFCF6

FCCAD0

Analogous

CAFCDD

CBFCF6

CAE9FC

Triadic

CBFCF6

F6CAFC

FCF6CA

Split-Comp.

CBFCF6

FCCAE9

FCDDCA

Tetradic

CBFCF6

DDCAFC

FCCAD0

E9FCCA

Contrast Matrix WCAG 2.1 Contrast

CBFCF6	ADE9E2	C2C5CB	DF94AD	A2A897
—	1.2 Fail	1.5 Fail	2.1 Fail	2.2 Fail
1.2 Fail	—	1.3 Fail	1.7 Fail	1.8 Fail
1.5 Fail	1.3 Fail	—	1.4 Fail	1.4 Fail
2.1 Fail	1.7 Fail	1.4 Fail	—	1.0 Fail
2.2 Fail	1.8 Fail	1.4 Fail	1.0 Fail	—

White BG

1.1Fail

1.4Fail

1.7Fail

2.3Fail

2.4Fail

Black BG

18.8AAA

15.5AAA

12.1AAA

9.0AAA

8.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E1F7

C7C8E4

C3C3CA

BFBEA7

A5A59B

Deuteranopia

DDDAF8

C4BFE4

C3C3C9

C3C9A6

A4A49C

Tritanopia

CDF9F9

B0E5E5

C2C8C8

DBA2A1

A29E9F

Achromatopsia

EDEDED

D6D6D6

C5C5C5

ADADAD

A4A4A4

Shades & Tints Shades & Tints

#CBFCF6

Dark

Light

#ADE9E2

Dark

Light

#C2C5CB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cbfcf6;
  --color-2: #ade9e2;
  --color-3: #c2c5cb;
  --color-4: #df94ad;
  --color-5: #a2a897;
}

SCSS

$color-1: #cbfcf6;
$color-2: #ade9e2;
$color-3: #c2c5cb;
$color-4: #df94ad;
$color-5: #a2a897;

TAILWIND

colors: {
  'brand-1': '#cbfcf6',
  'brand-2': '#ade9e2',
  'brand-3': '#c2c5cb',
  'brand-4': '#df94ad',
  'brand-5': '#a2a897',
}

RGB Array

[203, 252, 246], [173, 233, 226], [194, 197, 203], [223, 148, 173], [162, 168, 151]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CBFCF6, #ADE9E2, #C2C5CB, #DF94AD, #A2A897 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: #cbfcf6; --color-2: #ade9e2; --color-3: #c2c5cb; --color-4: #df94ad; --color-5: #a2a897. 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