Kelly green is a bright, vivid green positioned between yellow and blue on the color wheel. This hue exudes freshness with a hint of blue, reminiscent of lush landscapes and nature scenes. It's associated with Irish heritage, wealth, and youthful energy.
Kelly green is represented by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #4CBB17
- RGB value: 29.8% red, 73.3% green, and 9% 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.
Here are some ways to use kelly green in your UI design::
- Promote nature and growth themes. Because green is universally associated with nature, kelly green becomes a powerful color choice for companies in sustainability, health, and wellness industries.
- Highlight elements. Kelly green's vivid tones contrast beautifully with neutrals and cooler hues, making it an ideal choice for emphasizing key elements in your design.
- Capture freshness. Use kelly green's vibrant hue to bring energy and freshness to your website design.
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 brightness as kelly green, consider:
- Green (#008000) is a less vibrant base shade of kelly green.
- Lime green (#89F336) is a bit brighter and more yellow than kelly green.
- Teal (#069494) shares the same brightness as kelly green but is more blue than green.
- Forest green (#2E6F40) evokes the same feeling of nature as kelly green but is deeper and richer.
To complement kelly green’s freshness, consider pairing it with:
- Mint green (#ADEBB3) can create a light and cool palette when paired with kelly green.
- Olive green (#636B2F) adds depth and richness to kelly green for an earthy feeling.
- Cream (#FDFBD4) brings out the yellow tones of kelly green for an inviting palette.
- Red (#FF0000) combined with kelly green creates a festive feel––think of Christmas decorations.
Other colors worth considering include forest green to expand on the natural feel, gray to maintain a sophisticated aesthetic, and purple for an eye-catching experience.
While kelly green is vivid, it may clash with:
- Electric blue (#00F0FF) competes for attention due to its similar intensity.
- Yellow (#FFFF00) can create a visually jarring competition for attention as they fight for dominance.
- Neon green (#2CFF05) shares a similar brightness as kelly green and lacks harmony.
- Tan (#D6B588) can create a muddy or confused appearance due to its light yellowness.
- Magenta (#FF00FF) is a red-based purple that creates a conflicting relationship with kelly green.
Like most green hues, kelly green represents nature and springtime. It symbolizes good luck, wealth, and ambition. Kelly green also has a strong cultural connection to Ireland, reflecting its lush landscapes and the common Irish surname Kelly.
Kelly green is positioned between blue and yellow on the color wheel, blending the calmness of blue with the cheerfulness of yellow. This mix makes kelly green a color that evokes feelings of bliss, hope, and growth, making it an uplifting choice in color psychology.
For UI/UX design, kelly green offers versatility. Its vibrancy can create user experiences that evoke healthfulness and optimism. Kelly green is a natural fit for designs related to the environment or health. Its bright nature also makes it excellent for drawing attention to specific elements on websites, enhancing visibility and user interaction.
Kelly green is closely tied to Ireland, named after the common Irish surname Kelly and inspired by the country's lush green landscape.
It’s difficult to pinpoint the exact date of the first recorded use of kelly green. However, kelly green became widely used in the 19th or early 20th century in clothing, textiles, and other decorative items.
Today, kelly green is used in product design to represent growth, sustainability, and health. It's also famously worn by the Philadelphia Eagles, appearing on their jerseys and fan gear.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Green Juice
Green Galaxy
Fresh Mojito
Contrast Checker
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
2.49:1
WCAG 2.2 Simple Contrast
Normal Text
- Fail
- AA
- 4.5:1
- Fail
- AAA
- 7:1
Large Text
- Fail
- AA
- 3:1
- Fail
- AAA
- 4.5:1
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
8.43:1
WCAG 2.2 Simple Contrast
Normal Text
- Pass
- AA
- 4.5:1
- Pass
- AAA
- 7:1
Large Text
- Pass
- AA
- 3:1
- Pass
- AAA
- 4.5:1
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #4CBB17, known as kelly green has RGB values of R:76 G:187, B:23 and CMYK values of C:59, M:0, Y:88, K:27.
| VALUE | CSS | |
|---|---|---|
| HEX | #4CBB17 | #4CBB17 |
| RGB DECIMAL | 76, 187, 23 | RGB(76, 187, 23) |
| RGB PERCENTAGE | 29.8, 73.3, 9 | RGB(29.8%,73.3%,9%) |
| CMYK | 59, 0, 88, 27 | |
| HSL | 100.6°, 78.1, 41.2 | HSL(100.6°, 78.1%, 41.2%) |
| HSV (OR HSB) | 100.6°, 87.7, 73.3 | |
| WEB SAFE | #33CC00 | #33CC00 |
| CIE-LAB | 67.38, -57.583, 64.11 | |
| XYZ | 20.905, 37.137, 6.877 | |
| xyY | 0.322, 0.572, 37.137 | |
| CIE-LCH | 67.38, 86.174, 131.93 | |
| CIE-LUV | 67.38, -50.935, 78.861 | |
| HUNTER-LAB | 60.94, -45.414, 35.967 | |
| BINARY | 01001100, 10111011, 00010111 | |
| iOS - SwiftUI | Color(red: 0.298, green: 0.733, blue: 0.09) | |
| iOS - UIKit | UIColor(red: 0.298, green: 0.733, blue: 0.09, alpha: 1) | |
| Android - Compose | Color(0xFF4CBB17) |
