← Back to Editor

#BBB8B1 · #969A9D · #4C7FB8 · #555152 · #806F65

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#BBB8B1

Silver Gray · Silver · Pearl Gray

HEX
#BBB8B1
RGB
rgb(187, 184, 177)
HSL
hsl(42, 7%, 71%)
HSB
hsb(42, 5%, 73%)
CMYK
cmyk(0%, 2%, 5%, 27%)
Oklch
oklch(78.3% 0.010 87.5)

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

#969A9D

Ash · DarkGray · Silver Sand

HEX
#969A9D
RGB
rgb(150, 154, 157)
HSL
hsl(206, 3%, 60%)
HSB
hsb(206, 4%, 62%)
CMYK
cmyk(4%, 2%, 0%, 38%)
Oklch
oklch(68.4% 0.006 239.9)

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

#4C7FB8

Azure · SteelBlue · Navy Blue

HEX
#4C7FB8
RGB
rgb(76, 127, 184)
HSL
hsl(212, 43%, 51%)
HSB
hsb(212, 59%, 72%)
CMYK
cmyk(59%, 31%, 0%, 28%)
Oklch
oklch(58.6% 0.104 252.4)

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

#555152

Ink Gray · DarkSlateGray · Charcoal

HEX
#555152
RGB
rgb(85, 81, 82)
HSL
hsl(345, 2%, 33%)
HSB
hsb(345, 5%, 33%)
CMYK
cmyk(0%, 5%, 4%, 67%)
Oklch
oklch(43.9% 0.005 0.2)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#806F65

Tangerine · DimGray · Amber Brown

HEX
#806F65
RGB
rgb(128, 111, 101)
HSL
hsl(22, 12%, 45%)
HSB
hsb(22, 21%, 50%)
CMYK
cmyk(0%, 13%, 21%, 50%)
Oklch
oklch(55.5% 0.026 52.4)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBB8B1
B0B3BA

Analogous

BAB2B0
BBB8B1
B8BAB0

Triadic

BBB8B1
B0BAB7
B7B0BA

Split-Comp.

BBB8B1
B0B8BA
B2B0BA

Tetradic

BBB8B1
B0BAB2
B0B3BA
BAB0B8

Contrast Matrix WCAG 2.1 Contrast

BBB8B1
969A9D
4C7FB8
555152
806F65
—
1.4
Fail
2.1
Fail
3.9
AA Large
2.4
Fail
1.4
Fail
—
1.5
Fail
2.8
Fail
1.7
Fail
2.1
Fail
1.5
Fail
—
1.9
Fail
1.1
Fail
3.9
AA Large
2.8
Fail
1.9
Fail
—
1.6
Fail
2.4
Fail
1.7
Fail
1.1
Fail
1.6
Fail
—
White BG
2.0Fail
2.8Fail
4.2AA Large
7.8AAA
4.8AA
Black BG
10.6AAA
7.4AAA
5.0AA
2.7Fail
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

BABAB3
98989C
6263AA
535352
797867

Deuteranopia

BABAB3
98979C
5F5BA7
545452
7A7B68

Tritanopia

BBB4B4
969C9C
4F9F9D
555252
7F696A

Achromatopsia

B8B8B8
999999
767676
525252
737373

Shades & Tints Shades & Tints

#BBB8B1

Dark
Light

#969A9D

Dark
Light

#4C7FB8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bbb8b1;
  --color-2: #969a9d;
  --color-3: #4c7fb8;
  --color-4: #555152;
  --color-5: #806f65;
}

SCSS

$color-1: #bbb8b1;
$color-2: #969a9d;
$color-3: #4c7fb8;
$color-4: #555152;
$color-5: #806f65;

TAILWIND

colors: {
  'brand-1': '#bbb8b1',
  'brand-2': '#969a9d',
  'brand-3': '#4c7fb8',
  'brand-4': '#555152',
  'brand-5': '#806f65',
}

RGB Array

[187, 184, 177], [150, 154, 157], [76, 127, 184], [85, 81, 82], [128, 111, 101]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BBB8B1, #969A9D, #4C7FB8, #555152, #806F65 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: #bbb8b1; --color-2: #969a9d; --color-3: #4c7fb8; --color-4: #555152; --color-5: #806f65. 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