Balanced
Equal weight to both colors with a neutral holding them apart.
Best text pair: 2.95:1
Green and Lavender Color Palette
Six ready-to-use palettes combining green (#2fa360) and lavender (#c3b3e6). Their hues sit 114 degrees apart, a wide but not opposing interval, which keeps the pairing lively without tipping into tension.
Light and airy
Both hues lifted toward their tints for a softer, more editorial feel.
Best text pair: 2.29:1
Deep and moody
Both hues pushed down in lightness, anchored by a near-black.
Best text pair: 4.29:1
Muted
Saturation pulled back so neither color competes for attention.
Best text pair: 6.76:1
High contrast
Maximum separation in lightness, tuned to clear WCAG AA.
Best text pair: 13.57:1
One accent
The first color dominates and the second appears only as an accent.
Best text pair: 8.29:1
How to balance green and lavender
Green sits where the eye is most sensitive, so small hue shifts are unusually visible. Lavender is one of very few pastels that survives being used as a brand primary.
When two colors this distinct share a layout, the deciding factor is proportion rather than the exact hex values. Give one of them roughly 60% of the coloured surface, the other about 30%, and reserve the last tenth for an accent that appears rarely enough to still mean something. Split them evenly and the eye has nowhere to rest.
The other common failure is matching their saturation exactly. Two colors at 85% saturation will fight regardless of hue. Pulling one of them back by twenty or thirty points immediately establishes which is the lead and which is the support, and the pairing stops feeling like a compromise.
More combinations
Green and Lavender FAQ
Do green and lavender go together?
Yes. Their hues are 114 degrees apart, which makes the relationship a wide but not opposing interval, which keeps the pairing lively without tipping into tension. The six palettes on this page show the range, from a soft tinted version to a high-contrast one.
What are the hex codes for green and lavender?
The base values used here are #2fa360 for green and #c3b3e6 for lavender. Each palette below adjusts lightness and saturation around those anchors rather than changing the hues.
What third color goes with green and lavender?
A near-neutral tinted toward the midpoint of the two hues. Every palette on this page includes one for exactly this reason: two saturated colors sitting directly against each other almost always need a quiet surface between them.
Can I use green and lavender for a website?
Yes, but assign roles before you assign colors. Use the lightest swatch for backgrounds, the darkest for text, and let only one of the two hues carry interactive elements. Using both for buttons removes the signal that a button is a button.