#8C8D70 + #82A09D + #97C280 + #BED769 + #E5F5B0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#8C8D70

Autumn Sage · Gray · Honey Gold

HEX

#8C8D70

RGB

rgb(140, 141, 112)

HSL

hsl(62, 11%, 50%)

HSB

hsb(62, 21%, 55%)

CMYK

cmyk(1%, 0%, 21%, 45%)

Oklch

oklch(63.5% 0.042 109.2)

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

#82A09D

Mineral Blue · LightSlateGray · Lake Green

HEX

#82A09D

RGB

rgb(130, 160, 157)

HSL

hsl(174, 14%, 57%)

HSB

hsb(174, 19%, 63%)

CMYK

cmyk(19%, 0%, 2%, 37%)

Oklch

oklch(68.2% 0.034 188.9)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#97C280

Celadon · DarkSeaGreen · Apple Green

HEX

#97C280

RGB

rgb(151, 194, 128)

HSL

hsl(99, 35%, 63%)

HSB

hsb(99, 34%, 76%)

CMYK

cmyk(22%, 0%, 34%, 24%)

Oklch

oklch(76.7% 0.101 135.1)

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

#BED769

Willow Green · Tan · Apple Green

HEX

#BED769

RGB

rgb(190, 215, 105)

HSL

hsl(74, 58%, 63%)

HSB

hsb(74, 51%, 84%)

CMYK

cmyk(12%, 0%, 51%, 16%)

Oklch

oklch(83.8% 0.139 120.1)

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

#E5F5B0

Willow Green · Wheat · Mint Green

HEX

#E5F5B0

RGB

rgb(229, 245, 176)

HSL

hsl(74, 78%, 83%)

HSB

hsb(74, 28%, 96%)

CMYK

cmyk(7%, 0%, 28%, 4%)

Oklch

oklch(94.2% 0.090 118.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8C8D70

72718E

Analogous

8E8071

8C8D70

7F8E71

Triadic

8C8D70

718D8E

8E718D

Split-Comp.

8C8D70

717F8E

80718E

Tetradic

8C8D70

718E80

72718E

8E717F

Contrast Matrix WCAG 2.1 Contrast

8C8D70	82A09D	97C280	BED769	E5F5B0
—	1.2 Fail	1.7 Fail	2.1 Fail	2.9 Fail
1.2 Fail	—	1.4 Fail	1.8 Fail	2.4 Fail
1.7 Fail	1.4 Fail	—	1.3 Fail	1.7 Fail
2.1 Fail	1.8 Fail	1.3 Fail	—	1.4 Fail
2.9 Fail	2.4 Fail	1.7 Fail	1.4 Fail	—

White BG

3.4AA Large

2.8Fail

2.0Fail

1.6Fail

1.2Fail

Black BG

6.2AA

7.5AAA

10.3AAA

13.1AAA

18.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8C8C77

8F8F9E

AAAA90

C9C984

ECECC1

Deuteranopia

8C8C79

8D8B9E

A7A494

C7C68A

EBEAC5

Tritanopia

8C7D7E

849E9E

999D9F

BF999D

E6CED1

Achromatopsia

898989

979797

AEAEAE

C3C3C3

E8E8E8

Shades & Tints Shades & Tints

#8C8D70

Dark

Light

#82A09D

Dark

Light

#97C280

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8c8d70;
  --color-2: #82a09d;
  --color-3: #97c280;
  --color-4: #bed769;
  --color-5: #e5f5b0;
}

SCSS

$color-1: #8c8d70;
$color-2: #82a09d;
$color-3: #97c280;
$color-4: #bed769;
$color-5: #e5f5b0;

TAILWIND

colors: {
  'brand-1': '#8c8d70',
  'brand-2': '#82a09d',
  'brand-3': '#97c280',
  'brand-4': '#bed769',
  'brand-5': '#e5f5b0',
}

RGB Array

[140, 141, 112], [130, 160, 157], [151, 194, 128], [190, 215, 105], [229, 245, 176]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8C8D70, #82A09D, #97C280, #BED769, #E5F5B0 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: #8c8d70; --color-2: #82a09d; --color-3: #97c280; --color-4: #bed769; --color-5: #e5f5b0. 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