← Back to Editor

#8F7B7B · #888F7B · #79A684 · #78B09A · #82B0A6

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 Library

Color Details Color Details

#8F7B7B

Crimson · Gray · Warm Gray

HEX
#8F7B7B
RGB
rgb(143, 123, 123)
HSL
hsl(0, 8%, 52%)
HSB
hsb(0, 14%, 56%)
CMYK
cmyk(0%, 14%, 14%, 44%)
Oklch
oklch(60.1% 0.025 17.9)

TraditionalCrimson」· PaintWarm Gray」· Creative Urban Concrete

#888F7B

Grass Green · Gray · Warm Gray

HEX
#888F7B
RGB
rgb(136, 143, 123)
HSL
hsl(81, 8%, 52%)
HSB
hsb(81, 14%, 56%)
CMYK
cmyk(5%, 0%, 14%, 44%)
Oklch
oklch(63.8% 0.030 123.0)

TraditionalGrass Green」· PaintWarm Gray」· Creative Urban Concrete

#79A684

Celadon · DarkSeaGreen · Olive Green

HEX
#79A684
RGB
rgb(121, 166, 132)
HSL
hsl(135, 20%, 56%)
HSB
hsb(135, 27%, 65%)
CMYK
cmyk(27%, 0%, 20%, 35%)
Oklch
oklch(68.3% 0.070 151.8)

TraditionalCeladon」· PaintOlive Green」· Creative Blush Sunrise

#78B09A

Mineral Blue · DarkSeaGreen · Olive Green

HEX
#78B09A
RGB
rgb(120, 176, 154)
HSL
hsl(156, 26%, 58%)
HSB
hsb(156, 32%, 69%)
CMYK
cmyk(32%, 0%, 13%, 31%)
Oklch
oklch(71.2% 0.067 167.9)

TraditionalMineral Blue」· PaintOlive Green」· Creative Blush Sunrise

#82B0A6

Mineral Blue · DarkSeaGreen · Lake Green

HEX
#82B0A6
RGB
rgb(130, 176, 166)
HSL
hsl(167, 23%, 60%)
HSB
hsb(167, 26%, 69%)
CMYK
cmyk(26%, 0%, 6%, 31%)
Oklch
oklch(72.1% 0.051 179.9)

TraditionalMineral Blue」· PaintLake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8F7B7B
7B8E8E

Analogous

8E7B85
8F7B7B
8E857B

Triadic

8F7B7B
7B8E7B
7B7B8E

Split-Comp.

8F7B7B
7B8E85
7B858E

Tetradic

8F7B7B
858E7B
7B8E8E
857B8E

Contrast Matrix WCAG 2.1 Contrast

8F7B7B
888F7B
79A684
78B09A
82B0A6
1.2
Fail
1.4
Fail
1.6
Fail
1.6
Fail
1.2
Fail
1.2
Fail
1.4
Fail
1.4
Fail
1.4
Fail
1.2
Fail
1.1
Fail
1.1
Fail
1.6
Fail
1.4
Fail
1.1
Fail
1.0
Fail
1.6
Fail
1.4
Fail
1.1
Fail
1.0
Fail
White BG
4.0AA Large
3.4AA Large
2.8Fail
2.5Fail
2.4Fail
Black BG
5.3AA
6.3AA
7.6AAA
8.5AAA
8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

86867B
8B8B80
8C8D8C
90919F
9696A8

Deuteranopia

88897B
8B8A81
8A878E
8D89A1
9390A9

Tritanopia

8E7B7B
888485
7B9394
7BA4A4
84AAAB

Achromatopsia

818181
8B8B8B
959595
9D9D9D
A1A1A1

Shades & Tints Shades & Tints

#8F7B7B

Dark
Light

#888F7B

Dark
Light

#79A684

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8f7b7b;
  --color-2: #888f7b;
  --color-3: #79a684;
  --color-4: #78b09a;
  --color-5: #82b0a6;
}

SCSS

$color-1: #8f7b7b;
$color-2: #888f7b;
$color-3: #79a684;
$color-4: #78b09a;
$color-5: #82b0a6;

TAILWIND

colors: {
  'brand-1': '#8f7b7b',
  'brand-2': '#888f7b',
  'brand-3': '#79a684',
  'brand-4': '#78b09a',
  'brand-5': '#82b0a6',
}

RGB Array

[143, 123, 123], [136, 143, 123], [121, 166, 132], [120, 176, 154], [130, 176, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8F7B7B, #888F7B, #79A684, #78B09A, #82B0A6 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: #8f7b7b; --color-2: #888f7b; --color-3: #79a684; --color-4: #78b09a; --color-5: #82b0a6. 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