HSL is natively supported in browsers (caniuse for css3-colors). This makes color calculations simpler due to the structure of HSL.
RGB and Hex Triplets
RGB is also known as sRGB, as in "standard RGB".
Example (royal-blue-ish): (6, 69, 173)
RGB gets its name from Red, Green, Blue, which are the three "primary colors" in this color model. Using a combination of these three colors, you are create other colors. Computer representations are as follows: (r, g, b). Some range is supported for each value. Commonly 0 - 255 are used, e.g., (100, 50, 250).
An alternative representation of RBG colors is via the Hex triplet, e.g., #0645ad. In hexadecimal, 0 - 255 can be represented via 00 - ff. This allows you to represent the 3-ary RBG in a more friendly text format. The three hex value are commonly prepended with a #.
HSL and HSV
Example (HSV) (royal-blue-ish): (217, 97, 68)
HSL and HSV are alternatives to the RBG-model for representing colors in general. The 'H' stands for hue and the 'S' stands for saturation. Hue is the 'core color'. Saturation is the 'intensity' (or colorfulness relative to brightness). 'L' and 'V' stand for lightness and value, respectively, and capture something like lightness, brightness, etc. (I will use lightness from here on out, but note that these models are not equivalent, i.e., L != V).
Values for hue are radial, ranging by degree from 0 - 360. Both 0 and 360 are red. Values for saturation and lightness are normalized, and commonly represented as 0 - 1 or 0 - 99.
It is best to think of HSL and HSV by analogy (at least, according to the HSL and HSV wikipedia). HSL is a paint-inspired color scheme where lightness start at 50 (out of 100), and higher values are like mixing in white paint, while lower values are like mixing in black paint. HSV is a light-inspired color scheme where higher values correspond to brighter lights shining on a surface of that particular color.
Saturation in HSL is essentially a gray-scale number with "no gray at all" being at max value, 100.
Color Math
Generating Lists of Hues
Converting to HSL is convenient for generating collections of equidistant hues because there is only one value to manipulate. Any calculation, modulo 360, will give you a new 'core color' with the same saturation and lightness as it's peer. (Other values can be manipulate for subtle additional effects.)
function oppositeColor({ hue, saturation, lightness }) {
return {
hue: (hue + 180) % 360,
saturation,
lightness,
};
}
Generating Lists of Lightness
Working in HSL is convenient for generating lists of lightness because there is only one value to manipulate. (Other values can be manipulated for subtle additional effects.)
function brighterColor({ hue, saturation, lightness }) {
return {
hue,
saturation,
lightness: Math.max(lightness + 10, 100),
};
}
Hex to HSL
Converting between hex and hsl can be done with libraries such as the javascript library color-convert. You can also create your own based on your favorite color conversion formula.