Figma color wheel
Want to find the perfect complementary or analogous colors to match yellow-green?
Skip to main content
Everything you need to know about yellow-green to inspire your next design.
Yellow-green is a lively and stimulating color that merges the freshness of green with the brightness of yellow. It sits between yellow and green on the color wheel, exuding a warm and youthful energy. With its eye-catching vibrancy, this color closely resembles chartreuse.

Shades
Tints
Tones
Hues
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Limelight
Vibrant Vortex
Island Oasis
Yellow-green is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #CCFF00
- RGB value: 80% red, 100% green and 0% 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 a few ways to consider using yellow-green in designs:
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 vibrant and fresh spectrum as yellow-green, consider:
To complement yellow-green's lively tones, consider pairing it with:
Other colors worth considering include navy blue for a bold, dynamic contrast, peach for a soft, complementary palette, and terracotta for an earthy, grounding effect.
While yellow-green is versatile, it may clash with:
Yellow-green symbolizes youth, energy, and renewal. It evokes spring's optimism and rejuvenation, embodying growth, vitality, and nature's freshness.
However, it's important to note that yellow-green can carry mixed meanings across different cultures, including negative connotations in some cultures (like sickness, cowardice, or jealousy), highlighting the need for thoughtful application.
In UI design, yellow-green offers a dynamic and fresh aesthetic, making interfaces engaging and intuitive. It’s especially effective in applications focused on health, creativity, or environmental awareness, where its vivacity can encourage user interaction and convey a brand's commitment to innovation and eco-consciousness. When used wisely, yellow-green can avoid negative connotations and infuse designs with playfulness and creativity, appealing to youthful or creative audiences.
From ancient Egyptian frescoes depicting new spring leaves to the vibrant hues in Impressionist paintings like Monet's "Water Lilies," yellow-green has long been used in art and culture to represent the cycle of life and the beauty of the changing seasons.
In the 20th century, this color story transcended artistic expression. Yellow-green gained popularity in fashion and interior design, often associated with avant-garde movements and a desire to bring the vibrancy of the outdoors into personal and shared spaces.
Contrast 1.18
#CCFF00
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Contrast 17.87
#CCFF00
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #CCFF00, known as yellow-green, has RGB values of R:204, G:255, B:0 and CMYK values of C:0.2, M:0, Y:1, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | #CCFF00 | #CCFF00 |
| RGB DECIMAL | 204, 255, 0 | RGB(204,255,0) |
| RGB PERCENTAGE | 80, 100, 0 | RGB(80%,100%,0%) |
| CMYK | 20, 0, 100, 0 | |
| HSL | 72°, 100, 50 | HSL(72,100%,50%) |
| HSV (OR HSB) | 72°, 100, 100 | |
| WEB SAFE | #CCFF00 | #CCFF00 |
| CIE-LAB | 93.605, -41.948, 90.274 | |
| XYZ | 60.661, 84.357, 13.087 | |
| xyY | 0.384, 0.534, 84.357 | |
| CIE-LCH | 93.605, 99.544, 114.923 | |
| CIE-LUV | 93.605, -24.475, 106.781 | |
| HUNTER-LAB | 91.846, -42.837, 55.844 | |
| BINARY | 11001100, 11111111, 00000000 | |
| iOS - SwiftUI | Color(red: 204/255, green: 255/255, blue: 0/255) | |
| iOS - UIKit | UIColor(red: 204/255.0, green: 255/255.0, blue: 0/255.0, alpha: 1.0) | |
| Android - Compose | Color(0xFFCCFF00) |
Want to find the perfect complementary or analogous colors to match yellow-green?
Learn more about yellow.
Learn more about green.