← Back to Editor

#87B0A1 · #749289 · #617470 · #4E5658 · #3B383F

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

#87B0A1

Jade · DarkSeaGreen · Apple Green

HEX
#87B0A1
RGB
rgb(135, 176, 161)
HSL
hsl(158, 21%, 61%)
HSB
hsb(158, 23%, 69%)
CMYK
cmyk(23%, 0%, 9%, 31%)
Oklch
oklch(72.3% 0.049 170.5)

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

#749289

Mineral Blue · LightSlateGray · Lake Green

HEX
#749289
RGB
rgb(116, 146, 137)
HSL
hsl(162, 12%, 51%)
HSB
hsb(162, 21%, 57%)
CMYK
cmyk(21%, 0%, 6%, 43%)
Oklch
oklch(63.4% 0.036 174.9)

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

#617470

Mineral Blue · DimGray · Warm Gray

HEX
#617470
RGB
rgb(97, 116, 112)
HSL
hsl(167, 9%, 42%)
HSB
hsb(167, 16%, 45%)
CMYK
cmyk(16%, 0%, 3%, 55%)
Oklch
oklch(54.2% 0.023 181.2)

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

#4E5658

Ink Gray · DarkSlateGray · Charcoal

HEX
#4E5658
RGB
rgb(78, 86, 88)
HSL
hsl(192, 6%, 33%)
HSB
hsb(192, 11%, 35%)
CMYK
cmyk(11%, 2%, 0%, 65%)
Oklch
oklch(44.7% 0.011 214.4)

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

#3B383F

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#3B383F
RGB
rgb(59, 56, 63)
HSL
hsl(266, 6%, 23%)
HSB
hsb(266, 11%, 25%)
CMYK
cmyk(6%, 11%, 0%, 75%)
Oklch
oklch(34.6% 0.013 305.1)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

87B0A1
B08796

Analogous

87B08C
87B0A1
87ABB0

Triadic

87B0A1
A187B0
B0A187

Split-Comp.

87B0A1
B087AB
B08C87

Tetradic

87B0A1
8C87B0
B08796
ABB087

Contrast Matrix WCAG 2.1 Contrast

87B0A1
749289
617470
4E5658
3B383F
—
1.4
Fail
2.1
Fail
3.1
AA Large
4.8
AA
1.4
Fail
—
1.5
Fail
2.2
Fail
3.4
AA Large
2.1
Fail
1.5
Fail
—
1.5
Fail
2.3
Fail
3.1
AA Large
2.2
Fail
1.5
Fail
—
1.5
Fail
4.8
AA
3.4
AA Large
2.3
Fail
1.5
Fail
—
White BG
2.4Fail
3.4AA Large
5.0AA
7.5AAA
11.5AAA
Black BG
8.8AAA
6.2AA
4.2AA Large
2.8Fail
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9999A5
81818B
696971
515258
3A3A3D

Deuteranopia

9693A6
7F7D8C
686771
515057
3A3A3D

Tritanopia

89A7A8
758D8D
627272
4E5757
3B3C3C

Achromatopsia

A2A2A2
888888
6E6E6E
545454
3A3A3A

Shades & Tints Shades & Tints

#87B0A1

Dark
Light

#749289

Dark
Light

#617470

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #87b0a1;
  --color-2: #749289;
  --color-3: #617470;
  --color-4: #4e5658;
  --color-5: #3b383f;
}

SCSS

$color-1: #87b0a1;
$color-2: #749289;
$color-3: #617470;
$color-4: #4e5658;
$color-5: #3b383f;

TAILWIND

colors: {
  'brand-1': '#87b0a1',
  'brand-2': '#749289',
  'brand-3': '#617470',
  'brand-4': '#4e5658',
  'brand-5': '#3b383f',
}

RGB Array

[135, 176, 161], [116, 146, 137], [97, 116, 112], [78, 86, 88], [59, 56, 63]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #87B0A1, #749289, #617470, #4E5658, #3B383F 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: #87b0a1; --color-2: #749289; --color-3: #617470; --color-4: #4e5658; --color-5: #3b383f. 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