In the example above, it could be done by just modifying linearly the R and B channel, without touching to the G one -- but the variation could also be non-linear (to provide, say, a sense of linearity because it would be more physiological), or by tinkering with the G channel (again because it might seem to be a more realistic 'red to blue transition' to our eyes).

What is the formula used in linear-gradient to switch between two colors?

@GCyrillus: I do not understand your comment. I know what linear-gradient is and how to use it. What I do not know is what formula is used to transition from a color to another. One can use a linear transition (going from 0 to 254 in equal steps on the axis (so the same numerical change in the channel for each evenly) or use a formula where the transition is slower first, then quicker (say, a parabolic one) because (this is just an example) it looks better (more linear) to our eyes (which are themselves highly non-linear. The link you provided does not discuss this at all.
– WoJJan 5 '17 at 20:27

@GCyrillus (cont) maybe this is simply a linear transition, but in that case something like (100,212,34) to (2,28,133) may visually not be a transition from the first color to the second one (because it goes though, say, a color not associated with these two). In depth, i am wondering if there is a physiological component added to these transitions or is it just a mathematical, linear function.
– WoJJan 5 '17 at 20:30

I believe it is just linear transition from steps to steps , which varie from the size of the area where it is drawn. What we see (the purplish color) in between is not what we would expect. If you do not set any value, both colors are sprayed and shade from one side to another and they blend while they fade. :) (edit: try a transparent color aside blue or red)
– G-CyrJan 5 '17 at 20:51

1 Answer
1

Gradients in HTML/CSS are linear interpolations, purely mathematical. Per the W3C canvas spec:

Once a gradient has been created (see below), stops are placed along it to define how the colors are distributed along the gradient. The color of the gradient at each stop is the color specified for that stop. Between each such stop, the colors and the alpha component must be linearly interpolated over the RGBA space without premultiplying the alpha value to find the color to use at that offset. Before the first stop, the color must be the color of the first stop. After the last stop, the color must be the color of the last stop. When there are no stops, the gradient is transparent black.

SVGs work the same way.

CSS gradients are the same, except for one difference (emphasis mine):

Between two color stops, the line’s color is interpolated between the colors of the two color stops, with the interpolation taking place in premultiplied RGBA space.

So all three use linear interpolation, and canvas/SVG use non-premultiplied alpha while CSS uses premultiplied alpha (which does look nicer). As to why that makes a difference, see this example: