Press "Enter" to skip to content

The Hexadecimal Colour System

May 20, 2024

If you uses a computer for design, art or anything that requires colour, then you’ll likely have a digital graphics program installed on your machine such as Photoshop or Gimp. The colour system available in these programs is called the ‘Hexadecimal colour notation system’ and in this article I take a look at it.

In the beginning

The RGB model dates back to the 19th century with the work of James Clerk Maxwell and was later adapted for electronic displays. The use of RGB (Red, Green, Blue) colour models, where hexadecimal colour codes are most commonly applied, was developed through the work of many researchers and engineers in the fields of colour science, television, and computer graphics.
The hexadecimal colour notation system is free to use, an open standard and widely adopted in web development, graphic design, and various digital media applications. There are no licensing fees or restrictions associated with using hexadecimal colour codes, making them accessible to anyone creating or working with digital content. This openness has contributed to the system’s popularity and widespread use across the internet and in software applications.

The light spectrum

The hexadecimal colour notation system is based on the RGB colour model, which is aligned with the light spectrum of colour. The RGB model represents colours by combining different intensities of red, green, and blue light, which are the primary colours of light. When combined in various ways, these three colours can produce a wide range of colours, corresponding to how colours are perceived in the visible light spectrum.

Here’s how it works in relation to the light spectrum:

  • Red, Green, and Blue Light: The RGB model uses three primary colors of light:
    • Red (R)
    • Green (G)
    • Blue (B)
  • Color Mixing: By adjusting the intensity of each primary color, different colors can be produced. When red, green, and blue lights are combined at full intensity, they create white light. When all are at zero intensity, the result is black.
  • Hexadecimal Representation: The hexadecimal notation translates these light intensities into a format, where each colour component (red, green, and blue) can have 256 possible values (00 to FF in hexadecimal), representing the spectrum from no light to full intensity for each component.

Therefore, the hexadecimal colour notation system directly corresponds to the way colours are generated and perceived through the combination of different light wavelengths, mapping digital values to the light spectrum.

16 million colours

The 16,777,216 colours in the hexadecimal colour system come from the combination of 256 possible values for each of the three primary colour components: red, green, and blue. Each of these components can have any value from 00 to FF in hexadecimal notation, which corresponds to 0 to 255 in decimal notation. By combining these values, each primary colour can independently vary in intensity. When you calculate the total number of possible combinations, you multiply the 256 values of red by the 256 values of green by the 256 values of blue, resulting in (256 x 256 = 16,777,216) possible colours. This vast range allows for a very detailed and nuanced representation of colours in digital formats, capturing a wide spectrum that can represent subtle variations in colour.

The example of yellow

In the RGB colour model, yellow is made by combining red and green light at their full intensities, while the blue light is at zero intensity. Specifically, in hexadecimal colour notation, yellow is represented as #FFFF00. Here’s how it breaks down:

  • Red: Full intensity (FF in hexadecimal, 255 in decimal)
  • Green: Full intensity (FF in hexadecimal, 255 in decimal)
  • Blue: Zero intensity (00 in hexadecimal, 0 in decimal)

When red and green light are both at their maximum levels and blue light is absent, the combination produces yellow. In terms of light mixing, red and green are two of the three primary colours, and their additive combination results in yellow, which is a secondary colour in the RGB colour model.

12 example colours

Here is a list of 12 common colours with their corresponding hexadecimal colour codes, demonstrating the RGB colour model in hexadecimal notation:

  1. Red: #FF0000 (255 Red, 0 Green, 0 Blue)
  2. Green: #00FF00 (0 Red, 255 Green, 0 Blue)
  3. Blue: #0000FF (0 Red, 0 Green, 255 Blue)
  4. Yellow: #FFFF00 (255 Red, 255 Green, 0 Blue)
  5. Cyan: #00FFFF (0 Red, 255 Green, 255 Blue)
  6. Magenta: #FF00FF (255 Red, 0 Green, 255 Blue)
  7. White: #FFFFFF (255 Red, 255 Green, 255 Blue)
  8. Black: #000000 (0 Red, 0 Green, 0 Blue)
  9. Gray: #808080 (128 Red, 128 Green, 128 Blue)
  10. Orange: #FFA500 (255 Red, 165 Green, 0 Blue)
  11. Purple: #800080 (128 Red, 0 Green, 128 Blue)
  12. Pink: #FFC0CB (255 Red, 192 Green, 203 Blue)

The hash symbol (#) in hexadecimal colour notation is used as a prefix to indicate that the following string represents a colour value in the hexadecimal format. It distinguishes the colour code from other numerical values or strings that might be used in HTML or CSS. For example, when you see #FF5733, the hash symbol tells the browser or design software to interpret FF5733 as a colour code rather than as a plain number or text.

Here is a list of the hexadecimal values and their corresponding decimal values:

  • AA: 170
  • BB: 187
  • CC: 204
  • DD: 221
  • EE: 238
  • FF: 255

    AB can be part of a colour code. For example:
  • #AB0000 would represent a shade of red.
  • #00AB00 would represent a shade of green.
  • #0000AB would represent a shade of blue.
  • #ABABAB would represent a shade of gray.

    As mentioned, in the hexadecimal colour system, combinations of letters from A to F are used alongside numbers from 0 to 9 to represent values from 0 to 15. Each pair of hexadecimal digits represents a value from 0 to 255 for each of the red, green, and blue colour channels.

    Here are all the possible 256 two-digit hexadecimal combinations:
  • 00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 0A, 0B, 0C, 0D, 0E, 0F
  • 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, 1C, 1D, 1E, 1F
  • 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 2A, 2B, 2C, 2D, 2E, 2F
  • 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 3A, 3B, 3C, 3D, 3E, 3F
  • 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 4A, 4B, 4C, 4D, 4E, 4F
  • 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 5A, 5B, 5C, 5D, 5E, 5F
  • 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 6A, 6B, 6C, 6D, 6E, 6F
  • 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 7A, 7B, 7C, 7D, 7E, 7F
  • 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 8A, 8B, 8C, 8D, 8E, 8F
  • 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 9A, 9B, 9C, 9D, 9E, 9F
  • A0, A1, A2, A3, A4, A5, A6, A7, A8, A9, AA, AB, AC, AD, AE, AF
  • B0, B1, B2, B3, B4, B5, B6, B7, B8, B9, BA, BB, BC, BD, BE, BF
  • C0, C1, C2, C3, C4, C5, C6, C7, C8, C9, CA, CB, CC, CD, CE, CF
  • D0, D1, D2, D3, D4, D5, D6, D7, D8, D9, DA, DB, DC, DD, DE, DF
  • E0, E1, E2, E3, E4, E5, E6, E7, E8, E9, EA, EB, EC, ED, EE, EF
  • F0, F1, F2, F3, F4, F5, F6, F7, F8, F9, FA, FB, FC, FD, FE, FF

    Combining these can be used to specify a unique colour in the RGB colour space, ranging from #000000 (black) to #FFFFFF (white) and all the colours in between.
    These 256 values yields 16,777,216 (which is 256^3) possible colours available in the RGB colour space using hexadecimal notation.

    So in the RGB color model using hexadecimal notation, a colour is represented by combining three two-digit hexadecimal values, each corresponding to one of the red, green, and blue colour channels. Each channel can have 256 possible values (ranging from 00 to FF in hexadecimal), and it is the combination of these three values that defines a specific colour.

    For example:
  • #FF0000 represents red (full intensity of red, zero intensity of green and blue).
  • #00FF00 represents green (full intensity of green, zero intensity of red and blue).
  • #0000FF represents blue (full intensity of blue, zero intensity of red and green).
  • #FFFFFF represents white (full intensity of red, green, and blue).
  • #000000 represents black (zero intensity of red, green, and blue).
    Thus, a colour is only defined when all three values are combined into a six-digit hexadecimal code.

    This has been a dive into the hexadecimal colour notation system.
2
DanT