A colour on a web page can be written in several ways. They all describe the same range of colours on a screen, so choosing between them is mostly a matter of what is easiest to work with.

RGB: the screen's own recipe

Screens make colour by mixing red, green and blue light. RGB gives the amount of each from 0 (none) to 255 (full). rgb(37, 99, 235) is a blue with little red, some green and a lot of blue. rgb(0, 0, 0) is black and rgb(255, 255, 255) is white.

HEX: RGB written in base 16

A HEX code is the same three numbers, each written as two base-16 digits (00 to ff), after a #. To convert, split the code into pairs. #2563eb becomes 25, 63 and eb, which are 37, 99 and 235 in decimal. A three-digit code like #26e doubles each digit, so it means #2266ee. An eight-digit code adds a final pair for transparency (alpha), where ff is solid and 00 is invisible.

HSL: easier for humans

HSL describes a colour as hue, saturation and lightness:

  • Hue is the position on the colour wheel, from 0 to 360 degrees. Red is 0, green about 120 and blue about 240.
  • Saturation is how vivid it is, from 0 percent (grey) to 100 percent (full colour).
  • Lightness runs from 0 percent (black) through the pure colour at 50 percent to 100 percent (white).

This makes it easy to build variations. To make a button hover state, keep the hue and saturation and lower the lightness by a few points. To make a pale background from a brand colour, raise the lightness to about 95 percent.

HSV (HSB)

HSV, also called HSB, uses hue, saturation and value (brightness). Many design tools show colour pickers in this model. At full value and saturation you get the pure colour, and lowering value darkens it. It is not the same as HSL, so the same numbers give different colours in the two models.

CMYK: for print

Printers mix cyan, magenta, yellow and black ink, which absorb light rather than emit it. Simple online converters use a mathematical formula to go from RGB to CMYK. That is only an estimate. A real printer uses a colour profile for its paper and inks, and many bright screen colours, such as vivid blues and greens, cannot be reproduced in ink. For print work, ask your printer for the exact values they need.

Which should you use?

  • Writing CSS: HEX is compact and common. HSL is best when you want to adjust lightness or saturation by hand.
  • Transparency: rgba(), hsla() or an eight-digit HEX code.
  • Design handoff: whatever your design tool and developers agree on, and keep one format for the whole project.
  • Print: CMYK values supplied by your printer.

Rounding

Converting between formats uses whole numbers, so a round trip can change a value by 1. That is not visible to the eye, but it explains why a colour you convert back and forth may not give identical digits.

Try it

Type any colour, or pick it, to see all formats at once with a copy button for each. Once you have your colours, check that text is readable on them with the Color Contrast Checker.