← Back to Editor

#86A686 · #92BF88 · #9FD477 · #C4F065 · #E4FF4D

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatile

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#86A686

Celadon · DarkSeaGreen · Olive Green

HEX
#86A686
RGB
rgb(134, 166, 134)
HSL
hsl(120, 15%, 59%)
HSB
hsb(120, 19%, 65%)
CMYK
cmyk(19%, 0%, 19%, 35%)
Oklch
oklch(69.2% 0.058 144.9)

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

#92BF88

Celadon · DarkSeaGreen · Apple Green

HEX
#92BF88
RGB
rgb(146, 191, 136)
HSL
hsl(109, 30%, 64%)
HSB
hsb(109, 29%, 75%)
CMYK
cmyk(24%, 0%, 29%, 25%)
Oklch
oklch(75.8% 0.091 140.0)

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

#9FD477

Emerald · DarkSeaGreen · Apple Green

HEX
#9FD477
RGB
rgb(159, 212, 119)
HSL
hsl(94, 52%, 65%)
HSB
hsb(94, 44%, 83%)
CMYK
cmyk(25%, 0%, 44%, 17%)
Oklch
oklch(81.2% 0.135 132.9)

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

#C4F065

Willow Green · Khaki · Apple Green

HEX
#C4F065
RGB
rgb(196, 240, 101)
HSL
hsl(79, 82%, 67%)
HSB
hsb(79, 58%, 94%)
CMYK
cmyk(18%, 0%, 58%, 6%)
Oklch
oklch(89.7% 0.173 124.6)

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

#E4FF4D

Fresh Green · GreenYellow · Sunflower

HEX
#E4FF4D
RGB
rgb(228, 255, 77)
HSL
hsl(69, 100%, 65%)
HSB
hsb(69, 70%, 100%)
CMYK
cmyk(11%, 0%, 70%, 0%)
Oklch
oklch(95.0% 0.195 117.8)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

86A686
A687A6

Analogous

96A687
86A686
87A696

Triadic

86A686
8787A6
A68787

Split-Comp.

86A686
9687A6
A68796

Tetradic

86A686
8796A6
A687A6
A69687

Contrast Matrix WCAG 2.1 Contrast

86A686
92BF88
9FD477
C4F065
E4FF4D
—
1.3
Fail
1.6
Fail
2.0
Fail
2.4
Fail
1.3
Fail
—
1.2
Fail
1.6
Fail
1.9
Fail
1.6
Fail
1.2
Fail
—
1.3
Fail
1.5
Fail
2.0
Fail
1.6
Fail
1.3
Fail
—
1.2
Fail
2.4
Fail
1.9
Fail
1.5
Fail
1.2
Fail
—
White BG
2.7Fail
2.1Fail
1.7Fail
1.3Fail
1.1Fail
Black BG
7.8AAA
10.0AAA
12.2AAA
16.0AAA
18.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

94948E
A5A695
B6B68E
D7D787
F0F078

Deuteranopia

929090
A3A099
B3AF93
D5D18F
EEEC82

Tritanopia

889495
94A0A2
A29FA3
C6A1A7
E59AA2

Achromatopsia

999999
ABABAB
BABABA
D3D3D3
E3E3E3

Shades & Tints Shades & Tints

#86A686

Dark
Light

#92BF88

Dark
Light

#9FD477

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #86a686;
  --color-2: #92bf88;
  --color-3: #9fd477;
  --color-4: #c4f065;
  --color-5: #e4ff4d;
}

SCSS

$color-1: #86a686;
$color-2: #92bf88;
$color-3: #9fd477;
$color-4: #c4f065;
$color-5: #e4ff4d;

TAILWIND

colors: {
  'brand-1': '#86a686',
  'brand-2': '#92bf88',
  'brand-3': '#9fd477',
  'brand-4': '#c4f065',
  'brand-5': '#e4ff4d',
}

RGB Array

[134, 166, 134], [146, 191, 136], [159, 212, 119], [196, 240, 101], [228, 255, 77]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #86A686, #92BF88, #9FD477, #C4F065, #E4FF4D 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: #86a686; --color-2: #92bf88; --color-3: #9fd477; --color-4: #c4f065; --color-5: #e4ff4d. 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