← Back to Editor

#535749 · #BFBFBF · #577572 · #77D1C8 · #203836

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

#535749

Grass Green · DarkOliveGreen · Charcoal

HEX
#535749
RGB
rgb(83, 87, 73)
HSL
hsl(77, 9%, 31%)
HSB
hsb(77, 16%, 34%)
CMYK
cmyk(5%, 0%, 16%, 66%)
Oklch
oklch(44.9% 0.023 120.3)

Traditional「Grass Green」· Paint「Charcoal」· Creative Midnight Shadow

#BFBFBF

Silver Gray · Silver · Pearl Gray

HEX
#BFBFBF
RGB
rgb(191, 191, 191)
HSL
hsl(0, 0%, 75%)
HSB
hsb(0, 0%, 75%)
CMYK
cmyk(0%, 0%, 0%, 25%)
Oklch
oklch(80.5% 0.000 89.9)

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

#577572

Mineral Blue · DimGray · Mint Ice

HEX
#577572
RGB
rgb(87, 117, 114)
HSL
hsl(174, 15%, 40%)
HSB
hsb(174, 26%, 46%)
CMYK
cmyk(26%, 0%, 3%, 54%)
Oklch
oklch(53.8% 0.035 188.5)

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

#77D1C8

Jade · MediumAquaMarine · Lake Green

HEX
#77D1C8
RGB
rgb(119, 209, 200)
HSL
hsl(174, 49%, 64%)
HSB
hsb(174, 43%, 82%)
CMYK
cmyk(43%, 0%, 4%, 18%)
Oklch
oklch(80.2% 0.088 187.3)

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

#203836

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#203836
RGB
rgb(32, 56, 54)
HSL
hsl(175, 27%, 17%)
HSB
hsb(175, 43%, 22%)
CMYK
cmyk(43%, 0%, 4%, 78%)
Oklch
oklch(32.0% 0.030 189.1)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

535749
4C4856

Analogous

565348
535749
4B5648

Triadic

535749
485256
564852

Split-Comp.

535749
484B56
534856

Tetradic

535749
485653
4C4856
56484B

Contrast Matrix WCAG 2.1 Contrast

535749
BFBFBF
577572
77D1C8
203836
—
4.0
AA Large
1.5
Fail
4.2
AA Large
1.7
Fail
4.0
AA Large
—
2.7
Fail
1.0
Fail
6.8
AA
1.5
Fail
2.7
Fail
—
2.8
Fail
2.5
Fail
4.2
AA Large
1.0
Fail
2.8
Fail
—
7.0
AA
1.7
Fail
6.8
AA
2.5
Fail
7.0
AA
—
White BG
7.4AAA
1.8Fail
5.0AA
1.8Fail
12.5AAA
Black BG
2.8Fail
11.4AAA
4.2AA Large
11.7AAA
1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

55554C
BFBFBF
646473
9E9FCA
2A2B36

Deuteranopia

55544D
BFBFBF
626073
9992CB
292737

Tritanopia

534F50
BFBFBF
587373
7CCCCC
213737

Achromatopsia

545454
BFBFBF
6C6C6C
B5B5B5
313131

Shades & Tints Shades & Tints

#535749

Dark
Light

#BFBFBF

Dark
Light

#577572

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #535749;
  --color-2: #bfbfbf;
  --color-3: #577572;
  --color-4: #77d1c8;
  --color-5: #203836;
}

SCSS

$color-1: #535749;
$color-2: #bfbfbf;
$color-3: #577572;
$color-4: #77d1c8;
$color-5: #203836;

TAILWIND

colors: {
  'brand-1': '#535749',
  'brand-2': '#bfbfbf',
  'brand-3': '#577572',
  'brand-4': '#77d1c8',
  'brand-5': '#203836',
}

RGB Array

[83, 87, 73], [191, 191, 191], [87, 117, 114], [119, 209, 200], [32, 56, 54]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #535749, #BFBFBF, #577572, #77D1C8, #203836 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: #535749; --color-2: #bfbfbf; --color-3: #577572; --color-4: #77d1c8; --color-5: #203836. 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