#B8C6A9 + #ABC7B9 + #A1CFC5 + #BDC7D9 + #DCC7FF · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B8C6A9

Willow Green · Silver · Apple Green

HEX

#B8C6A9

RGB

rgb(184, 198, 169)

HSL

hsl(89, 20%, 72%)

HSB

hsb(89, 15%, 78%)

CMYK

cmyk(7%, 0%, 15%, 22%)

Oklch

oklch(80.8% 0.043 128.4)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#ABC7B9

Jade · Silver · Apple Green

HEX

#ABC7B9

RGB

rgb(171, 199, 185)

HSL

hsl(150, 20%, 73%)

HSB

hsb(150, 14%, 78%)

CMYK

cmyk(14%, 0%, 7%, 22%)

Oklch

oklch(80.5% 0.036 163.9)

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

#A1CFC5

Jade · LightSteelBlue · Lake Green

HEX

#A1CFC5

RGB

rgb(161, 207, 197)

HSL

hsl(167, 32%, 72%)

HSB

hsb(167, 22%, 81%)

CMYK

cmyk(22%, 0%, 5%, 19%)

Oklch

oklch(81.9% 0.050 180.2)

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

#BDC7D9

Azure · LightSteelBlue · Cobalt Blue

HEX

#BDC7D9

RGB

rgb(189, 199, 217)

HSL

hsl(219, 27%, 80%)

HSB

hsb(219, 13%, 85%)

CMYK

cmyk(13%, 8%, 0%, 15%)

Oklch

oklch(82.8% 0.028 262.3)

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

#DCC7FF

Wisteria · Lavender · Lavender

HEX

#DCC7FF

RGB

rgb(220, 199, 255)

HSL

hsl(263, 100%, 89%)

HSB

hsb(263, 22%, 100%)

CMYK

cmyk(14%, 22%, 0%, 0%)

Oklch

oklch(86.5% 0.079 301.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8C6A9

B7A9C6

Analogous

C6C5A9

B8C6A9

AAC6A9

Triadic

B8C6A9

A9B8C6

C6A9B8

Split-Comp.

B8C6A9

A9AAC6

C5A9C6

Tetradic

B8C6A9

A9C6C5

B7A9C6

C6A9AA

Contrast Matrix WCAG 2.1 Contrast

B8C6A9	ABC7B9	A1CFC5	BDC7D9	DCC7FF
—	1.0 Fail	1.0 Fail	1.1 Fail	1.2 Fail
1.0 Fail	—	1.1 Fail	1.1 Fail	1.2 Fail
1.0 Fail	1.1 Fail	—	1.0 Fail	1.1 Fail
1.1 Fail	1.1 Fail	1.0 Fail	—	1.1 Fail
1.2 Fail	1.2 Fail	1.1 Fail	1.1 Fail	—

White BG

1.8Fail

1.7Fail

1.5Fail

Black BG

11.7AAA

11.6AAA

12.2AAA

12.3AAA

13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BEBEB0

B7B7BC

B5B5C7

C1C1D5

D3D3F1

Deuteranopia

BDBCB2

B6B3BD

B2AFC8

C1C0D4

D4D6EE

Tritanopia

B9B6B7

ACBFC0

A3C9CA

BDD1D0

DBE7E4

Achromatopsia

BFBFBF

BDBDBD

C0C0C0

C6C6C6

D4D4D4

Shades & Tints Shades & Tints

#B8C6A9

Dark

Light

#ABC7B9

Dark

Light

#A1CFC5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8c6a9;
  --color-2: #abc7b9;
  --color-3: #a1cfc5;
  --color-4: #bdc7d9;
  --color-5: #dcc7ff;
}

SCSS

$color-1: #b8c6a9;
$color-2: #abc7b9;
$color-3: #a1cfc5;
$color-4: #bdc7d9;
$color-5: #dcc7ff;

TAILWIND

colors: {
  'brand-1': '#b8c6a9',
  'brand-2': '#abc7b9',
  'brand-3': '#a1cfc5',
  'brand-4': '#bdc7d9',
  'brand-5': '#dcc7ff',
}

RGB Array

[184, 198, 169], [171, 199, 185], [161, 207, 197], [189, 199, 217], [220, 199, 255]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #B8C6A9, #ABC7B9, #A1CFC5, #BDC7D9, #DCC7FF 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: #b8c6a9; --color-2: #abc7b9; --color-3: #a1cfc5; --color-4: #bdc7d9; --color-5: #dcc7ff. 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 cool-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