Rainbow Gradient Palettes

A rainbow gradient is any ramp whose stops span three or more color families, which makes this the most varied hub in the library. Some of the entries here move quickly through the spectrum and read as a prism; others take a long slow path from a cool blue through green into a warm yellow, which reads as a landscape rather than a rainbow.

Multi-family ramps are difficult to use well: they carry a lot of information, so they work best as a single statement, a border, a thin rule or a card that is meant to be the loudest thing on the page. Each gradient below lists its stops and the exact CSS, with a link to a page carrying its angle and values.

Because these ramps span several families, they pass through intermediate colors the designer never chose, and that is where they either succeed or look muddy. A rainbow that keeps its stops close together reads as a subtle shift; one that jumps across the spectrum reads as a prism. Both work, but only one at a time, and never behind text that needs to stay legible across the whole width of the gradient.