← Back to Editor

#8CD299 · #81A387 · #76827E · #717080 · #5F5873

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

#8CD299

Celadon · DarkSeaGreen · Apple Green

HEX
#8CD299
RGB
rgb(140, 210, 153)
HSL
hsl(131, 44%, 69%)
HSB
hsb(131, 33%, 82%)
CMYK
cmyk(33%, 0%, 27%, 18%)
Oklch
oklch(80.2% 0.107 149.3)

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

#81A387

Celadon · DarkSeaGreen · Olive Green

HEX
#81A387
RGB
rgb(129, 163, 135)
HSL
hsl(131, 16%, 57%)
HSB
hsb(131, 21%, 64%)
CMYK
cmyk(21%, 0%, 17%, 36%)
Oklch
oklch(68.2% 0.055 150.0)

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

#76827E

Ink Gray · Gray · Warm Gray

HEX
#76827E
RGB
rgb(118, 130, 126)
HSL
hsl(160, 5%, 49%)
HSB
hsb(160, 9%, 51%)
CMYK
cmyk(9%, 0%, 3%, 49%)
Oklch
oklch(59.5% 0.015 173.8)

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

#717080

Ink Gray · Gray · Warm Gray

HEX
#717080
RGB
rgb(113, 112, 128)
HSL
hsl(244, 7%, 47%)
HSB
hsb(244, 13%, 50%)
CMYK
cmyk(12%, 13%, 0%, 50%)
Oklch
oklch(55.2% 0.025 288.4)

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

#5F5873

Deep Indigo · DimGray · Prussian Blue

HEX
#5F5873
RGB
rgb(95, 88, 115)
HSL
hsl(256, 13%, 40%)
HSB
hsb(256, 23%, 45%)
CMYK
cmyk(17%, 23%, 0%, 55%)
Oklch
oklch(47.7% 0.044 296.6)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8CD299
D38DC6

Analogous

A3D38D
8CD299
8DD3BD

Triadic

8CD299
9A8DD3
D39A8D

Split-Comp.

8CD299
BD8DD3
D38DA3

Tetradic

8CD299
8DA3D3
D38DC6
D3BD8D

Contrast Matrix WCAG 2.1 Contrast

8CD299
81A387
76827E
717080
5F5873
—
1.6
Fail
2.2
Fail
2.7
Fail
3.8
AA Large
1.6
Fail
—
1.4
Fail
1.7
Fail
2.4
Fail
2.2
Fail
1.4
Fail
—
1.2
Fail
1.7
Fail
2.7
Fail
1.7
Fail
1.2
Fail
—
1.4
Fail
3.8
AA Large
2.4
Fail
1.7
Fail
1.4
Fail
—
White BG
1.8Fail
2.8Fail
4.0AA Large
4.8AA
6.7AA
Black BG
11.8AAA
7.5AAA
5.3AA
4.3AA Large
3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAABA7
90908E
7B7B7F
71717C
5C5C6C

Deuteranopia

A6A1AA
8E8B8F
7B7A7F
71717B
5C5D6B

Tritanopia

90B2B4
839394
778080
717978
5F6766

Achromatopsia

B7B7B7
969696
7E7E7E
727272
5D5D5D

Shades & Tints Shades & Tints

#8CD299

Dark
Light

#81A387

Dark
Light

#76827E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8cd299;
  --color-2: #81a387;
  --color-3: #76827e;
  --color-4: #717080;
  --color-5: #5f5873;
}

SCSS

$color-1: #8cd299;
$color-2: #81a387;
$color-3: #76827e;
$color-4: #717080;
$color-5: #5f5873;

TAILWIND

colors: {
  'brand-1': '#8cd299',
  'brand-2': '#81a387',
  'brand-3': '#76827e',
  'brand-4': '#717080',
  'brand-5': '#5f5873',
}

RGB Array

[140, 210, 153], [129, 163, 135], [118, 130, 126], [113, 112, 128], [95, 88, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8CD299, #81A387, #76827E, #717080, #5F5873 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: #8cd299; --color-2: #81a387; --color-3: #76827e; --color-4: #717080; --color-5: #5f5873. 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