← Back to Editor

#95A478 · #BED173 · #D3F822 · #095057 · #20314C

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlogData Visualization

Color Details Color Details

#95A478

Grass Green · DarkSeaGreen · Olive Green

HEX
#95A478
RGB
rgb(149, 164, 120)
HSL
hsl(80, 19%, 56%)
HSB
hsb(80, 27%, 64%)
CMYK
cmyk(9%, 0%, 27%, 36%)
Oklch
oklch(69.5% 0.064 123.3)

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

#BED173

Willow Green · Tan · Apple Green

HEX
#BED173
RGB
rgb(190, 209, 115)
HSL
hsl(72, 51%, 64%)
HSB
hsb(72, 45%, 82%)
CMYK
cmyk(9%, 0%, 45%, 18%)
Oklch
oklch(82.6% 0.121 118.5)

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

#D3F822

Grass Green · GreenYellow · Olive Green

HEX
#D3F822
RGB
rgb(211, 248, 34)
HSL
hsl(70, 94%, 55%)
HSB
hsb(70, 86%, 97%)
CMYK
cmyk(15%, 0%, 86%, 3%)
Oklch
oklch(92.0% 0.213 120.2)

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

#095057

Lake Blue · DarkSlateGray · Peacock Green

HEX
#095057
RGB
rgb(9, 80, 87)
HSL
hsl(185, 81%, 19%)
HSB
hsb(185, 90%, 34%)
CMYK
cmyk(90%, 8%, 0%, 66%)
Oklch
oklch(39.5% 0.064 205.5)

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

#20314C

Indigo · DarkSlateGray · Prussian Blue

HEX
#20314C
RGB
rgb(32, 49, 76)
HSL
hsl(217, 41%, 21%)
HSB
hsb(217, 58%, 30%)
CMYK
cmyk(58%, 36%, 0%, 70%)
Oklch
oklch(31.2% 0.054 259.3)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

95A478
8879A4

Analogous

A49D79
95A478
81A479

Triadic

95A478
7996A4
A47996

Split-Comp.

95A478
7981A4
9D79A4

Tetradic

95A478
79A49D
8879A4
A47981

Contrast Matrix WCAG 2.1 Contrast

95A478
BED173
D3F822
095057
20314C
—
1.6
Fail
2.2
Fail
3.4
AA Large
4.9
AA
1.6
Fail
—
1.4
Fail
5.5
AA
7.8
AAA
2.2
Fail
1.4
Fail
—
7.5
AAA
10.7
AAA
3.4
AA Large
5.5
AA
7.5
AAA
—
1.4
Fail
4.9
AA
7.8
AAA
10.7
AAA
1.4
Fail
—
White BG
2.7Fail
1.7Fail
1.2Fail
9.1AAA
13.1AAA
Black BG
7.9AAA
12.6AAA
17.2AAA
2.3Fail
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9B9C83
C6C68A
E3E356
282855
272845

Deuteranopia

9B9A85
C5C48F
E1DE62
241E55
262544

Tritanopia

968B8D
BF9CA0
D57F88
0D5454
21403F

Achromatopsia

9A9A9A
C1C1C1
D5D5D5
3C3C3C
2F2F2F

Shades & Tints Shades & Tints

#95A478

Dark
Light

#BED173

Dark
Light

#D3F822

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #95a478;
  --color-2: #bed173;
  --color-3: #d3f822;
  --color-4: #095057;
  --color-5: #20314c;
}

SCSS

$color-1: #95a478;
$color-2: #bed173;
$color-3: #d3f822;
$color-4: #095057;
$color-5: #20314c;

TAILWIND

colors: {
  'brand-1': '#95a478',
  'brand-2': '#bed173',
  'brand-3': '#d3f822',
  'brand-4': '#095057',
  'brand-5': '#20314c',
}

RGB Array

[149, 164, 120], [190, 209, 115], [211, 248, 34], [9, 80, 87], [32, 49, 76]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #95A478, #BED173, #D3F822, #095057, #20314C is ideal for: 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: #95a478; --color-2: #bed173; --color-3: #d3f822; --color-4: #095057; --color-5: #20314c. 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 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