← Back to Editor

#86838C · #8EA9B0 · #98C3B9 · #9BCFB9 · #B4BDA8

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

#86838C

Ash · Gray · Warm Gray

HEX
#86838C
RGB
rgb(134, 131, 140)
HSL
hsl(260, 4%, 53%)
HSB
hsb(260, 6%, 55%)
CMYK
cmyk(4%, 6%, 0%, 45%)
Oklch
oklch(61.6% 0.014 301.1)

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

#8EA9B0

Sky Blue · DarkGray · Lake Green

HEX
#8EA9B0
RGB
rgb(142, 169, 176)
HSL
hsl(192, 18%, 62%)
HSB
hsb(192, 19%, 69%)
CMYK
cmyk(19%, 4%, 0%, 31%)
Oklch
oklch(71.7% 0.032 215.2)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#98C3B9

Jade · DarkGray · Lake Green

HEX
#98C3B9
RGB
rgb(152, 195, 185)
HSL
hsl(166, 26%, 68%)
HSB
hsb(166, 22%, 76%)
CMYK
cmyk(22%, 0%, 5%, 24%)
Oklch
oklch(78.3% 0.048 179.2)

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

#9BCFB9

Jade · Silver · Apple Green

HEX
#9BCFB9
RGB
rgb(155, 207, 185)
HSL
hsl(155, 35%, 71%)
HSB
hsb(155, 25%, 81%)
CMYK
cmyk(25%, 0%, 11%, 19%)
Oklch
oklch(81.2% 0.062 166.9)

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

#B4BDA8

Willow Green · DarkGray · Apple Green

HEX
#B4BDA8
RGB
rgb(180, 189, 168)
HSL
hsl(86, 14%, 70%)
HSB
hsb(86, 11%, 74%)
CMYK
cmyk(5%, 0%, 11%, 26%)
Oklch
oklch(78.5% 0.031 126.1)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

86838C
898C82

Analogous

82848C
86838C
8A828C

Triadic

86838C
8C8682
828C86

Split-Comp.

86838C
8C8A82
848C82

Tetradic

86838C
8C8284
898C82
828C8A

Contrast Matrix WCAG 2.1 Contrast

86838C
8EA9B0
98C3B9
9BCFB9
B4BDA8
—
1.5
Fail
1.9
Fail
2.1
Fail
1.9
Fail
1.5
Fail
—
1.3
Fail
1.4
Fail
1.3
Fail
1.9
Fail
1.3
Fail
—
1.1
Fail
1.0
Fail
2.1
Fail
1.4
Fail
1.1
Fail
—
1.1
Fail
1.9
Fail
1.3
Fail
1.0
Fail
1.1
Fail
—
White BG
3.7AA Large
2.5Fail
1.9Fail
1.7Fail
1.9Fail
Black BG
5.6AA
8.5AAA
10.8AAA
12.0AAA
10.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

85858A
9A9AAE
ABABBB
B2B2BE
B8B8AD

Deuteranopia

858589
9896AE
A8A5BC
AFABC0
B7B7AE

Tritanopia

868888
8FADAD
9ABDBE
9EC3C3
B4B1B2

Achromatopsia

858585
A2A2A2
B5B5B5
BDBDBD
B8B8B8

Shades & Tints Shades & Tints

#86838C

Dark
Light

#8EA9B0

Dark
Light

#98C3B9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #86838c;
  --color-2: #8ea9b0;
  --color-3: #98c3b9;
  --color-4: #9bcfb9;
  --color-5: #b4bda8;
}

SCSS

$color-1: #86838c;
$color-2: #8ea9b0;
$color-3: #98c3b9;
$color-4: #9bcfb9;
$color-5: #b4bda8;

TAILWIND

colors: {
  'brand-1': '#86838c',
  'brand-2': '#8ea9b0',
  'brand-3': '#98c3b9',
  'brand-4': '#9bcfb9',
  'brand-5': '#b4bda8',
}

RGB Array

[134, 131, 140], [142, 169, 176], [152, 195, 185], [155, 207, 185], [180, 189, 168]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #86838C, #8EA9B0, #98C3B9, #9BCFB9, #B4BDA8 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: #86838c; --color-2: #8ea9b0; --color-3: #98c3b9; --color-4: #9bcfb9; --color-5: #b4bda8. 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