HEX, RGB and HSL
HEX writes the red, green and blue channels as three two-digit hexadecimal numbers (#FF5733). RGB gives the same channels as numbers from 0 to 255 (255, 87, 51). HSL describes the color as hue (0–360°), saturation and lightness (%), which is easier for making lighter or darker shades.
How to convert HEX to RGB
Split the six digits into pairs and convert each pair from base 16 to base 10: FF = 255, 57 = 87, 33 = 51. Three-digit shorthand codes double each digit, so #F53 is #FF5533.
How RGB becomes HSL
Divide each channel by 255. Lightness is the average of the largest and smallest of the three values; saturation measures how far they are apart relative to lightness; hue is the angle on the colour wheel set by which channel is largest (red near 0°, green near 120°, blue near 240°). For #FF5733 the largest channel is red and the smallest blue, giving a hue of about 11°, an orange-red.
Making lighter and darker shades
Keep hue and saturation and change only lightness: hsl(11, 100%, 60%) becomes a darker hsl(11, 100%, 45%) for a hover state or a lighter hsl(11, 100%, 85%) for a background. Adding transparency is done with an alpha value, as in rgba(255, 87, 51, 0.5) or an eight-digit HEX code such as #FF573380.
Screen colours and print
HEX, RGB and HSL describe light from a screen. Printers mix inks using CMYK, and some bright screen colours cannot be printed exactly; for print work, ask the printer for their colour profile.