← Back to Editor

#007700 · #3F9B00 · #7FBF00 · #BFDF00 · #FFFF00

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

VibrantFresh

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Landing PageMobile App

Color Details Color Details

#007700

Pine Green · Green · Forest Green

HEX
#007700
RGB
rgb(0, 119, 0)
HSL
hsl(120, 100%, 23%)
HSB
hsb(120, 100%, 47%)
CMYK
cmyk(100%, 0%, 100%, 53%)
Oklch
oklch(49.3% 0.168 142.5)

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

#3F9B00

Pine Green · ForestGreen · Forest Green

HEX
#3F9B00
RGB
rgb(63, 155, 0)
HSL
hsl(96, 100%, 30%)
HSB
hsb(96, 100%, 61%)
CMYK
cmyk(59%, 0%, 100%, 39%)
Oklch
oklch(60.9% 0.188 137.9)

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

#7FBF00

Grass Green · Olive · Forest Green

HEX
#7FBF00
RGB
rgb(127, 191, 0)
HSL
hsl(80, 100%, 37%)
HSB
hsb(80, 100%, 75%)
CMYK
cmyk(34%, 0%, 100%, 25%)
Oklch
oklch(73.3% 0.196 129.7)

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

#BFDF00

Autumn Sage · GreenYellow · Honey Gold

HEX
#BFDF00
RGB
rgb(191, 223, 0)
HSL
hsl(69, 100%, 44%)
HSB
hsb(69, 100%, 87%)
CMYK
cmyk(14%, 0%, 100%, 13%)
Oklch
oklch(85.0% 0.201 119.6)

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

#FFFF00

Autumn Sage · Yellow · Honey Gold

HEX
#FFFF00
RGB
rgb(255, 255, 0)
HSL
hsl(60, 100%, 50%)
HSB
hsb(60, 100%, 100%)
CMYK
cmyk(0%, 0%, 100%, 0%)
Oklch
oklch(96.8% 0.211 109.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

007700
750075

Analogous

3B7500
007700
00753B

Triadic

007700
000075
750000

Split-Comp.

007700
3B0075
75003B

Tetradic

007700
003B75
750075
753B00

Contrast Matrix WCAG 2.1 Contrast

007700
3F9B00
7FBF00
BFDF00
FFFF00
—
1.6
Fail
2.6
Fail
3.8
AA Large
5.4
AA
1.6
Fail
—
1.6
Fail
2.3
Fail
3.3
AA Large
2.6
Fail
1.6
Fail
—
1.5
Fail
2.1
Fail
3.8
AA Large
2.3
Fail
1.5
Fail
—
1.4
Fail
5.4
AA
3.3
AA Large
2.1
Fail
1.4
Fail
—
White BG
5.8AA
3.6AA Large
2.2Fail
1.5Fail
1.1Fail
Black BG
3.6AA Large
5.9AA
9.4AAA
13.8AAA
19.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

34351D
676826
9B9B2E
CDCD36
FFFF3E

Deuteranopia

2D2424
625B2F
979239
CBC943
FFFF4D

Tritanopia

063439
44434A
82535B
C1616A
FF6E79

Achromatopsia

464646
6E6E6E
969696
BCBCBC
E2E2E2

Shades & Tints Shades & Tints

#007700

Dark
Light

#3F9B00

Dark
Light

#7FBF00

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #007700;
  --color-2: #3f9b00;
  --color-3: #7fbf00;
  --color-4: #bfdf00;
  --color-5: #ffff00;
}

SCSS

$color-1: #007700;
$color-2: #3f9b00;
$color-3: #7fbf00;
$color-4: #bfdf00;
$color-5: #ffff00;

TAILWIND

colors: {
  'brand-1': '#007700',
  'brand-2': '#3f9b00',
  'brand-3': '#7fbf00',
  'brand-4': '#bfdf00',
  'brand-5': '#ffff00',
}

RGB Array

[0, 119, 0], [63, 155, 0], [127, 191, 0], [191, 223, 0], [255, 255, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #007700, #3F9B00, #7FBF00, #BFDF00, #FFFF00 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs. Vivid colors effectively attract user attention. 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: #007700; --color-2: #3f9b00; --color-3: #7fbf00; --color-4: #bfdf00; --color-5: #ffff00. 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 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