← Back to Editor

#7B8A68 · #61A47C · #7FB384 · #9DC28C · #D4EB51

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGrounded

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#7B8A68

Grass Green · Gray · Olive Green

HEX
#7B8A68
RGB
rgb(123, 138, 104)
HSL
hsl(86, 14%, 47%)
HSB
hsb(86, 25%, 54%)
CMYK
cmyk(11%, 0%, 25%, 46%)
Oklch
oklch(61.2% 0.053 127.2)

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

#61A47C

Celadon · CadetBlue · Olive Green

HEX
#61A47C
RGB
rgb(97, 164, 124)
HSL
hsl(144, 27%, 51%)
HSB
hsb(144, 41%, 64%)
CMYK
cmyk(41%, 0%, 24%, 36%)
Oklch
oklch(66.3% 0.091 156.6)

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

#7FB384

Celadon · DarkSeaGreen · Olive Green

HEX
#7FB384
RGB
rgb(127, 179, 132)
HSL
hsl(126, 25%, 60%)
HSB
hsb(126, 29%, 70%)
CMYK
cmyk(29%, 0%, 26%, 30%)
Oklch
oklch(71.7% 0.087 147.0)

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

#9DC28C

Celadon · DarkSeaGreen · Apple Green

HEX
#9DC28C
RGB
rgb(157, 194, 140)
HSL
hsl(101, 31%, 65%)
HSB
hsb(101, 28%, 76%)
CMYK
cmyk(19%, 0%, 28%, 24%)
Oklch
oklch(77.3% 0.085 136.0)

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

#D4EB51

Fresh Green · GreenYellow · Sunflower

HEX
#D4EB51
RGB
rgb(212, 235, 81)
HSL
hsl(69, 79%, 62%)
HSB
hsb(69, 66%, 92%)
CMYK
cmyk(10%, 0%, 66%, 8%)
Oklch
oklch(89.5% 0.176 117.4)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7B8A68
766789

Analogous

898667
7B8A68
698967

Triadic

7B8A68
677A89
89677A

Split-Comp.

7B8A68
676989
866789

Tetradic

7B8A68
678986
766789
896769

Contrast Matrix WCAG 2.1 Contrast

7B8A68
61A47C
7FB384
9DC28C
D4EB51
—
1.3
Fail
1.5
Fail
1.9
Fail
2.8
Fail
1.3
Fail
—
1.2
Fail
1.5
Fail
2.2
Fail
1.5
Fail
1.2
Fail
—
1.2
Fail
1.8
Fail
1.9
Fail
1.5
Fail
1.2
Fail
—
1.5
Fail
2.8
Fail
2.2
Fail
1.8
Fail
1.5
Fail
—
White BG
3.7AA Large
3.0Fail
2.4Fail
2.0Fail
1.3Fail
Black BG
5.7AA
7.1AAA
8.7AAA
10.5AAA
15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

818270
7E7F86
96968F
ADAD99
DEDE76

Deuteranopia

818072
7A7588
938F92
ABA89C
DDDB7F

Tritanopia

7C7778
648D8F
82989A
9FA3A6
D5949A

Achromatopsia

828282
8B8B8B
9E9E9E
B1B1B1
D3D3D3

Shades & Tints Shades & Tints

#7B8A68

Dark
Light

#61A47C

Dark
Light

#7FB384

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7b8a68;
  --color-2: #61a47c;
  --color-3: #7fb384;
  --color-4: #9dc28c;
  --color-5: #d4eb51;
}

SCSS

$color-1: #7b8a68;
$color-2: #61a47c;
$color-3: #7fb384;
$color-4: #9dc28c;
$color-5: #d4eb51;

TAILWIND

colors: {
  'brand-1': '#7b8a68',
  'brand-2': '#61a47c',
  'brand-3': '#7fb384',
  'brand-4': '#9dc28c',
  'brand-5': '#d4eb51',
}

RGB Array

[123, 138, 104], [97, 164, 124], [127, 179, 132], [157, 194, 140], [212, 235, 81]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #7B8A68, #61A47C, #7FB384, #9DC28C, #D4EB51 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: #7b8a68; --color-2: #61a47c; --color-3: #7fb384; --color-4: #9dc28c; --color-5: #d4eb51. 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 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