Hex, RGB, and HSL: What Colour Codes Mean

A colour code is a set of instructions for a screen. The same colour can be written as a hex value, an RGB triplet, or an HSL triplet, and each form is useful in a different situation. Design tools often show one and hide the others, which makes the numbers look more mysterious than they are.

Colour Picker reads the pixel under your cursor and reports the value in these forms. Once you can read the numbers, you can adjust a colour instead of guessing at it.

Hex: a compact way to write RGB

A six-digit hex code such as #4A7C59 is three pairs of hexadecimal digits. The first pair is red, the second green, and the third blue. Each pair runs from 00 to FF, which is 0 to 255 in decimal. #4A7C59 therefore means red 74, green 124, blue 89, or rgb(74, 124, 89).

Hex uses base 16, so the digits run 0-9 and then A-F. The shorthand #RGB expands to #RRGGBB when each pair repeats, so #F00 is #FF0000. An eight-digit hex code adds an alpha channel at the end, which controls transparency. Support for the eight-digit form is good in modern browsers but not universal in older software.

RGB: the channels behind the colour

RGB is an additive model: red, green, and blue light combine to make the colour. Equal parts of all three produce white; no light produces black. Each channel is usually written from 0 to 255, although CSS also accepts percentages and modern space-separated syntax. The values are the same information as hex, just written in decimal.

HSL: hue, saturation, and lightness

HSL describes the same colour in a more intuitive shape. Hue is an angle from 0 to 360: red at 0, green at 120, blue at 240. Saturation is how strong the colour is, from grey at 0 per cent to full colour at 100 per cent. Lightness runs from black at 0 per cent to white at 100 per cent, with the pure colour around 50 per cent.

For example, #FF0000 is hsl(0, 100%, 50%). The green #4A7C59 is approximately hsl(138, 25%, 39%). HSL is useful when you want a lighter or darker version of the same colour: change the lightness and leave the hue alone. It is less useful for judging contrast, because lightness in HSL is not the same as perceived brightness. Two colours with the same L can look very different to the eye.

Which form should you use?

Use hex in CSS and anywhere a short, copyable value is needed. Use RGB when a tool asks for separate channels or when you need an alpha value. Use HSL when you are building a palette and want to adjust one property at a time. The Colour Picker gives you all three so you can compare them.

Remember that these values describe a screen, usually in sRGB. They do not specify a paint, a printed ink, or a colour under a particular lamp. For print work, treat the hex value as a starting point and confirm it with a physical swatch or the printer.

For the wider method, read How to Pick a Colour from an Image and Use Its Hex Code. If you are matching a logo, see How to Match a Brand Colour from a Logo or Photo.