← Back to Editor

#77878D · #BCCECD · #A09F93 · #625A5E · #4A4554

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

#77878D

Slate Blue · SlateGray · Warm Gray

HEX
#77878D
RGB
rgb(119, 135, 141)
HSL
hsl(196, 9%, 51%)
HSB
hsb(196, 16%, 55%)
CMYK
cmyk(16%, 4%, 0%, 45%)
Oklch
oklch(61.2% 0.021 222.3)

Traditional「Slate Blue」· Paint「Warm Gray」· Creative Urban Concrete

#BCCECD

Jade · Silver · Glacier Blue

HEX
#BCCECD
RGB
rgb(188, 206, 205)
HSL
hsl(177, 16%, 77%)
HSB
hsb(177, 9%, 81%)
CMYK
cmyk(9%, 0%, 0%, 19%)
Oklch
oklch(83.8% 0.020 192.7)

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

#A09F93

Ash · DarkGray · Silver Sand

HEX
#A09F93
RGB
rgb(160, 159, 147)
HSL
hsl(55, 6%, 60%)
HSB
hsb(55, 8%, 63%)
CMYK
cmyk(0%, 1%, 8%, 37%)
Oklch
oklch(70.0% 0.017 103.0)

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

#625A5E

Ink Gray · DimGray · Charcoal

HEX
#625A5E
RGB
rgb(98, 90, 94)
HSL
hsl(330, 4%, 37%)
HSB
hsb(330, 8%, 38%)
CMYK
cmyk(0%, 8%, 4%, 62%)
Oklch
oklch(47.7% 0.012 345.8)

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

#4A4554

Deep Indigo · DarkSlateGray · Eggplant

HEX
#4A4554
RGB
rgb(74, 69, 84)
HSL
hsl(260, 10%, 30%)
HSB
hsb(260, 18%, 33%)
CMYK
cmyk(12%, 18%, 0%, 67%)
Oklch
oklch(40.1% 0.026 300.5)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

77878D
8D7D77

Analogous

778D88
77878D
777C8D

Triadic

77878D
8D7787
878D77

Split-Comp.

77878D
8D777C
8D8877

Tetradic

77878D
88778D
8D7D77
7C8D77

Contrast Matrix WCAG 2.1 Contrast

77878D
BCCECD
A09F93
625A5E
4A4554
—
2.3
Fail
1.4
Fail
1.8
Fail
2.5
Fail
2.3
Fail
—
1.6
Fail
4.1
AA Large
5.7
AA
1.4
Fail
1.6
Fail
—
2.5
Fail
3.5
AA Large
1.8
Fail
4.1
AA Large
2.5
Fail
—
1.4
Fail
2.5
Fail
5.7
AA
3.5
AA Large
1.4
Fail
—
White BG
3.7AA Large
1.6Fail
2.7Fail
6.7AA
9.2AAA
Black BG
5.6AA
12.8AAA
7.9AAA
3.1AA Large
2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7E7E8C
C4C4CD
A0A096
5F5E5D
484850

Deuteranopia

7D7C8B
C3C1CD
A0A097
5F605D
484950

Tritanopia

788A8A
BDCDCD
A09899
625C5C
4A4E4D

Achromatopsia

838383
C9C9C9
9E9E9E
5D5D5D
484848

Shades & Tints Shades & Tints

#77878D

Dark
Light

#BCCECD

Dark
Light

#A09F93

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #77878d;
  --color-2: #bccecd;
  --color-3: #a09f93;
  --color-4: #625a5e;
  --color-5: #4a4554;
}

SCSS

$color-1: #77878d;
$color-2: #bccecd;
$color-3: #a09f93;
$color-4: #625a5e;
$color-5: #4a4554;

TAILWIND

colors: {
  'brand-1': '#77878d',
  'brand-2': '#bccecd',
  'brand-3': '#a09f93',
  'brand-4': '#625a5e',
  'brand-5': '#4a4554',
}

RGB Array

[119, 135, 141], [188, 206, 205], [160, 159, 147], [98, 90, 94], [74, 69, 84]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #77878D, #BCCECD, #A09F93, #625A5E, #4A4554 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #77878d; --color-2: #bccecd; --color-3: #a09f93; --color-4: #625a5e; --color-5: #4a4554. 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. 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