#86BE4D + #899E36 + #807821 + #613D13 + #491E0A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#86BE4D

Celadon · DarkSeaGreen · Olive Green

HEX

#86BE4D

RGB

rgb(134, 190, 77)

HSL

hsl(90, 47%, 52%)

HSB

hsb(90, 59%, 75%)

CMYK

cmyk(29%, 0%, 59%, 25%)

Oklch

oklch(73.9% 0.156 131.4)

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

#899E36

Grass Green · Olive · Olive Green

HEX

#899E36

RGB

rgb(137, 158, 54)

HSL

hsl(72, 49%, 42%)

HSB

hsb(72, 66%, 62%)

CMYK

cmyk(13%, 0%, 66%, 38%)

Oklch

oklch(66.2% 0.131 119.9)

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

#807821

Autumn Sage · Olive · Honey Gold

HEX

#807821

RGB

rgb(128, 120, 33)

HSL

hsl(55, 59%, 32%)

HSB

hsb(55, 74%, 50%)

CMYK

cmyk(0%, 6%, 74%, 50%)

Oklch

oklch(56.3% 0.105 104.0)

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

#613D13

Ochre · DarkOliveGreen · Cinnamon

HEX

#613D13

RGB

rgb(97, 61, 19)

HSL

hsl(32, 67%, 23%)

HSB

hsb(32, 80%, 38%)

CMYK

cmyk(0%, 37%, 80%, 62%)

Oklch

oklch(39.4% 0.075 66.1)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#491E0A

Tangerine · Maroon · Cinnamon

HEX

#491E0A

RGB

rgb(73, 30, 10)

HSL

hsl(19, 76%, 16%)

HSB

hsb(19, 86%, 29%)

CMYK

cmyk(0%, 59%, 86%, 71%)

Oklch

oklch(29.4% 0.072 43.4)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

86BE4D

854BBE

Analogous

BEBE4B

86BE4D

4BBE4B

Triadic

86BE4D

4B85BE

BE4B85

Split-Comp.

86BE4D

4B4BBE

BE4BBE

Tetradic

86BE4D

4BBEBE

854BBE

BE4B4B

Contrast Matrix WCAG 2.1 Contrast

86BE4D	899E36	807821	613D13	491E0A
—	1.4 Fail	2.1 Fail	4.3 AA Large	6.4 AA
1.4 Fail	—	1.5 Fail	3.2 AA Large	4.8 AA
2.1 Fail	1.5 Fail	—	2.1 Fail	3.1 AA Large
4.3 AA Large	3.2 AA Large	2.1 Fail	—	1.5 Fail
6.4 AA	4.8 AA	3.1 AA Large	1.5 Fail	—

White BG

2.2Fail

3.0Fail

4.5AA

9.6AAA

14.3AAA

Black BG

9.5AAA

7.0AAA

4.6AA

2.2Fail

1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9E9F68

92924F

7D7C36

51511D

36360F

Deuteranopia

9B976F

918F55

7D7E3B

545620

393C10

Tritanopia

897E83

8A6367

80474A

5F2527

471314

Achromatopsia

A0A0A0

8C8C8C

707070

434343

292929

Shades & Tints Shades & Tints

#86BE4D

Dark

Light

#899E36

Dark

Light

#807821

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #86be4d;
  --color-2: #899e36;
  --color-3: #807821;
  --color-4: #613d13;
  --color-5: #491e0a;
}

SCSS

$color-1: #86be4d;
$color-2: #899e36;
$color-3: #807821;
$color-4: #613d13;
$color-5: #491e0a;

TAILWIND

colors: {
  'brand-1': '#86be4d',
  'brand-2': '#899e36',
  'brand-3': '#807821',
  'brand-4': '#613d13',
  'brand-5': '#491e0a',
}

RGB Array

[134, 190, 77], [137, 158, 54], [128, 120, 33], [97, 61, 19], [73, 30, 10]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #86BE4D, #899E36, #807821, #613D13, #491E0A is ideal for: tech websites, dark mode UIs, game UIs. 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: #86be4d; --color-2: #899e36; --color-3: #807821; --color-4: #613d13; --color-5: #491e0a. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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