Colors
Emerald green
Everything you need to know about emerald Green to inspire your next design.
Launch in Figma Now
Read about Emerald green
Launch in Figma Now
What color is emerald green?
Emerald green is a luxurious and sophisticated color characterized by deep bluish-green undertones. Sitting between blue and green on the color wheel, this rich, jewel-toned shade exudes opulence and vibrancy. It captures the essence of lushness and elegance, conveying a sense of luxury andrichness.
What does emerald green look like on digital screens?
Emerald green is defined by the following color codes and values to ensure consistency across various digital platforms anddevices.
- HEX code: #00674F
- RGB value: 0% red, 40.4% green and31%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 emerald green in UIdesign?
Emerald green can be a powerful tool in UI design when used thoughtfully. Here'show:
- Accentuate luxury and sophistication. Emerald green, symbolizing wealth and refinement, is perfect for luxury brands’ websites or apps. Use it in headers, footers, or as an accent color to imbue designs with an upscalefeel.
- Focus on financial and eco-friendly apps. With associations to prosperity and nature, emerald green is ideal for finance-related interfaces and eco-conscious platforms.
- Highlight important features. Use emerald green to draw attention to key features or CTA buttons. Its vividness against more subdued backgrounds can guide users to important interactions.
- Balance with gold or cream for elegance. Pair emerald green with gold accents for a regal look or cream for a more understated elegance. These combinations can elevate the visual appeal of your UI, making it feel more exclusive andinviting.
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 emerald green?
For variations within the same lush and vibrant spectrum as emerald green, consider:
- Jade Green (#00A86B) shares emerald green's deep, rich quality with a slightly brighter hue, evoking the precious stone's natural elegance.
- Teal (#069494) blends the calming qualities of blue with the refreshing essence of green, offering a cooler alternative that remains close to emerald green's vibrancy. blends the calming qualities of blue with the refreshing essence of green, offering a cooler alternative that remains close to emerald green's vibrancy.
- Pine Green (#01796F) is darker and more subdued, echoing the deep forests and providing a natural, earthy counterpart to emerald green's brightness.
- Sea Green (#2E8B57) introduces a lighter, more muted tone, maintaining the natural vibrancy while offering a softer approach to the eye-catching brilliance of emeraldgreen.
What colors go with emerald green?
To complement emerald green's regal tones, consider pairing itwith:
- Gold (#EFBF04) adds a shimmering touch of opulence, creating a luxurious contrast highlighting emerald green's richness.
- Cream (#FDFBD4) provides a soft, warm background that allows the depth of emerald green to stand out, offering a classic and refined palette.
- Navy Blue (#000080) offers a deep, sophisticated contrast, amplifying emerald green's natural elegance in a palette inspired by the earth'sdepths.
- Burnt Orange (#BE5103) brings a warm, vibrant contrast, adding an autumnal richness that complements emerald green's lushness.
- Soft Pink (#FADADD) adds a delicate, feminine touch, creating a harmonious blend that softens the intensity of emerald green with a whisper ofcolor.
Other colors worth considering include charcoal gray for a modern, chic look, lavender for a gentle, whimsical contras,; and bright white for a crisp, clean complement that enhances emerald green's natural vibrancy.
What colors conflict with emerald green?
While emerald green is versatile, it mayclashwith:
- Bright Yellow (#FFFF00) can be too harsh against emerald green, overwhelming its natural sophistication with a stark, vibrant contrast.
- Blue (#0000FF) presents an overly saturated contrast that can detract from emerald green's organic elegance, leading to a visually jarring combination.
- Hot Pink (#FF69B4), while lively, may clash with emerald green by competing for visual attention, creating a palette that is too vibrant and potentially unsettling.
- Bright Red (#FF0000) offers a classic Christmas combination, but outside of seasonal contexts, it can be too bold and contrasting, overshadowing emerald green's refinedbeauty.
- Dark Purple (#800080), though regal, may overwhelm the balance of emerald green with its intensity, leading to a heavy and less harmonious palette.
What does emerald green symbolize?
Emerald green is often associated with rejuvenation, prosperity, renewal, and growth. Linked to the precious emerald gemstone, it embodies wealth, luxury, and exclusivity. Its rich undertones make it a symbol of status andprestige.
In color psychology, emerald green can promote balance and harmony, creating environments that foster well-being and tranquility.
In UI/UX design, emerald green exudes sophistication and high quality, making it ideal for premium brands and products promoting health, wellness, and environmental consciousness.
What’s the history of emerald green?
Dating back to ancient Egypt, the emerald gemstone itself was revered as a symbol of eternal life. The color "emerald green" formally appeared in 1814, and renowned artists like Monet, Cezanne, and Van Gogh celebrated its vibrancy in many of their works. However, the original pigment was toxic and its use became banned in most of Europe by the 1880s. Eventually, and thankfully, safe, non-toxic alternatives ensured the same vibrant color without the healthrisks.
Beyond artistic expression, emerald green's connection to nature is undeniable. Ireland's nickname, the "Emerald Isle," reflects its verdant landscapes, a connection further solidified by popular culture. Pantone's selection of emerald green as the 2013 Color of the Year and Etsy's choice in 2022 are signs of its enduring appeal.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Analogous
Monochromatic
Split
Triadic
Square
Custom palettes
Emerald Odyssey
Forest Hearth
Green Fairy
Accessibility
Contrast checker
- Large Text
- Figma
- Normal Text
- How you design, align, and build matters. Do it together with Figma.
6.88:1
WCAG 2.2 Simple Contrast
Normal Text
- Pass
- AA
- 4.5:1
- Fail
- AAA
- 7:1
Large Text
- Pass
- AA
- 3:1
- Pass
- AAA
- 4.5:1
- Large Text
- Figma
- Normal Text
- How you design, align, and build matters. Do it together with Figma.
3.05:1
WCAG 2.2 Simple Contrast
Normal Text
- Fail
- AA
- 4.5:1
- Fail
- AAA
- 7:1
Large Text
- Pass
- AA
- 3:1
- Fail
- AAA
- 4.5:1
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
Color conversion
The hexadecimal color #00674F, known as emerald green, has RGB values of R:0, G:103, B:79 and CMYK values of C:1, M:0, Y:0.23,K:0.6.
| VALUE | CSS | |
|---|---|---|
| HEX | 00674F | #00674F |
| RGB DECIMAL | 0, 103, 79 | rgb(0,103,79) |
| RGB PERCENTAGE | 0, 40.4, 31 | rgb(0%,40.4%,31%) |
| CMYK | 100, 0, 23, 60 | |
| HSL | 166°, 100, 20.2 | hsl(166,100%,20.2%) |
| HSV (OR HSB) | 166°, 100, 40.4 | |
| WEB SAFE | 006666 | #006666 |
| CIE-LAB | 38.313, -32.175, 6.367 | |
| XYZ | 6.261, 10.264, 9.048 | |
| xyY | 0.245, 0.401, 10.264 | |
| CIE-LCH | 38.313, 32.799, 168.807 | |
| CIE-LUV | 38.313, -31.966, 12.299 | |
| HUNTER-LAB | 32.038, -21.183, 5.682 | |
| BINARY | 00000000, 01100111, 01001111 | |
| iOS - SwiftUI | Color(red: 0/255, green: 103/255, blue: 79/255) | |
| iOS - UIKit | UIColor(red: 0/255.0, green: 103/255.0, blue: 79/255.0, alpha: 1.0) | |
| Android - Compose | Color(0xFF00674F) |
