← Back to Editor

#BBBDC9 · #C2B7D9 · #A4BEE1 · #93C7F6 · #333947

dark

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#BBBDC9

Azure · Silver · Cobalt Blue

HEX
#BBBDC9
RGB
rgb(187, 189, 201)
HSL
hsl(231, 11%, 76%)
HSB
hsb(231, 7%, 79%)
CMYK
cmyk(7%, 6%, 0%, 21%)
Oklch
oklch(80.0% 0.017 278.4)

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

#C2B7D9

Wisteria · LightSteelBlue · Cobalt Blue

HEX
#C2B7D9
RGB
rgb(194, 183, 217)
HSL
hsl(259, 31%, 78%)
HSB
hsb(259, 16%, 85%)
CMYK
cmyk(11%, 16%, 0%, 15%)
Oklch
oklch(79.9% 0.049 300.1)

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

#A4BEE1

Azure · LightSteelBlue · Cobalt Blue

HEX
#A4BEE1
RGB
rgb(164, 190, 225)
HSL
hsl(214, 50%, 76%)
HSB
hsb(214, 27%, 88%)
CMYK
cmyk(27%, 16%, 0%, 12%)
Oklch
oklch(79.4% 0.057 255.9)

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

#93C7F6

Sky Blue · LightSkyBlue · Cobalt Blue

HEX
#93C7F6
RGB
rgb(147, 199, 246)
HSL
hsl(208, 85%, 77%)
HSB
hsb(208, 40%, 96%)
CMYK
cmyk(40%, 19%, 0%, 4%)
Oklch
oklch(81.0% 0.086 246.4)

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

#333947

Indigo · DarkSlateGray · Prussian Blue

HEX
#333947
RGB
rgb(51, 57, 71)
HSL
hsl(222, 16%, 24%)
HSB
hsb(222, 28%, 28%)
CMYK
cmyk(28%, 20%, 0%, 72%)
Oklch
oklch(34.5% 0.026 266.8)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBBDC9
C9C7BB

Analogous

BBC4C9
BBBDC9
C0BBC9

Triadic

BBBDC9
C9BBBD
BDC9BB

Split-Comp.

BBBDC9
C9C0BB
C4C9BB

Tetradic

BBBDC9
C9BBC4
C9C7BB
BBC9C0

Contrast Matrix WCAG 2.1 Contrast

BBBDC9
C2B7D9
A4BEE1
93C7F6
333947
—
1.0
Fail
1.0
Fail
1.0
Fail
6.2
AA
1.0
Fail
—
1.0
Fail
1.1
Fail
6.1
AA
1.0
Fail
1.0
Fail
—
1.1
Fail
6.1
AA
1.0
Fail
1.1
Fail
1.1
Fail
—
6.5
AA
6.2
AA
6.1
AA
6.1
AA
6.5
AA
—
White BG
1.9Fail
1.9Fail
1.9Fail
1.8Fail
11.6AAA
Black BG
11.2AAA
11.1AAA
11.0AAA
11.7AAA
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BCBCC6
BDBDD1
AFAFD9
AAAAEB
363644

Deuteranopia

BCBCC5
BEBFCF
AEACD7
A7A3E8
353543

Tritanopia

BBC4C3
C1CAC9
A5D2D0
96E2E0
334140

Achromatopsia

BEBEBE
BEBEBE
BABABA
BDBDBD
393939

Shades & Tints Shades & Tints

#BBBDC9

Dark
Light

#C2B7D9

Dark
Light

#A4BEE1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bbbdc9;
  --color-2: #c2b7d9;
  --color-3: #a4bee1;
  --color-4: #93c7f6;
  --color-5: #333947;
}

SCSS

$color-1: #bbbdc9;
$color-2: #c2b7d9;
$color-3: #a4bee1;
$color-4: #93c7f6;
$color-5: #333947;

TAILWIND

colors: {
  'brand-1': '#bbbdc9',
  'brand-2': '#c2b7d9',
  'brand-3': '#a4bee1',
  'brand-4': '#93c7f6',
  'brand-5': '#333947',
}

RGB Array

[187, 189, 201], [194, 183, 217], [164, 190, 225], [147, 199, 246], [51, 57, 71]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #BBBDC9, #C2B7D9, #A4BEE1, #93C7F6, #333947 is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #bbbdc9; --color-2: #c2b7d9; --color-3: #a4bee1; --color-4: #93c7f6; --color-5: #333947. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 dark-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