← Back to Editor

#B2B9B7 · #93B5B0 · #5AB4B4 · #3BA6AE · #515787

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B2B9B7

Silver Gray · Silver · Pearl Gray

HEX
#B2B9B7
RGB
rgb(178, 185, 183)
HSL
hsl(163, 5%, 71%)
HSB
hsb(163, 4%, 73%)
CMYK
cmyk(4%, 0%, 1%, 27%)
Oklch
oklch(78.0% 0.008 177.3)

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

#93B5B0

Jade · DarkGray · Lake Green

HEX
#93B5B0
RGB
rgb(147, 181, 176)
HSL
hsl(171, 19%, 64%)
HSB
hsb(171, 19%, 71%)
CMYK
cmyk(19%, 0%, 3%, 29%)
Oklch
oklch(74.6% 0.038 185.5)

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

#5AB4B4

Slate Blue · MediumAquaMarine · Lake Green

HEX
#5AB4B4
RGB
rgb(90, 180, 180)
HSL
hsl(180, 38%, 53%)
HSB
hsb(180, 50%, 71%)
CMYK
cmyk(50%, 0%, 0%, 29%)
Oklch
oklch(71.5% 0.086 195.4)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#3BA6AE

Slate Blue · LightSeaGreen · Mint Ice

HEX
#3BA6AE
RGB
rgb(59, 166, 174)
HSL
hsl(184, 49%, 46%)
HSB
hsb(184, 66%, 68%)
CMYK
cmyk(66%, 5%, 0%, 32%)
Oklch
oklch(66.8% 0.096 202.2)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#515787

Indigo · DarkSlateBlue · Navy Blue

HEX
#515787
RGB
rgb(81, 87, 135)
HSL
hsl(233, 25%, 42%)
HSB
hsb(233, 40%, 53%)
CMYK
cmyk(40%, 36%, 0%, 47%)
Oklch
oklch(47.3% 0.078 277.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B2B9B7
B9B1B3

Analogous

B1B9B3
B2B9B7
B1B7B9

Triadic

B2B9B7
B7B1B9
B9B7B1

Split-Comp.

B2B9B7
B9B1B7
B9B3B1

Tetradic

B2B9B7
B3B1B9
B9B1B3
B7B9B1

Contrast Matrix WCAG 2.1 Contrast

B2B9B7
93B5B0
5AB4B4
3BA6AE
515787
—
1.1
Fail
1.2
Fail
1.5
Fail
3.4
AA Large
1.1
Fail
—
1.1
Fail
1.3
Fail
3.1
AA Large
1.2
Fail
1.1
Fail
—
1.2
Fail
2.8
Fail
1.5
Fail
1.3
Fail
1.2
Fail
—
2.4
Fail
3.4
AA Large
3.1
AA Large
2.8
Fail
2.4
Fail
—
White BG
2.0Fail
2.2Fail
2.4Fail
2.9Fail
6.9AA
Black BG
10.5AAA
9.5AAA
8.6AAA
7.3AAA
3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B5B7
A2A2B1
8182B4
696AAC
54547B

Deuteranopia

B5B4B8
A09DB2
7C75B4
635BAC
535379

Tritanopia

B2B8B8
95B2B2
5FB4B4
40ABAA
517270

Achromatopsia

B7B7B7
AAAAAA
999999
878787
5B5B5B

Shades & Tints Shades & Tints

#B2B9B7

Dark
Light

#93B5B0

Dark
Light

#5AB4B4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b2b9b7;
  --color-2: #93b5b0;
  --color-3: #5ab4b4;
  --color-4: #3ba6ae;
  --color-5: #515787;
}

SCSS

$color-1: #b2b9b7;
$color-2: #93b5b0;
$color-3: #5ab4b4;
$color-4: #3ba6ae;
$color-5: #515787;

TAILWIND

colors: {
  'brand-1': '#b2b9b7',
  'brand-2': '#93b5b0',
  'brand-3': '#5ab4b4',
  'brand-4': '#3ba6ae',
  'brand-5': '#515787',
}

RGB Array

[178, 185, 183], [147, 181, 176], [90, 180, 180], [59, 166, 174], [81, 87, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B2B9B7, #93B5B0, #5AB4B4, #3BA6AE, #515787 is ideal for: brand design, premium product pages, magazine layouts. 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: #b2b9b7; --color-2: #93b5b0; --color-3: #5ab4b4; --color-4: #3ba6ae; --color-5: #515787. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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. 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