Free, in your browser

Make a palette

A whole gradient from four colours. Drag them and watch it change, then copy it as a Metal function, as CSS or as hex colours.

R · G · B
Middle (a)
Swing (b)
Cycles (c)
Shift (d)
Open in the playground
CSS

How it works

Each colour channel follows a cosine wave across the gradient: a + b · cos(2π(c · t + d)). a is the middle each channel swings around, b how far it swings, c how many times it cycles from one end to the other, and d where in its cycle it starts. Four values per channel make a whole smooth gradient, which is why shaders use them.

In a shader

Call palette(t) with any value from 0 to 1, such as a distance, a noise value or the time. half3 is cheaper on Apple GPUs and plenty for colour. The link in the address bar keeps the palette.