Like this? Buy me a coffee.
This is a colour picker and gradient creation tool that uses a variety of colour spaces for choosing and interpolating gradients. The most exotic of these are Lab and Lch, which are perceptually uniform colour spaces that are designed to match the human eye's nonlinear response to colour input. There is further explanation of the colour spaces below.
The background colour of the page can be chosen, as the colours around another colour affect the appearance of the colour.
Controls to modify colours in Lch are shown by default. The colour selection mode can be changed to work with the Lab parameters, or to show Lch, Lab, RGB, HSV and HSL controls simultaneously. It doesn't show all by default as it makes the interface more intimidating. When all selectors are shown, a delta value is also shown that indicates the difference in colour between that and the previous stop. The delta value is calculated as the Euclidean difference between the Lab parameters.
For each stop there is a colour picker with a preview of the colour below. Due to the way Lab and Lch work, it is possible to create colours that can't be shown on a screen, so a red outline is shown around the preview when this happens. (Technical detail: red outlines are shown when any of the RGB channels would be less than zero or greater than 255. The colour that is shown has the channels clipped to be within the range of 0–255.)
A number of swatches are shown to show the gradient created by interpolating colours between the chosen stops in a variety of colour spaces. The hex values (sRGB) are shown too, and are red if the intended colour is not displayable. The "Copy […]" button places a string of an array of hex values on your clipboard (so it can be pasted into JavaScript or Python or other code).
By default, the interpolation between swatches is linear. The interpolation power modifies this. Internally, swatches are evenly spaced between 0 and 1 (e.g., five swatches will be at [0, 0.25, 0.5, 0.75, 1]). Adjusting the power effectively shifts the gradient to the left (for values below one) or right (for values above one). For example, a power of 2 will result in the five swatches being at [0, 0.0625, 0.25, 0.5625, 1], so the midpoint swatch is the colour that was 25% along the interpolation.
A gradient showing just the luminance of one or all of the gradients can also be shown. This shows the relative luminance according to the WCAG definition of the colours as displayed (with clipping). This is computationally expensive to show, so it might make the page a lot slower. Selecting "show smooth gradients" shows a continuous gradient, but it isn't shown by default as it is also computationally expensive to create.
The current gradient can be saved or shared by using the URL underneath the swatches. It only has the colours as specified in clipped RGB values, so it doesn't work with non-displayable colours and it doesn't save the rest of the page state.
For something different, here's a cubehelix picker.
Lab (or CIE 1976 (L*, a*, b*), or CIELAB) is a colour space that is designed for the human eye. It is perceptually uniform, which means that the difference between two colour values correlates with the perceived degree of difference between the two colours (the difference between colours is measured by their Euclidean distance). Therefore, gradients between two colours using the Lab colour space will change very uniformly between the colours. L is the lightness of the colour, a is the position between green (negative values) and red/magenta (positive values), and b is the position between blue (negative values) and yellow (positive values). The idea is that colours cannot be both green and red, or blue and yellow, and that colours can be described by a combination of their green/redness and blue/yellowness, and the lightness.
Lab can describe all colours that the human eye can perceive, but also many beyond what can exist in the physical world (not to mention that computer displays can display a limited subset of real colours). One of the difficulties of Lab is that the valid ranges of L, a and b vary depending on the values of the other two values. L can be between 0 and 100, and a and b are normally within the range of -100 to 100, although a pure sRGB blue has a b of -108.
Lch (or CIELCH) is a cylindrical version of Lab, which means that the two opponent colour dimensions (a and b) are represented by a hue, h, and chroma, c (if a and b are Cartesian coordinates, h and c are polar coordinates). Gradients interpolated in the Lch colour space will transition between hues, so a gradient between yellow and blue (opposing colours in Lab) will transition via green (or red/magenta) in Lch, but via grey in Lab.
RGB is designed for screens, where colours are generated by individual red, green and blue elements. The actual colour of RGB colours depends on the device being used, although the sRGB colour space exists as a standardised colour space that the web nominally uses, and all RGB colours here are treated as sRGB. RGB values are easy to work with mathematically (they're all values between 0 and 255), and all colours on this page end up being converted to RGB values to be displayed, but they suffer from the problem of not being perceptually uniform nor intuitive to work with (it's hard to imagine what sort of colour you have just from RGB values, and it's also hard to modify colours intuitively with RGB).
HSV and HSL are cylindrical versions of RGB, which are intended to be much more intuitive to use. HSV colours are represented by hue, saturation and value, while HSL colours are represented by, hue, saturation and lightness, except with different definitions of saturation. In HSL, a colour of maximum lightness will always be white, regardless of hue and saturation, while in HSV, a colour of maximum value will be the most intense colour given the hue and saturation (so pure red is a red hue with maximum saturation and value).
HSV and HSL suffer from RGB's lack of perceptual uniformity, so changing one dimension can result in apparent changes in other dimensions. For example, pure green and pure blue have the same saturation and lightness/value, but green appears to be a much lighter colour. Gradients interpolated in the HSV or HSL colour space are particularly prone to problems with this when they shift between many different hues. The is the problem that Lab and Lch overcome.