Green

What color is green?

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.

What does green look like on digital screens?

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.

How should I effectively use green in UI design?

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:

• Create a natural connection. Green's inherent association with nature makes it ideal for eco-friendly brands or interfaces related to plants and wellness.
• Evoke harmony and balance. Lighter greens promote a sense of calmness and tranquility, perfect for meditation apps or relaxation-focused experiences.
• Signal growth and success. Lighter greens can also represent new beginnings and growth, making them a good choice for progress bars or confirmation messages. (Some e-commerce sites use green progress bars to represent order confirmation or successful transactions.)
• Highlight important elements. Certain shades of green can stand out without overwhelming the user. Use them for call-to-action buttons or primary navigation elements to draw attention while maintaining a clean aesthetic.

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.

What are similar colors to green?

For variations within the same verdant spectrum as green, consider:

• Emerald (#006742) embodies the rich, vivid essence of the gemstone, offering a more luminous and slightly bluer hue that captures the spirit of green.
• Kelly Green (#4CBB17) is a vibrant and pure green that shares the classic appeal of green with a slightly more intense and lively character.
• Forest Green (#2E6F40) presents a deeper, more subdued tone, echoing the dense foliage of a forest canopy and embodying the tranquility of nature.
• Sea Green (#2E8B57) blends green with a hint of blue, creating a softer, more muted hue that reflects the serene and calming qualities of the sea.

What colors go with green?

To complement green's natural tones, consider pairing it with:

• Cream (#FDFBD4) provides a light and airy contrast, highlighting green's richness with its gentle, soothing presence.
• Burnt Orange (#BE5103) introduces warmth and depth, creating a harmonious, earthy palette that enhances the natural appeal of green.
• Deep Blue (#0000CD) offers a striking contrast, bringing out the vibrant energy of green with its bold and profound depth.
• Dusty Pink (#DCAE96) adds a touch of softness and femininity, pairing sweetly with green for a delicate, balanced look.
• Rich Brown (#654321) grounds the palette with its earthy, robust tones, complementing green's natural essence for a cozy, inviting vibe.

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.

What colors conflict with green?

While green is remarkably adaptable, certain combinations may prove less harmonious:

• Neon Pink (#FF69B4) can be overly vibrant, potentially clashing with green's soothing nature by creating a stark, visually jarring contrast.
• Bright Red (#FF0000), while a classic Christmas combination, can otherwise feel too bold and overwhelming, detracting from green's natural calmness.
• Dark Purple (#800080), though rich and regal, might compete too strongly with green, leading to a palette that feels overly saturated and less cohesive.
• Electric Blue (#00F0FF), with its intense vibrancy, might overshadow green, creating a palette that lacks harmony and balance.
• Bright Yellow (#FFFF00), although a natural complement in some contexts, can be too harsh and might overpower the subtlety of certain green shades, leading to a less sophisticated look.

What does green symbolize?

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.

What’s the history of green?

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.

Color variations

Shades

Tints

Tones

Hues

Color harmonies

Custom palettes

Accessibility

Contrast checker

Color simulations

Protanopia

Deuteranopia

Tritanopia

Achromatopsia

Color conversion

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.