← Back to Editor

#87CE68 · #3C845C · #2D0200 · #94804D · #334127

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlogData Visualization

Color Details Color Details

#87CE68

Emerald · DarkSeaGreen · Apple Green

HEX
#87CE68
RGB
rgb(135, 206, 104)
HSL
hsl(102, 51%, 61%)
HSB
hsb(102, 50%, 81%)
CMYK
cmyk(34%, 0%, 50%, 19%)
Oklch
oklch(78.1% 0.153 136.9)

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

#3C845C

Celadon · SeaGreen · Forest Green

HEX
#3C845C
RGB
rgb(60, 132, 92)
HSL
hsl(147, 38%, 38%)
HSB
hsb(147, 55%, 52%)
CMYK
cmyk(55%, 0%, 30%, 48%)
Oklch
oklch(55.6% 0.096 156.9)

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

#2D0200

Vermilion · Black · Deep Berry

HEX
#2D0200
RGB
rgb(45, 2, 0)
HSL
hsl(3, 100%, 9%)
HSB
hsb(3, 100%, 18%)
CMYK
cmyk(0%, 96%, 100%, 82%)
Oklch
oklch(19.0% 0.073 31.6)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#94804D

Ochre · Gray · Honey Gold

HEX
#94804D
RGB
rgb(148, 128, 77)
HSL
hsl(43, 32%, 44%)
HSB
hsb(43, 48%, 58%)
CMYK
cmyk(0%, 14%, 48%, 42%)
Oklch
oklch(60.6% 0.073 88.8)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#334127

Celadon · DarkSlateGray · Dark Green

HEX
#334127
RGB
rgb(51, 65, 39)
HSL
hsl(92, 25%, 20%)
HSB
hsb(92, 40%, 25%)
CMYK
cmyk(22%, 0%, 40%, 75%)
Oklch
oklch(35.5% 0.047 131.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

87CE68
B069CE

Analogous

BACE69
87CE68
69CE7D

Triadic

87CE68
6987CE
CE6987

Split-Comp.

87CE68
7D69CE
CE69BA

Tetradic

87CE68
69BACE
B069CE
CE7D69

Contrast Matrix WCAG 2.1 Contrast

87CE68
3C845C
2D0200
94804D
334127
—
2.4
Fail
9.9
AAA
2.0
Fail
5.7
AA
2.4
Fail
—
4.1
AA Large
1.2
Fail
2.4
Fail
9.9
AAA
4.1
AA Large
—
4.9
AA
1.7
Fail
2.0
Fail
1.2
Fail
4.9
AA
—
2.8
Fail
5.7
AA
2.4
Fail
1.7
Fail
2.8
Fail
—
White BG
1.9Fail
4.5AA
18.7AAA
3.9AA Large
10.9AAA
Black BG
11.1AAA
4.6AA
1.1Fail
5.5AA
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A6A681
5B5C66
1A1A00
8B8B59
39392D

Deuteranopia

A29C87
575268
1D2001
8D8E5C
38372F

Tritanopia

8B9498
406D6F
2B0101
936365
343233

Achromatopsia

ADADAD
6A6A6A
0F0F0F
808080
3A3A3A

Shades & Tints Shades & Tints

#87CE68

Dark
Light

#3C845C

Dark
Light

#2D0200

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #87ce68;
  --color-2: #3c845c;
  --color-3: #2d0200;
  --color-4: #94804d;
  --color-5: #334127;
}

SCSS

$color-1: #87ce68;
$color-2: #3c845c;
$color-3: #2d0200;
$color-4: #94804d;
$color-5: #334127;

TAILWIND

colors: {
  'brand-1': '#87ce68',
  'brand-2': '#3c845c',
  'brand-3': '#2d0200',
  'brand-4': '#94804d',
  'brand-5': '#334127',
}

RGB Array

[135, 206, 104], [60, 132, 92], [45, 2, 0], [148, 128, 77], [51, 65, 39]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #87CE68, #3C845C, #2D0200, #94804D, #334127 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #87ce68; --color-2: #3c845c; --color-3: #2d0200; --color-4: #94804d; --color-5: #334127. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 nature-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