← Back to Editor

#B8E9D8 · #A4A8AB · #C5E8DF · #C0CDD1 · #9CA6B8

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B8E9D8

Jade · LightBlue · Mint Green

HEX
#B8E9D8
RGB
rgb(184, 233, 216)
HSL
hsl(159, 53%, 82%)
HSB
hsb(159, 21%, 91%)
CMYK
cmyk(21%, 0%, 7%, 9%)
Oklch
oklch(89.5% 0.056 171.8)

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

#A4A8AB

Ash · DarkGray · Silver Sand

HEX
#A4A8AB
RGB
rgb(164, 168, 171)
HSL
hsl(206, 4%, 66%)
HSB
hsb(206, 4%, 67%)
CMYK
cmyk(4%, 2%, 0%, 33%)
Oklch
oklch(72.9% 0.006 239.9)

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

#C5E8DF

Jade · LightGray · Glacier Blue

HEX
#C5E8DF
RGB
rgb(197, 232, 223)
HSL
hsl(165, 43%, 84%)
HSB
hsb(165, 15%, 91%)
CMYK
cmyk(15%, 0%, 4%, 9%)
Oklch
oklch(90.3% 0.039 178.1)

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

#C0CDD1

Sky Blue · LightGray · Glacier Blue

HEX
#C0CDD1
RGB
rgb(192, 205, 209)
HSL
hsl(194, 16%, 79%)
HSB
hsb(194, 8%, 82%)
CMYK
cmyk(8%, 2%, 0%, 18%)
Oklch
oklch(84.0% 0.015 218.1)

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

#9CA6B8

Azure · DarkGray · Cobalt Blue

HEX
#9CA6B8
RGB
rgb(156, 166, 184)
HSL
hsl(219, 16%, 67%)
HSB
hsb(219, 15%, 72%)
CMYK
cmyk(15%, 10%, 0%, 28%)
Oklch
oklch(72.3% 0.028 262.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8E9D8
E9B9CA

Analogous

B9E9C0
B8E9D8
B9E2E9

Triadic

B8E9D8
D8B9E9
E9D8B9

Split-Comp.

B8E9D8
E9B9E2
E9C0B9

Tetradic

B8E9D8
C0B9E9
E9B9CA
E2E9B9

Contrast Matrix WCAG 2.1 Contrast

B8E9D8
A4A8AB
C5E8DF
C0CDD1
9CA6B8
—
1.8
Fail
1.0
Fail
1.2
Fail
1.8
Fail
1.8
Fail
—
1.8
Fail
1.5
Fail
1.0
Fail
1.0
Fail
1.8
Fail
—
1.2
Fail
1.9
Fail
1.2
Fail
1.5
Fail
1.2
Fail
—
1.5
Fail
1.8
Fail
1.0
Fail
1.9
Fail
1.5
Fail
—
White BG
1.3Fail
2.4Fail
1.3Fail
1.6Fail
2.5Fail
Black BG
15.7AAA
8.8AAA
16.0AAA
12.9AAA
8.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CDCEDC
A6A6AA
D4D4E1
C6C6D0
A0A0B4

Deuteranopia

CAC7DD
A6A5AA
D2CFE2
C5C4D0
A09FB3

Tritanopia

BADFE0
A4AAAA
C7E3E3
C1CFCF
9DB0AF

Achromatopsia

D8D8D8
A7A7A7
DDDDDD
CACACA
A5A5A5

Shades & Tints Shades & Tints

#B8E9D8

Dark
Light

#A4A8AB

Dark
Light

#C5E8DF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8e9d8;
  --color-2: #a4a8ab;
  --color-3: #c5e8df;
  --color-4: #c0cdd1;
  --color-5: #9ca6b8;
}

SCSS

$color-1: #b8e9d8;
$color-2: #a4a8ab;
$color-3: #c5e8df;
$color-4: #c0cdd1;
$color-5: #9ca6b8;

TAILWIND

colors: {
  'brand-1': '#b8e9d8',
  'brand-2': '#a4a8ab',
  'brand-3': '#c5e8df',
  'brand-4': '#c0cdd1',
  'brand-5': '#9ca6b8',
}

RGB Array

[184, 233, 216], [164, 168, 171], [197, 232, 223], [192, 205, 209], [156, 166, 184]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B8E9D8, #A4A8AB, #C5E8DF, #C0CDD1, #9CA6B8 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #b8e9d8; --color-2: #a4a8ab; --color-3: #c5e8df; --color-4: #c0cdd1; --color-5: #9ca6b8. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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