← Back to Editor

#0B874D · #65C259 · #89D95B · #B1F088 · #D8E9B9

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

VibrantFreshCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Landing PageMobile AppData Visualization

Color Details Color Details

#0B874D

Mineral Blue · SeaGreen · Forest Green

HEX
#0B874D
RGB
rgb(11, 135, 77)
HSL
hsl(152, 85%, 29%)
HSB
hsb(152, 92%, 53%)
CMYK
cmyk(92%, 0%, 43%, 47%)
Oklch
oklch(54.9% 0.133 154.9)

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

#65C259

Celadon · MediumSeaGreen · Olive Green

HEX
#65C259
RGB
rgb(101, 194, 89)
HSL
hsl(113, 46%, 55%)
HSB
hsb(113, 54%, 76%)
CMYK
cmyk(48%, 0%, 54%, 24%)
Oklch
oklch(73.3% 0.168 141.5)

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

#89D95B

Emerald · LightGreen · Olive Green

HEX
#89D95B
RGB
rgb(137, 217, 91)
HSL
hsl(98, 62%, 60%)
HSB
hsb(98, 58%, 85%)
CMYK
cmyk(37%, 0%, 58%, 15%)
Oklch
oklch(80.7% 0.179 135.7)

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

#B1F088

Emerald · LightGreen · Apple Green

HEX
#B1F088
RGB
rgb(177, 240, 136)
HSL
hsl(96, 78%, 74%)
HSB
hsb(96, 43%, 94%)
CMYK
cmyk(26%, 0%, 43%, 6%)
Oklch
oklch(88.9% 0.149 134.1)

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

#D8E9B9

Willow Green · Wheat · Mint Green

HEX
#D8E9B9
RGB
rgb(216, 233, 185)
HSL
hsl(81, 52%, 82%)
HSB
hsb(81, 21%, 91%)
CMYK
cmyk(7%, 0%, 21%, 9%)
Oklch
oklch(90.9% 0.066 123.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0B874D
890B46

Analogous

0B890F
0B874D
0B8589

Triadic

0B874D
4E0B89
894E0B

Split-Comp.

0B874D
890B85
890F0B

Tetradic

0B874D
0F0B89
890B46
85890B

Contrast Matrix WCAG 2.1 Contrast

0B874D
65C259
89D95B
B1F088
D8E9B9
—
2.1
Fail
2.6
Fail
3.4
AA Large
3.5
AA Large
2.1
Fail
—
1.3
Fail
1.7
Fail
1.7
Fail
2.6
Fail
1.3
Fail
—
1.3
Fail
1.3
Fail
3.4
AA Large
1.7
Fail
1.3
Fail
—
1.0
Fail
3.5
AA Large
1.7
Fail
1.3
Fail
1.0
Fail
—
White BG
4.6AA
2.2Fail
1.7Fail
1.3Fail
1.3Fail
Black BG
4.6AA
9.4AAA
12.1AAA
15.7AAA
16.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

41425B
8D8E72
ACAC79
CCCDA1
DFE0C5

Deuteranopia

3A305E
888179
A7A181
C9C4A7
DEDDC7

Tritanopia

116669
6A868B
8D9297
B4B5B9
D9CED0

Achromatopsia

5B5B5B
9A9A9A
B3B3B3
D1D1D1
DEDEDE

Shades & Tints Shades & Tints

#0B874D

Dark
Light

#65C259

Dark
Light

#89D95B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0b874d;
  --color-2: #65c259;
  --color-3: #89d95b;
  --color-4: #b1f088;
  --color-5: #d8e9b9;
}

SCSS

$color-1: #0b874d;
$color-2: #65c259;
$color-3: #89d95b;
$color-4: #b1f088;
$color-5: #d8e9b9;

TAILWIND

colors: {
  'brand-1': '#0b874d',
  'brand-2': '#65c259',
  'brand-3': '#89d95b',
  'brand-4': '#b1f088',
  'brand-5': '#d8e9b9',
}

RGB Array

[11, 135, 77], [101, 194, 89], [137, 217, 91], [177, 240, 136], [216, 233, 185]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #0B874D, #65C259, #89D95B, #B1F088, #D8E9B9 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #0b874d; --color-2: #65c259; --color-3: #89d95b; --color-4: #b1f088; --color-5: #d8e9b9. 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. 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 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