Colour converter.

The same colour needs a different name depending on where it goes. HEX for CSS, RGB when you need alpha, HSL when you want to build a tint or shade by adjusting one number, CMYK when the file is heading to a printer.

HSL is the one worth learning if you only learn one. Because hue, saturation and lightness are separate values, you can build an entire palette from a single brand colour by changing lightness alone — and the result stays coherent in a way that hand-picked hex codes rarely do.

A word on CMYK: the conversion here is the standard mathematical one, without an ICC colour profile. That is fine for a rough idea and wrong for anything going to press. Vivid screen colours often sit outside the CMYK gamut entirely and will print duller than they look. Always ask your printer for a proof before signing off a run.

Worth knowing

• Build tints and shades by changing only the L in HSL. The hue stays consistent and the palette holds together.
• Never trust screen-to-print conversion without a physical proof. Bright greens and oranges are the worst offenders.
• Store brand colours as CSS custom properties so a rebrand is one edit rather than two hundred.