← Back to Editor

#8BC8C4 · #89C7A1 · #9AC47A · #A4B350 · #98A83E

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

#8BC8C4

Jade · SkyBlue · Lake Green

HEX
#8BC8C4
RGB
rgb(139, 200, 196)
HSL
hsl(176, 36%, 66%)
HSB
hsb(176, 31%, 78%)
CMYK
cmyk(31%, 0%, 2%, 22%)
Oklch
oklch(79.0% 0.063 190.8)

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

#89C7A1

Celadon · DarkSeaGreen · Apple Green

HEX
#89C7A1
RGB
rgb(137, 199, 161)
HSL
hsl(143, 36%, 66%)
HSB
hsb(143, 31%, 78%)
CMYK
cmyk(31%, 0%, 19%, 22%)
Oklch
oklch(77.7% 0.084 156.9)

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

#9AC47A

Celadon · DarkSeaGreen · Apple Green

HEX
#9AC47A
RGB
rgb(154, 196, 122)
HSL
hsl(94, 39%, 62%)
HSB
hsb(94, 38%, 77%)
CMYK
cmyk(21%, 0%, 38%, 23%)
Oklch
oklch(77.2% 0.110 132.5)

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

#A4B350

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#A4B350
RGB
rgb(164, 179, 80)
HSL
hsl(69, 39%, 51%)
HSB
hsb(69, 55%, 70%)
CMYK
cmyk(8%, 0%, 55%, 30%)
Oklch
oklch(73.4% 0.126 116.8)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#98A83E

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#98A83E
RGB
rgb(152, 168, 62)
HSL
hsl(69, 46%, 45%)
HSB
hsb(69, 63%, 66%)
CMYK
cmyk(10%, 0%, 63%, 34%)
Oklch
oklch(69.8% 0.132 117.2)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8BC8C4
C8898D

Analogous

89C8A4
8BC8C4
89ACC8

Triadic

8BC8C4
C389C8
C8C389

Split-Comp.

8BC8C4
C889AC
C8A489

Tetradic

8BC8C4
A489C8
C8898D
ACC889

Contrast Matrix WCAG 2.1 Contrast

8BC8C4
89C7A1
9AC47A
A4B350
98A83E
—
1.0
Fail
1.1
Fail
1.2
Fail
1.4
Fail
1.0
Fail
—
1.0
Fail
1.2
Fail
1.3
Fail
1.1
Fail
1.0
Fail
—
1.2
Fail
1.3
Fail
1.2
Fail
1.2
Fail
1.2
Fail
—
1.1
Fail
1.4
Fail
1.3
Fail
1.3
Fail
1.1
Fail
—
White BG
1.9Fail
2.0Fail
2.0Fail
2.3Fail
2.6Fail
Black BG
11.2AAA
10.7AAA
10.6AAA
9.1AAA
8.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A5A6C5
A4A4AA
ACAD8C
AAAB68
9F9F58

Deuteranopia

A29DC5
A09CAC
AAA790
AAA96E
9E9D5E

Tritanopia

8EC6C6
8CB1B3
9C9A9D
A57B7F
996C70

Achromatopsia

B5B5B5
B0B0B0
AFAFAF
A3A3A3
979797

Shades & Tints Shades & Tints

#8BC8C4

Dark
Light

#89C7A1

Dark
Light

#9AC47A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8bc8c4;
  --color-2: #89c7a1;
  --color-3: #9ac47a;
  --color-4: #a4b350;
  --color-5: #98a83e;
}

SCSS

$color-1: #8bc8c4;
$color-2: #89c7a1;
$color-3: #9ac47a;
$color-4: #a4b350;
$color-5: #98a83e;

TAILWIND

colors: {
  'brand-1': '#8bc8c4',
  'brand-2': '#89c7a1',
  'brand-3': '#9ac47a',
  'brand-4': '#a4b350',
  'brand-5': '#98a83e',
}

RGB Array

[139, 200, 196], [137, 199, 161], [154, 196, 122], [164, 179, 80], [152, 168, 62]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8BC8C4, #89C7A1, #9AC47A, #A4B350, #98A83E is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #8bc8c4; --color-2: #89c7a1; --color-3: #9ac47a; --color-4: #a4b350; --color-5: #98a83e. 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. 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