Emerald is a lush and vibrant green that exudes luxury and elegance. Nestled between green and blue on the color wheel, its rich, jewel-toned hue sparkles like no other. Echoing shades like jade and teal, emerald adds sophistication to designs, perfect for creating a classic and opulent feel.
Emerald is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #50C878
- RGB value: 31.4% red, 78.4% green, 47.1% 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
For variations within the same spectrum as emerald, consider:
- Jade Green (#00bb77): Jade Green channels the vibrant, lush feel of Emerald with its rich green hue, creating a lively and invigorating visual similar to dense foliage.
- Dark Green (#06402b): Offering a deeper, more intense shade, Dark Green complements Emerald's luxurious vibe while maintaining a profound natural serenity.
- Forest Green (#2e6f40): Forest Green embodies the tranquil essence of nature with its deep, grounding hue, closely mirroring Emerald's captivating green tone.
- Hunter Green (#2c5f34): Hunter Green reflects the deep, velvety richness akin to Emerald, evoking the serene depths of a dense forest with its beautiful, dark hue.
To complement Emerald, consider pairing it with:
- Peach (#FFD3AC): This soft, warm hue balances the coolness of Emerald, crafting a gentle, harmonious palette reminiscent of spring.
- Champagne (#F7E6CA): Its light, muted tone offers a subtle contrast that allows Emerald's vibrant qualities to shine, adding elegance to the overall design.
- Royal blue (#305CDE): This bold blue contrasts beautifully with Emerald's rich green, creating a regal and dynamic look. It evokes an eye-catching, jewel-toned combination reminiscent of gemstones.
- Beige (#EDE8D0): With its neutral backdrop, beige provides a calming counterpoint, letting Emerald take center stage without overpowering the palette.
- Burnt orange (#BE5103): A warm, earthy contrast enhances Emerald's vibrant green, crafting a striking, nature-inspired combination that feels balanced and dynamic.
While Emerald (HEX #00674F) is a rich and vibrant hue often associated with luxury and nature, certain colors may conflict with it, creating less harmonious combinations:
- Neon Pink (#FF13F0): Neon Pink's brightness creates a sharp contrast against Emerald, making both colors visually compete rather than complement.
- Rust (#B7410E): Rust has an earthy, warm tone that can clash with the cooler, more vivid quality of Emerald, resulting in a discordant mix.
- Crimson Red (#B22222): Crimson Red's intensity can overshadow Emerald’s elegance, leading to a pairing that feels visually heavy and unbalanced.
- Neon Orange (#FF5C00): The boldness of Neon Orange can overwhelm Emerald’s subtlety, creating a jarring and overly vibrant palette.
- Chartreuse (#CCFF00): Chartreuse’s high saturation can overshadow the depth of Emerald, making for a visually noisy and unrefined combination.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Verdant Splash
Botanic Blush
Enchanted Meadow
Contrast checker
Contrast 2.13
- Large Text
#50C878
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Contrast 9.87
- Large Text
#50C878
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #50C878, known as Emerald, has RGB values of R:80, G:200, B:120 and CMYK values of C:60, M:0, Y:40, K:22.
| VALUE | CSS | |
|---|---|---|
| HEX | #50C878 | #50C878 |
| RGB DECIMAL | 80, 200, 120 | RGB(80,200,120) |
| RGB PERCENTAGE | 31.4, 78.4, 47.1 | RGB(31.4%,78.4%,47.1%) |
| CMYK | 60, 0, 40, 22 | |
| HSL | HSL(140.0, 52.2%, 54.9%) | HSL(140.0, 52.2%, 54.9%) |
| HSV (OR HSB) | 140.0°, 60.0, 78.4 | |
| WEB SAFE | #102204102 | #102204102 |
| BINARY | 01010000, 11001000, 01111000 | |
| iOS - SwiftUI | Color(red: 0.314, green: 0.784, blue: 0.471) | |
| iOS - UIKit | UIColor(red: 0.314, green: 0.784, blue: 0.471, alpha: 1) | |
| Android - Compose | Color(0xFF50C878) |
