← Back to Editor

#BCC0B8 · #888D7F · #776F51 · #652B0D · #20115E

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 LibraryData Visualization

Color Details Color Details

#BCC0B8

Silver Gray · Silver · Pearl Gray

HEX
#BCC0B8
RGB
rgb(188, 192, 184)
HSL
hsl(90, 6%, 74%)
HSB
hsb(90, 4%, 75%)
CMYK
cmyk(2%, 0%, 4%, 25%)
Oklch
oklch(80.2% 0.012 128.6)

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

#888D7F

Ash · Gray · Warm Gray

HEX
#888D7F
RGB
rgb(136, 141, 127)
HSL
hsl(81, 6%, 53%)
HSB
hsb(81, 10%, 55%)
CMYK
cmyk(4%, 0%, 10%, 45%)
Oklch
oklch(63.5% 0.021 123.0)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#776F51

Ochre · DimGray · Honey Gold

HEX
#776F51
RGB
rgb(119, 111, 81)
HSL
hsl(47, 19%, 39%)
HSB
hsb(47, 32%, 47%)
CMYK
cmyk(0%, 7%, 32%, 53%)
Oklch
oklch(54.1% 0.045 94.9)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#652B0D

Tangerine · Maroon · Cinnamon

HEX
#652B0D
RGB
rgb(101, 43, 13)
HSL
hsl(20, 77%, 22%)
HSB
hsb(20, 87%, 40%)
CMYK
cmyk(0%, 57%, 87%, 60%)
Oklch
oklch(36.5% 0.093 44.6)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#20115E

Deep Indigo · MidnightBlue · Prussian Blue

HEX
#20115E
RGB
rgb(32, 17, 94)
HSL
hsl(252, 69%, 22%)
HSB
hsb(252, 82%, 37%)
CMYK
cmyk(66%, 82%, 0%, 63%)
Oklch
oklch(26.1% 0.127 282.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BCC0B8
BDB9C1

Analogous

C1C1B9
BCC0B8
B9C1B9

Triadic

BCC0B8
B9BDC1
C1B9BD

Split-Comp.

BCC0B8
B9B9C1
C1B9C1

Tetradic

BCC0B8
B9C1C1
BDB9C1
C1B9B9

Contrast Matrix WCAG 2.1 Contrast

BCC0B8
888D7F
776F51
652B0D
20115E
—
1.8
Fail
2.7
Fail
6.0
AA
8.7
AAA
1.8
Fail
—
1.5
Fail
3.2
AA Large
4.7
AA
2.7
Fail
1.5
Fail
—
2.2
Fail
3.2
AA Large
6.0
AA
3.2
AA Large
2.2
Fail
—
1.5
Fail
8.7
AAA
4.7
AA
3.2
AA Large
1.5
Fail
—
White BG
1.8Fail
3.4AA Large
5.0AA
11.0AAA
16.1AAA
Black BG
11.4AAA
6.2AA
4.2AA Large
1.9Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BEBEBA
8A8A82
747358
4C4B14
1A194B

Deuteranopia

BEBDBA
8A8A83
74755A
4F5416
1A1C47

Tritanopia

BCBBBC
888586
775E5F
621A1B
1F3D39

Achromatopsia

BEBEBE
8A8A8A
6E6E6E
393939
1E1E1E

Shades & Tints Shades & Tints

#BCC0B8

Dark
Light

#888D7F

Dark
Light

#776F51

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bcc0b8;
  --color-2: #888d7f;
  --color-3: #776f51;
  --color-4: #652b0d;
  --color-5: #20115e;
}

SCSS

$color-1: #bcc0b8;
$color-2: #888d7f;
$color-3: #776f51;
$color-4: #652b0d;
$color-5: #20115e;

TAILWIND

colors: {
  'brand-1': '#bcc0b8',
  'brand-2': '#888d7f',
  'brand-3': '#776f51',
  'brand-4': '#652b0d',
  'brand-5': '#20115e',
}

RGB Array

[188, 192, 184], [136, 141, 127], [119, 111, 81], [101, 43, 13], [32, 17, 94]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BCC0B8, #888D7F, #776F51, #652B0D, #20115E is ideal for: 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: #bcc0b8; --color-2: #888d7f; --color-3: #776f51; --color-4: #652b0d; --color-5: #20115e. 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. 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 general-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