#71AA37 + #8D7D7F + #60DE15 + #9B91A7 + #A276FD - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#71AA37

Pine Green · DarkOliveGreen · Olive Green

HEX

#71AA37

RGB

rgb(113, 170, 55)

HSL

hsl(90, 51%, 44%)

HSB

hsb(90, 68%, 67%)

CMYK

cmyk(34%, 0%, 68%, 33%)

Oklch

oklch(67.5% 0.157 132.0)

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

#8D7D7F

Ash · Gray · Warm Gray

HEX

#8D7D7F

RGB

rgb(141, 125, 127)

HSL

hsl(353, 7%, 52%)

HSB

hsb(353, 11%, 55%)

CMYK

cmyk(0%, 11%, 10%, 45%)

Oklch

oklch(60.5% 0.020 9.1)

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

#60DE15

Pine Green · Chartreuse · Olive Green

HEX

#60DE15

RGB

rgb(96, 222, 21)

HSL

hsl(98, 83%, 48%)

HSB

hsb(98, 91%, 87%)

CMYK

cmyk(57%, 0%, 91%, 13%)

Oklch

oklch(79.7% 0.241 138.0)

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

#9B91A7

Wisteria · DarkGray · Lilac Purple

HEX

#9B91A7

RGB

rgb(155, 145, 167)

HSL

hsl(267, 11%, 61%)

HSB

hsb(267, 13%, 65%)

CMYK

cmyk(7%, 13%, 0%, 35%)

Oklch

oklch(67.3% 0.034 306.0)

Traditional「Wisteria」· Paint「Lilac Purple」· Creative Lavender Dream

#A276FD

Wisteria · MediumSlateBlue · Lilac Purple

HEX

#A276FD

RGB

rgb(162, 118, 253)

HSL

hsl(260, 97%, 73%)

HSB

hsb(260, 53%, 99%)

CMYK

cmyk(36%, 53%, 0%, 1%)

Oklch

oklch(67.1% 0.193 295.8)

Traditional「Wisteria」· Paint「Lilac Purple」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

71AA37

7037A9

Analogous

A9A937

71AA37

37A937

Triadic

71AA37

3770A9

A93770

Split-Comp.

71AA37

3737A9

A937A9

Tetradic

71AA37

37A9A9

7037A9

A93737

Contrast Matrix WCAG 2.1 Contrast

71AA37	8D7D7F	60DE15	9B91A7	A276FD
—	1.4 Fail	1.6 Fail	1.1 Fail	1.1 Fail
1.4 Fail	—	2.2 Fail	1.3 Fail	1.2 Fail
1.6 Fail	2.2 Fail	—	1.7 Fail	1.8 Fail
1.1 Fail	1.3 Fail	1.7 Fail	—	1.1 Fail
1.1 Fail	1.2 Fail	1.8 Fail	1.1 Fail	—

White BG

2.8Fail

3.9AA Large

1.8Fail

3.0Fail

3.2AA Large

Black BG

7.5AAA

5.4AA

12.0AAA

7.0AAA

6.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8A53

86867F

979846

9797A2

8F8FDC

Deuteranopia

86825A

87887E

8F8651

9798A0

9295D5

Tritanopia

74696E

8C7E7E

666C74

9B9D9D

A0C3BD

Achromatopsia

8C8C8C

828282

A1A1A1

969696

939393

Shades & Tints Shades & Tints

#71AA37

Dark

Light

#8D7D7F

Dark

Light

#60DE15

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #71aa37;
  --color-2: #8d7d7f;
  --color-3: #60de15;
  --color-4: #9b91a7;
  --color-5: #a276fd;
}

SCSS

$color-1: #71aa37;
$color-2: #8d7d7f;
$color-3: #60de15;
$color-4: #9b91a7;
$color-5: #a276fd;

TAILWIND

colors: {
  'brand-1': '#71aa37',
  'brand-2': '#8d7d7f',
  'brand-3': '#60de15',
  'brand-4': '#9b91a7',
  'brand-5': '#a276fd',
}

RGB Array

[113, 170, 55], [141, 125, 127], [96, 222, 21], [155, 145, 167], [162, 118, 253]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #71AA37, #8D7D7F, #60DE15, #9B91A7, #A276FD 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: #71aa37; --color-2: #8d7d7f; --color-3: #60de15; --color-4: #9b91a7; --color-5: #a276fd. 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