Skip to content

Gradient #

A gradient is used to transition between two or more colours. It is defined by a list of parameter, colour pairs \((p_i, c_i)\) that distributes the colours on a linear scale and can be sampled using any number. If the number is outside the bounds of the parameters then then colours at the bounds will be the final colour. If the number is between two parameters then an interpolation of the two colours at those parameters will decide the final colour. $$ (p_i, c_i) \mid i = 0, 1, 2, \ldots, n \text{ and } p_0 \leq p_1 \leq \ldots \leq p_n\ $$

Gradient
A linearly interpolated gradient with three parameter, colour pairs. $[(p_0,c_0),(p_1,c_1),(p_2,c_2)] = [(0.0,Red),(0.5,Yellow),(1.0,Green)]$

Colours#

The colours used to create the gradient. These colours will be interpolated in order to get the final colours.

Parameters#

The parameters used to distribute the colours on the linear domain. Each parameter has to be paired with a colour.

Interpolation#

The interpolation type defines how the gradient is interpolated i.e. how the gradient moves from one colour to the next. When sampling a parameter \(P\) the interpolation combined with the defined colour \(c\), parameter \(p\) pairs are used to calculate a colour \(C\).

Linear#

The linear interpolation is default in most softwares. It normalizes the parameter \(P\) relative to its bounding parameters \((p_{i}, p_{i+1})\) using \(f(P)\) and then samples the bounding colours \((c_{i}, c_{i+1})\) into the final colour \(C\). $$ f(P) = \frac{P-p_{i}} {p_{i+1}-p_{i}} $$ $$ C = c_{i} + f(P) \cdot (c_{i+1} - c_{i}) $$

Gradient
Linear interpolation of a gradient with three parameter, colour pairs. $[(p_0,c_0),(p_1,c_1),(p_2,c_2)] = [(0.0,Red),(0.5,Yellow),(1.0,Green)]$

Cosine#

A cosine sampled gradient creates a smoother colour sampling, avoiding the discontinuity that a linear interpolation introduces at each point. It uses \(f(P)\) to normalize the parameter \(P\) between \((p_{i}, p_{i+1})\) and apply a cosine transformation before sampling the bounding colours \((c_{i}, c_{i+1})\) into the final colour \(C\). $$ f(P) = (1 - cos(\frac{P-p_{i}} {p_{i+1}-p_{i}} \cdot \pi)) / 2 $$ $$ C = c_{i} + f(P) \cdot (c_{i+1} - c_{i}) $$

Gradient
Cosine interpolation of a gradient with three parameter, colour pairs. $[(p_0,c_0),(p_1,c_1),(p_2,c_2)] = [(0.0,Red),(0.5,Yellow),(1.0,Green)]$