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 and richness.

Emerald green is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #00674F
- RGB value: 0% red, 40.4% green and 31% 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.
Emerald green can be a powerful tool in UI design when used thoughtfully. Here's how:
- 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 upscale feel.
- 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 and inviting.
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 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 emerald green.
To complement emerald green's regal tones, consider pairing it with:
- 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's depths.
- 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 of color.
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.
While emerald green is versatile, it may clash with:
- 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 refined beauty.
- Dark Purple (#800080), though regal, may overwhelm the balance of emerald green with its intensity, leading to a heavy and less harmonious palette.
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 and prestige.
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.
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 health risks.
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
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Emerald Odyssey
Forest Hearth
Green Fairy
Contrast checker
Contrast 6.88
- Large Text
#00674F
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Fail | |
Pass | Pass | |
Pass | Pass |
Contrast 3.05
- Large Text
#00674F
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Pass | Fail | |
Pass | Fail |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
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) |


