← Back to Editor

#7C966F · #819F8B · #86A8A6 · #8AB1C2 · #8FBADD

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

#7C966F

Celadon · Gray · Olive Green

HEX
#7C966F
RGB
rgb(124, 150, 111)
HSL
hsl(100, 16%, 51%)
HSB
hsb(100, 26%, 59%)
CMYK
cmyk(17%, 0%, 26%, 41%)
Oklch
oklch(64.2% 0.064 135.4)

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

#819F8B

Celadon · LightSlateGray · Olive Green

HEX
#819F8B
RGB
rgb(129, 159, 139)
HSL
hsl(140, 14%, 56%)
HSB
hsb(140, 19%, 62%)
CMYK
cmyk(19%, 0%, 13%, 38%)
Oklch
oklch(67.4% 0.044 155.8)

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

#86A8A6

Mineral Blue · DarkSeaGreen · Lake Green

HEX
#86A8A6
RGB
rgb(134, 168, 166)
HSL
hsl(176, 16%, 59%)
HSB
hsb(176, 20%, 66%)
CMYK
cmyk(20%, 0%, 1%, 34%)
Oklch
oklch(70.6% 0.037 191.9)

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

#8AB1C2

Sky Blue · DarkGray · Lake Green

HEX
#8AB1C2
RGB
rgb(138, 177, 194)
HSL
hsl(198, 31%, 65%)
HSB
hsb(198, 29%, 76%)
CMYK
cmyk(29%, 9%, 0%, 24%)
Oklch
oklch(73.8% 0.049 226.4)

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

#8FBADD

Sky Blue · SkyBlue · Cobalt Blue

HEX
#8FBADD
RGB
rgb(143, 186, 221)
HSL
hsl(207, 53%, 71%)
HSB
hsb(207, 35%, 87%)
CMYK
cmyk(35%, 16%, 0%, 13%)
Oklch
oklch(77.0% 0.068 243.3)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7C966F
896E96

Analogous

8F966E
7C966F
6E9675

Triadic

7C966F
6E7B96
966E7B

Split-Comp.

7C966F
756E96
966E8F

Tetradic

7C966F
6E8F96
896E96
96756E

Contrast Matrix WCAG 2.1 Contrast

7C966F
819F8B
86A8A6
8AB1C2
8FBADD
—
1.1
Fail
1.3
Fail
1.4
Fail
1.6
Fail
1.1
Fail
—
1.1
Fail
1.3
Fail
1.4
Fail
1.3
Fail
1.1
Fail
—
1.1
Fail
1.3
Fail
1.4
Fail
1.3
Fail
1.1
Fail
—
1.1
Fail
1.6
Fail
1.4
Fail
1.3
Fail
1.1
Fail
—
White BG
3.3AA Large
2.9Fail
2.6Fail
2.3Fail
2.1Fail
Black BG
6.4AA
7.3AAA
8.2AAA
9.1AAA
10.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

878778
8E8E90
9595A6
9B9BBE
A2A2D5

Deuteranopia

86847B
8C8A91
9390A7
9996BD
9F9CD3

Tritanopia

7D8082
839495
88A7A7
8CBBBA
91CECC

Achromatopsia

8A8A8A
949494
9E9E9E
A7A7A7
B1B1B1

Shades & Tints Shades & Tints

#7C966F

Dark
Light

#819F8B

Dark
Light

#86A8A6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7c966f;
  --color-2: #819f8b;
  --color-3: #86a8a6;
  --color-4: #8ab1c2;
  --color-5: #8fbadd;
}

SCSS

$color-1: #7c966f;
$color-2: #819f8b;
$color-3: #86a8a6;
$color-4: #8ab1c2;
$color-5: #8fbadd;

TAILWIND

colors: {
  'brand-1': '#7c966f',
  'brand-2': '#819f8b',
  'brand-3': '#86a8a6',
  'brand-4': '#8ab1c2',
  'brand-5': '#8fbadd',
}

RGB Array

[124, 150, 111], [129, 159, 139], [134, 168, 166], [138, 177, 194], [143, 186, 221]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7C966F, #819F8B, #86A8A6, #8AB1C2, #8FBADD 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: #7c966f; --color-2: #819f8b; --color-3: #86a8a6; --color-4: #8ab1c2; --color-5: #8fbadd. 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