Avocado green is a calm, earthy hue resembling the ripe fruit's skin. It's between yellow and green on the color wheel, offering a warm vibe. With shades like olive and moss, it's perfect for designs needing a touch of nature and freshness.
Avocado Green is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #568203
- RGB value: 33.7% red, 51.0% green, 1.2% 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 Avocado Green, consider:
- Olive green (#636b2f): Offers a muted, earthy tone reminiscent of ripe avocados, sharing the same natural vibrancy and subdued richness.
- Moss green (#7e8c54): Captures a soft, earthy shade akin to the texture of an avocado, with a blend of grayish undertones that echo its unripe skin.
- Pistachio (#84b067): Mirrors the softer, fresher tones of avocado flesh, combining a lively green with yellow hints for a delicate balance.
- Army green (#5d6532): Exudes a deep, grounded hue with a subtle warmth, paralleling the hearty, full-bodied nature of avocado skins.
To complement Avocado Green, consider pairing it with:
- Coral (#FF8559): Adds warmth with its vibrant, tropical undertones, creating a lively contrast to the earthy Avocado Green.
- Blush Pink (#FF7782): Softens the palette with its subtle and gentle tone, allowing Avocado Green to remain the focal point.
- Light Yellow (#FFFFC5): Brightens the scheme with a sunny freshness that highlights Avocado Green's natural depth.
- Taupe (#54463A): Provides an understated and sophisticated backdrop, enriching the organic feel of Avocado Green.
While Avocado Green is a unique and soothing shade, it might clash with:
- Neon Orange (#FF5C00): The bright energy of neon orange can overpower avocado green's earthy tone, creating visual discord.
- Scarlet (#ED2100): Scarlet's intense warmth contrasts sharply with avocado green, leading to a jarring appearance.
- Fuchsia (#FF00FF): Fuchsia's vividness competes with avocado green, resulting in a lack of harmony between the bold hues.
- Royal Blue (#305CDE): The deep blue of royal blue contrasts heavily with avocado green, disrupting the balance with its vibrancy.
- Bright Yellow (#FFED29): Bright yellow’s intense luminosity can overshadow avocado green's subtlety, leading to visual imbalance.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Vibrant Terra
Verdant Deep
Verdant Rose
Contrast checker
Contrast 4.58
- Large Text
#568203
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Fail | |
Pass | Pass | |
Pass | Pass |
Contrast 4.59
- Large Text
#568203
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Fail | |
Pass | Pass | |
Pass | Pass |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #568203, known as Avocado Green, has RGB values of R:86, G:130, B:3 and CMYK values of C:34, M:0, Y:98, K:49.
| VALUE | CSS | |
|---|---|---|
| HEX | #568203 | #568203 |
| RGB DECIMAL | 86, 130, 3 | RGB(86,130,3) |
| RGB PERCENTAGE | 33.7, 51.0, 1.2 | RGB(33.7%,51.0%,1.2%) |
| CMYK | 34, 0, 98, 49 | |
| HSL | HSL(80.8, 95.5%, 26.1%) | HSL(80.8, 95.5%, 26.1%) |
| HSV (OR HSB) | 80.8°, 97.7, 51.0 | |
| WEB SAFE | #1021530 | #1021530 |
| BINARY | 01010110, 10000010, 00000011 | |
| iOS - SwiftUI | Color(red: 0.337, green: 0.510, blue: 0.012) | |
| iOS - UIKit | UIColor(red: 0.337, green: 0.510, blue: 0.012, alpha: 1) | |
| Android - Compose | Color(0xFF568203) |
