← Back to Editor

#87C70A · #ABD94E · #CBDB53 · #D3D989 · #D6D9AD

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamic

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#87C70A

Grass Green · Chartreuse · Olive Green

HEX
#87C70A
RGB
rgb(135, 199, 10)
HSL
hsl(80, 90%, 41%)
HSB
hsb(80, 95%, 78%)
CMYK
cmyk(32%, 0%, 95%, 22%)
Oklch
oklch(75.7% 0.200 129.2)

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

#ABD94E

Grass Green · GreenYellow · Olive Green

HEX
#ABD94E
RGB
rgb(171, 217, 78)
HSL
hsl(80, 65%, 58%)
HSB
hsb(80, 64%, 85%)
CMYK
cmyk(21%, 0%, 64%, 15%)
Oklch
oklch(82.6% 0.173 125.7)

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

#CBDB53

Autumn Sage · GreenYellow · Sunflower

HEX
#CBDB53
RGB
rgb(203, 219, 83)
HSL
hsl(67, 65%, 59%)
HSB
hsb(67, 62%, 86%)
CMYK
cmyk(7%, 0%, 62%, 14%)
Oklch
oklch(85.4% 0.159 115.5)

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

#D3D989

Fresh Green · Khaki · Sunflower

HEX
#D3D989
RGB
rgb(211, 217, 137)
HSL
hsl(65, 51%, 69%)
HSB
hsb(65, 37%, 85%)
CMYK
cmyk(3%, 0%, 37%, 15%)
Oklch
oklch(86.3% 0.103 112.0)

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

#D6D9AD

Fresh Green · Wheat · Lemon Cream

HEX
#D6D9AD
RGB
rgb(214, 217, 173)
HSL
hsl(64, 37%, 76%)
HSB
hsb(64, 20%, 85%)
CMYK
cmyk(1%, 0%, 20%, 15%)
Oklch
oklch(87.2% 0.058 110.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

87C70A
490AC7

Analogous

C7A70A
87C70A
2AC70A

Triadic

87C70A
0A88C7
C70A88

Split-Comp.

87C70A
0A2AC7
A70AC7

Tetradic

87C70A
0AC7A7
490AC7
C70A2A

Contrast Matrix WCAG 2.1 Contrast

87C70A
ABD94E
CBDB53
D3D989
D6D9AD
—
1.3
Fail
1.4
Fail
1.4
Fail
1.4
Fail
1.3
Fail
—
1.1
Fail
1.1
Fail
1.1
Fail
1.4
Fail
1.1
Fail
—
1.0
Fail
1.0
Fail
1.4
Fail
1.1
Fail
1.0
Fail
—
1.0
Fail
1.4
Fail
1.1
Fail
1.0
Fail
1.0
Fail
—
White BG
2.1Fail
1.6Fail
1.5Fail
1.5Fail
1.5Fail
Black BG
10.2AAA
12.8AAA
13.8AAA
14.1AAA
14.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A338
BFBF70
D2D274
D6D69C
D7D7B8

Deuteranopia

9F9A43
BCB978
D1D07C
D5D5A1
D7D7BA

Tritanopia

8A5C64
AD8A90
CC8E94
D3ACAF
D6C0C2

Achromatopsia

9E9E9E
BBBBBB
C7C7C7
CECECE
D3D3D3

Shades & Tints Shades & Tints

#87C70A

Dark
Light

#ABD94E

Dark
Light

#CBDB53

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #87c70a;
  --color-2: #abd94e;
  --color-3: #cbdb53;
  --color-4: #d3d989;
  --color-5: #d6d9ad;
}

SCSS

$color-1: #87c70a;
$color-2: #abd94e;
$color-3: #cbdb53;
$color-4: #d3d989;
$color-5: #d6d9ad;

TAILWIND

colors: {
  'brand-1': '#87c70a',
  'brand-2': '#abd94e',
  'brand-3': '#cbdb53',
  'brand-4': '#d3d989',
  'brand-5': '#d6d9ad',
}

RGB Array

[135, 199, 10], [171, 217, 78], [203, 219, 83], [211, 217, 137], [214, 217, 173]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #87C70A, #ABD94E, #CBDB53, #D3D989, #D6D9AD is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #87c70a; --color-2: #abd94e; --color-3: #cbdb53; --color-4: #d3d989; --color-5: #d6d9ad. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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