Green and yellow color palettes

Green and yellow are neighbors on the color wheel (about 50° apart), an analogous pairing. Analogous schemes feel harmonious and natural because the hues share undertones; the trade-off is low hue contrast, so separate them by lightness when they sit next to each other.

In practice, green reads as growth, health and "success", and spans fresh to deep, while yellow is the brightest hue and needs a dark partner for any text. The palettes below combine both families, strongest matches first; open any of them to see its contrast matrix and copy the hex codes, CSS variables or Tailwind config.

One caution: green and yellow are among the pairs people with color vision deficiencies confuse most. Never use them as the only difference between two states (such as error and success); separate them in lightness as well, and check the palette in the color blindness simulator.