Why four color models for the same color?
A monitor emits light in three channels — red, green, and blue. Every color you see on screen is a mixture of those three. The four formats this tool handles are just different ways of describing the same physical reality, each optimised for a different use case.
HEX (#1a73e8) is the format HTML and CSS have used since the 1990s. It's compact and copy-pasteable, but communicating "make this 20% lighter" in HEX requires mental gymnastics. That's what HSL is for.
RGB (rgb(26, 115, 232)) expresses each channel as a decimal from 0 to 255. It maps directly to the 8-bit integer the GPU uses, which makes it useful in image processing code — you can add or subtract channel values in a loop.
HSL (Hue, Saturation, Lightness) was designed for human readability. Hue is the position on the color wheel (0° = red, 120° = green, 240° = blue). Saturation is how vivid the color is (0% = grey). Lightness is how bright (0% = black, 100% = white, 50% = the purest version of that hue). If you want to generate a set of colors that all look "the same type of blue but different brightness," you fix H and S and vary L.
HSV (Hue, Saturation, Value) looks similar to HSL but behaves differently: at V=100% and S=0%, you get pure white — which matches the additive paint model used by Photoshop and most raster tools. At V=100% and S=100%, you get the fully saturated hue.
The conversion math
HEX and RGB are trivially equivalent — HEX is just the base-16 representation of the three decimal values. Converting between RGB and HSL/HSV requires normalising the channels to the range 0–1, finding the maximum and minimum channel values, and deriving hue from which channel dominates.
The inverse conversions (HSL → RGB and HSV → RGB) work by computing the chroma component (the distance from grey) and then distributing it across the three channels based on the hue sector. Both paths are mathematically lossless at infinite precision; at integer precision (rounding H to 1°, S/L to 1%) a round-trip may drift by ±1 on a channel value.
Which format to use in CSS?
Modern CSS accepts all four: #hex, rgb(), hsl(), and even relative color functions like hsl(from var(--accent) h s calc(l + 10%)). For design tokens, HSL is the most maintainable because you can tweak lightness without recalculating all three channels. For copy-pasting from a design file (Figma exports HEX by default), #hex is fine. For canvas/WebGL code that loops over pixels, use raw RGB integers.