What Color is Yellow-green
Yellow-green is a vibrant tertiary hue that bridges the gap between warm energy and cool serenity. It embodies the vitality of new growth and the radiance of the sun.
What color is opposite Yellow-green?
The opposite color to Yellow-green is Purple Heart (#6632cd).
Additional Information
- Color Family: Yellow-Green
- Temperature: Warm
- Associated Season: Spring
- Complementary Color: #6632CD
- Brightness: 172/255
- Saturation: 76%
Colors That Pair Well With Yellow-green
Complementary
Pair with Purple Heart for a harmonious, balanced look. Great for backgrounds and accents.
High Contrast
Use Purple Heart for maximum readability. Ideal for text or critical UI elements.
Harmonious Depth
Use lighter and darker shades for a sophisticated, cohesive design. Great for backgrounds, text, and subtle accents.
Color Variations
Tints (add white)
Tones (add grey)
Yellow-green History
In the medieval period, artists achieved this hue using sap green, a pigment derived from unripe buckthorn berries. This organic dye offered a unique transparency that allowed for subtle glazing in illuminated manuscripts. During the 18th century, the color gained cultural prominence through the creation of Chartreuse liqueur by Carthusian monks, establishing a lasting association between the shade and luxury.
By the 19th century, the development of synthetic pigments like Scheele's Green introduced more electric variations to the palette. These intense shades became a staple of the Art Nouveau movement, where designers used the color to create clashing floral patterns that broke away from traditional Victorian aesthetics. The digital era eventually standardized #9ACD32 as a core web color, ensuring its permanence in modern user interfaces.
Meaning & Psychology
This hue triggers feelings of rejuvenation and health because of its deep biological link to the emergence of spring and edible vegetation. It represents optimism and the removal of stagnant energy, encouraging a sense of movement and mental clarity. In retail environments, it is often utilized to suggest environmental consciousness and fresh beginnings.
Conversely, yellow-green carries an emotional weight of instability or acidity in certain contexts. Because it sits between two primary sensations, it can evoke a sense of sickness if used in excess or in poorly lit spaces. This dual nature makes it a color of high intensity, often used to signal a break from conventional color schemes.
In Nature
In the natural world, this specific shade is most visible in young foliage and budding shoots, where high levels of chlorophyll have not yet transitioned into darker greens. It is the signature color of the peridot gemstone and the skin of a ripe Granny Smith apple. Some species of tree frogs and insects use this hue as camouflage against sun-dappled leaves to evade predators.
How To Use Yellow-green
In professional design, yellow-green serves as a high-impact accent that provides a sense of modernity and innovation. It is most effective when paired with dark neutrals like charcoal or navy, which allow the hue's luminosity to stand out without overwhelming the viewer. It is a popular choice for tech and wellness brands looking to project a forward-thinking identity.
From a functional perspective, #9ACD32 presents specific accessibility challenges due to its high value. It frequently fails contrast requirements when placed against white backgrounds, necessitating the use of darker layering or shadows to maintain legibility. Designers must prioritize readability by testing this hue against various text colors to ensure inclusive user experiences.
Related Words
Curated Palettes
Spring Meadow
A naturalistic palette inspired by early forest growth.
Neon Twilight
A high-contrast, cyberpunk-inspired scheme for digital interfaces.
Citrus Harvest
A zestful and energetic palette for food or wellness branding.
Color Conversions
Color Blindness Simulation
CSS Snippets
color: #9ACD32;
color: rgb(154, 205, 50);
background-color: #9ACD32;
border: 3px solid #9ACD32;
box-shadow: 0 4px 12px #9ACD3266;
background: linear-gradient(135deg, #9ACD32 0%, #ffffff 100%);

Shop Premium Products in Yellow-green
This isn't just a mockup. We'll custom make high-quality home decor in this exact shade, just for you.
Ships in 3-5 daysSecure Checkout
Product Details
Add a touch of luxury to your home with our premium Eco Velvet cushions. Soft to the touch, these cushions are perfect for adding comfort and style to any room.
- Material: Soft Eco Velvet.
- Feel: Velvety soft finish.
- Print: Double-sided, all-over vibrant color using water-based inks.
- Care: Machine washable at 30°C.
- Construction: Handmade to order with a concealed zipper.
Eco Credentials
We believe in sustainable style. Our cushions are crafted with the planet in mind.
- Made to Order: Produced only when you order, eliminating overproduction and waste.
- Water-Based Inks: Printed using neo-pigment, water-based inks that are non-hazardous, toxin-free, and vegan-friendly.
- Local Fulfilment: Produced locally where possible to reduce carbon emissions from transport.
- Vegan Friendly: No animal products are used in the production of these cushions.
What Goes With Yellow-green?
Explore color palettes containing Yellow-green and discover harmonious combinations for your designs.
Analogous
Complementary
Split-complementary
Accessibility
Contrast with Black and White
Contrast with Black
UI Examples
"Color is a power which directly influences the soul."
Contrast Ratio
Contrast with White
UI Examples
"Color is a power which directly influences the soul."
Contrast Ratio
Closest Color Matches
Prismacolor
Chartreuse
#PC989 • #C7D35C
Prismacolor
Neon Yellow
#PC1035 • #FFFF3B
Polychromos
may green
#170 • #9FBB56
Similar Colors
View all Yellow-Green colors →Colors with similar hex values and appearance to Yellow-green
Frequently Asked Questions
What is the hex code for Yellow-green?
What colors go with Yellow-green?
Is Yellow-green accessible for text?
How do I use Yellow-green in CSS?
You can use Yellow-green in CSS with its hex code. Here is an example class:
.yellow-green {
background-color: #9ACD32;
color: #FFFFFF;
}For more snippets including gradients, see the CSS snippets section.