Color formats explained
Screens make every colour by mixing red, green and blue light. HEX, RGB, HSL and HSV are different ways of writing down the same mix, so you can convert between them without losing anything (apart from rounding). CMYK is the odd one out: it describes ink on paper.
HEX
A hex code such as #FF5733 is three pairs of hexadecimal digits for red, green and blue. Each pair runs from 00 (0) to FF (255). The short form #F53 doubles each digit, so it means #FF5533. Hex is compact, which is why design tools and stylesheets use it so much.
RGB
rgb(255, 87, 51) writes the same three channels as decimal numbers from 0 to 255. It is the easiest format to reason about when you want to nudge one channel, and modern CSS also accepts the space-separated form rgb(255 87 51).
HSL and HSV
HSL describes a colour by hue (0 to 360 degrees around the colour wheel), saturation and lightness. It is handy for building palettes: keep the hue and change lightness to get lighter and darker versions. HSV (also called HSB) swaps lightness for value, the brightness of the strongest channel, and is what most colour pickers use internally. CSS understands hsl() but not HSV.
CMYK
Cyan, magenta, yellow and key (black) are the four process inks used in printing. The conversion here is the standard formula, which is fine for a rough idea. Real print work uses colour profiles, and some bright screen colours simply can't be printed, so check with your printer for anything that matters.
Tints and shades
A tint is a colour mixed with white and a shade is a colour mixed with black. The strip above mixes the current colour in 20% steps each way, which gives a quick set of hover, border and background variants that stay in the same family.
