Teal and yellow color palettes

Teal and yellow are about 105° apart on the color wheel, close to a triadic relationship: clearly different, but less of a clash than true opposites. Pairings like this feel lively and balanced, and they leave room for a third hue or a neutral to tie them together.

In practice, teal is calm and technical, and holds contrast across a wide lightness range, 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.

Hue contrast is not text contrast: two colors can look completely different and still fail WCAG as text and background. Every palette page shows which pairs pass, and the contrast checker suggests the nearest passing shade.