← Back to Editor

#7A666C · #807E78 · #889E8C · #8DB8A6 · #98D9CB

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

#7A666C

Dark Violet · DimGray · Warm Gray

HEX
#7A666C
RGB
rgb(122, 102, 108)
HSL
hsl(342, 9%, 44%)
HSB
hsb(342, 16%, 48%)
CMYK
cmyk(0%, 16%, 11%, 52%)
Oklch
oklch(53.1% 0.027 358.1)

Traditional「Dark Violet」· Paint「Warm Gray」· Creative Urban Concrete

#807E78

Ink Gray · Gray · Warm Gray

HEX
#807E78
RGB
rgb(128, 126, 120)
HSL
hsl(45, 3%, 49%)
HSB
hsb(45, 6%, 50%)
CMYK
cmyk(0%, 2%, 6%, 50%)
Oklch
oklch(59.3% 0.009 91.5)

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

#889E8C

Celadon · LightSlateGray · Olive Green

HEX
#889E8C
RGB
rgb(136, 158, 140)
HSL
hsl(131, 10%, 58%)
HSB
hsb(131, 14%, 62%)
CMYK
cmyk(14%, 0%, 11%, 38%)
Oklch
oklch(67.7% 0.036 150.6)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#8DB8A6

Jade · DarkSeaGreen · Apple Green

HEX
#8DB8A6
RGB
rgb(141, 184, 166)
HSL
hsl(155, 23%, 64%)
HSB
hsb(155, 23%, 72%)
CMYK
cmyk(23%, 0%, 10%, 28%)
Oklch
oklch(74.6% 0.053 167.4)

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

#98D9CB

Jade · LightBlue · Lake Green

HEX
#98D9CB
RGB
rgb(152, 217, 203)
HSL
hsl(167, 46%, 72%)
HSB
hsb(167, 30%, 85%)
CMYK
cmyk(30%, 0%, 6%, 15%)
Oklch
oklch(83.8% 0.069 179.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7A666C
667A74

Analogous

7A6676
7A666C
7A6A66

Triadic

7A666C
6C7A66
666C7A

Split-Comp.

7A666C
667A6A
66767A

Tetradic

7A666C
767A66
667A74
6A667A

Contrast Matrix WCAG 2.1 Contrast

7A666C
807E78
889E8C
8DB8A6
98D9CB
—
1.3
Fail
1.9
Fail
2.4
Fail
3.3
AA Large
1.3
Fail
—
1.4
Fail
1.8
Fail
2.5
Fail
1.9
Fail
1.4
Fail
—
1.3
Fail
1.8
Fail
2.4
Fail
1.8
Fail
1.3
Fail
—
1.4
Fail
3.3
AA Large
2.5
Fail
1.8
Fail
1.4
Fail
—
White BG
5.3AA
4.1AA Large
2.9Fail
2.2Fail
1.6Fail
Black BG
3.9AA Large
5.2AA
7.3AAA
9.5AAA
13.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

71716B
7F7F79
929290
A0A0AA
B4B5CE

Deuteranopia

73746A
7F7F7A
908F91
9D9AAB
B0ACCF

Tritanopia

796969
807B7B
899495
8FAEAF
9BD1D2

Achromatopsia

6D6D6D
7E7E7E
959595
A9A9A9
C4C4C4

Shades & Tints Shades & Tints

#7A666C

Dark
Light

#807E78

Dark
Light

#889E8C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7a666c;
  --color-2: #807e78;
  --color-3: #889e8c;
  --color-4: #8db8a6;
  --color-5: #98d9cb;
}

SCSS

$color-1: #7a666c;
$color-2: #807e78;
$color-3: #889e8c;
$color-4: #8db8a6;
$color-5: #98d9cb;

TAILWIND

colors: {
  'brand-1': '#7a666c',
  'brand-2': '#807e78',
  'brand-3': '#889e8c',
  'brand-4': '#8db8a6',
  'brand-5': '#98d9cb',
}

RGB Array

[122, 102, 108], [128, 126, 120], [136, 158, 140], [141, 184, 166], [152, 217, 203]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7A666C, #807E78, #889E8C, #8DB8A6, #98D9CB 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: #7a666c; --color-2: #807e78; --color-3: #889e8c; --color-4: #8db8a6; --color-5: #98d9cb. 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