Figma color wheel
Want to find the perfect complementary or analogous colors to match green?
Skip to main content
Everything you need to know about green to inspire your next design.
Green is a deep and classic shade that embodies nature and vitality. It sits squarely between blue and yellow on the color wheel—a quintessential, saturated hue, neither veering towards light lime nor dark forest tones. It's an ideal color for conveying growth, stability, and the richness of the natural world, making it a go-to color in designs that aim to inspire and rejuvenate.

Shades
Tints
Tones
Hues
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Green Gables
Avant-Garden
Green Goddess
Green is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #008000
- RGB value: 0% red, 50.2% green and 0% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.
Green offers a vast spectrum, from the refreshing vibrancy of lime to the calming depth of forest green. This versatility allows you to leverage its strengths strategically:
Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.
For variations within the same verdant spectrum as green, consider:
To complement green's natural tones, consider pairing it with:
Other colors worth considering include slate gray for a modern, neutral backdrop, lavender for a gentle, contrasting pop, and yellow for a bright, cheerful contrast that invokes the liveliness of spring.
While green is remarkably adaptable, certain combinations may prove less harmonious:
Green symbolizes growth, renewal, and life itself. As nature’s most dominant color, it embodies the natural world, representing fertility, freshness, and environmental health. It suggests stability and endurance, highlighting the earth's vitality and the cycle of life.
In color psychology, green is associated with balance and harmony. It has a calming effect, reducing stress and fostering a sense of peace and relaxation. Green encourages feelings of safety, security, and hope, promoting physical and emotional well-being. It boosts creativity and productivity, making it perfect for spaces that aim to soothe and energize.
In UI/UX design, green can create a relaxed and welcoming digital environment, encouraging engagement and signifying positive actions, such as successful transactions or confirmation messages. Its versatility makes it suitable for various applications, from invoking luxury and exclusivity with darker shades to promoting fun and vitality with lighter hues.
In ancient Egypt, green represented fertility and new life, adorning depictions of Osiris, the god of vegetation. Similarly, the Romans linked green to victory and spring, using green laurels for their triumphant generals.
During the Middle Ages, green held a dual meaning. It symbolized both courtly love and, conversely, envy and illness. The Renaissance marked a turning point. The development of stable green pigments allowed artists to capture nature's vibrant hues more accurately, and green became associated with harmony and social status due to the rarity and expense of these new dyes.
By the 18th and 19th centuries, the invention of synthetic dyes made green more accessible, influencing fashion and interior design. The late 19th century saw green take on a new symbolism (environmentalism), reflecting its historical connection to life and growth.
Contrast 5.14
#008000
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Fail | |
Pass | Pass | |
Pass | Pass |
Contrast 4.09
#008000
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Pass | Fail | |
Pass | Fail |
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #008000, known as green, has RGB values of R:0, G:128, B:0 and CMYK values of C:1, M:0, Y:1, K:0.5.
| VALUE | CSS | |
|---|---|---|
| HEX | 008000 | #008000 |
| RGB DECIMAL | 0, 128, 0 | rgb(0,128,0) |
| RGB PERCENTAGE | 0, 50.2, 0 | rgb(0%,50.2%,0%) |
| CMYK | 100, 0, 100, 50 | |
| HSL | 120°, 100, 25.1 | hsl(120,100%,25.1%) |
| HSV (OR HSB) | 120°, 100, 50.2 | |
| WEB SAFE | 009900 | #009900 |
| CIE-LAB | 46.228, -51.699, 49.897 | |
| XYZ | 7.719, 15.437, 2.573 | |
| xyY | 0.3, 0.6, 15.437 | |
| CIE-LCH | 46.228, 71.85, 136.016 | |
| CIE-LUV | 46.228, -43.774, 56.589 | |
| HUNTER-LAB | 39.291, -33.692, 23.621 | |
| BINARY | 00000000, 10000000, 00000000 | |
| iOS - SwiftUI | Color(red: 0/255, green: 128/255, blue: 0/255) | |
| iOS - UIKit | UIColor(red: 0/255.0, green: 128/255.0, blue: 0/255.0, alpha: 1.0) | |
| Android - Compose | Color(0xFF008000) |
Want to find the perfect complementary or analogous colors to match green?
Learn more about the color burgundy.
Learn more about mint green.