A HEX code is a compact way to write RGB colors. It starts with the # sign and has six digits written in base sixteen (0 to 9 and A to F). For example #FF0000 is red and #000000 is black.

Structure of the code#

The six digits are split into three pairs:

  • First pair: the amount of red
  • Second pair: the amount of green
  • Third pair: the amount of blue

So in #FF8800 red is at its maximum, green is medium and blue is zero; that is orange. Each pair equals a number between 0 and 255.

An example#

In CSS you write:

Code
button { background: #1E88E5; color: #FFFFFF; }

The browser shows that blue for the button and white for the text.

Shorthand#

If each pair has two identical digits, it can be written short: #FFFFFF is the same as #FFF and #FF5500 is the same as #F50.

Where you will meet it#

  • CSS files
  • Design tools such as Figma
  • Color settings in WordPress themes
  • A brand's visual identity guidelines

Tips#

  • Upper and lower case make no difference
  • In a brand guide, always list the HEX code next to the CMYK code
  • For transparency you need eight-digit codes or other formats
  • A color that looks good on screen should also be checked for contrast