How Colours Get Their Codes
Years ago, a classroom of Grade 1 students were learning their primary colours. Songs, dances, colouring pages, games, you name it, all working toward a final painting project with the artist-in-residence. The day finally came — giddy with excitement, the children took their seats in the art room.
“As you know, the primary colours are: yellow…”
Students nod. A few cheers.
“Magenta…”
Nodding slows.
“And cyan.”
Frozen silence.
“What the fuck is cyan?” — 23-year-old me and at least one six-year-old child, probably (kept as an ‘inside thought’ for obvious reasons).
The Primary Colours
One of the most basic ideas in colour theory is that all colours are made by a combination of primary colours which, as most of us have been taught at some point, are: red, yellow, and blue. However, as Mr. Artist pointed out, that is not entirely accurate. While it may seem like a minor technicality, the primary colours are in fact: magenta, yellow, and cyan. If you are skeptical, this video does a nice job demonstrating mixing the three true primaries.
For the next few years, I moved through the world with the confidence of someone who knew the true primary colours. This confidence was not long lasting. What ultimately shook my concept of colour theory (again), was encountering the RGB function while learning HTML and CSS.
RGB Values
In code, a colour can be specified in a few ways, including by using RGB values. Essentially, you select a colour by specifying the amount of red, green, and blue out of 255 respectively.
You might be thinking this sounds a lot like mixing primary colours, and you would be right. Take a look at the table below to see a few colours and their corresponding RGB values. A zero represents the complete absence of that colour whereas 255 represents the highest amount possible.
You might notice something peculiar about the RGB values in the table above. For one, we see the so-called primary colours made up of two colours each. Secondly, we also see that white contains all colours whereas black contains none. Understanding of colour theory rocked once again!
It turns out there are actually two sets of primary colours. One set (cyan, magenta, and yellow) for material colours, like paints, and another set (red, green, and blue) for physics and light, like with computer screens.
I think most people understand, or would guess, that there must be a logical explanation for why colours are scaled from 0 to 255, a seemingly random number. Rather than being chosen because it was some nerd’s favourite number (said with love), 255 is significant because it relates to how computers process information.
Binary
While computer programs can be written in a variety of languages, including C or JavaScript, computers essentially understand just one language — binary.
As an elementary math fanatic, I will take any opportunity I can to talk about number systems and number sense. Yes, I am a terrible party guest. Or a great party guest if you are tired and want everyone to leave — it’s all about perspective.
Unlike the decimal system, a base 10 number system, binary is a base 2 number system. Without going into too much detail, this means that where the decimal system has a place value for ones, tens, hundreds, thousands, etc., all of which are powers of 10, and utilizes 10 digits (0 through 9), the binary system has a ones place, a twos place, a fours place, an eights place, a sixteens place, you get the idea — all powers of 2, and utilizes only 2 digits: 0 and 1.
The number above, 3109, can be represented in different ways, including standard form, written form, and expanded form. If we were to represent 3109 in expanded form, it would look this:
3000 + 100 + 0 + 9
This could be expanded even further to:
1000 + 1000 + 1000 + 100 + 0 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1
Three thousands, one hundred, zero tens, and nine ones.
Added together we get 3109.
It is the same idea with the binary number system. 10110001 can be represented as:
128 + 0 + 32 + 16 + 0 + 0 + 0 + 1
Added together we get 177.
Here is another example. The binary number above, 11111111, can be represented as:
128 + 64 + 32 + 16 + 8 + 4 + 2 + 1
Added together we get 255 — a number I hope looks familiar to you at this point. In both of the binary examples above, we have 8 binary digits. Binary digits are also known as bits.
Bits and Bytes
On its own, a bit will not go very far — it’s only one digit after all! In order to effectively process information, a computer will process bits in groups of 8, known as bytes. Little bite-sized bits of information.
Using 1 byte(8 bits), there are 256 different ways to represent a binary number — and this is the reasoning behind using numbers up to, and including, 255 with the RGB function. Since we start at 0 rather than 1, we must stop at 255 to give us only 256 possibilities.
With that information, we can conclude that web colours are made up of 3 bytes — one for each red, green, and blue and each colour’s number is a representation of a binary number, which is what is actually understood by the computer. Neat!
Hexadecimal
Using the RGB function is not the only way to specify a colour. Another method, and perhaps a more commonly used and preferred method, is to use a hexadecimal code.
As you may be able to tell by the name, hexadecimal is another number system (yay!) with base 16. Hexadecimal codes are only 6 digits — 2 digits for red, 2 for green, and 2 for blue. As a result, we will be working with only 2 place values at a time.
To better understand, let’s convert the RGB colour code from the previous section, rgb(154, 224, 255), into hexadecimal.
Starting with the value of red, we will divide 154 by 16 and round down. Rounding down, we get 9.
9 * 16 = 144
To get the remaining value, we will subtract 144 from our initial number.
154 — 144 = 10
We have encountered a problem. We only have one digit left to use but the number of ones we have requires two digits. In order to counter this issue, letters are used in place of numbers.
To double check our work:9 * 16 = 144
10(A) * 1 = 10
144 + 10 = 154
To convert the value of green, we divide 224 by 16.
224 / 16 = 14
14 is represented as E in hexadecimal code. Since the number was divisible by 16, we have no remaining ones.
Finally, we will do the same process with the value of blue. 255 divided by 16 and rounded down is 15, represented by F.
16 * 15(F) = 240
255 - 240 = 15
All together, this gives us a hexadecimal code of #9AE0FF.
Conclusion
The RGB function and hexadecimal code are two common ways colours can be specified; however, there are more methods! Colour theory, both in the fine arts and in technology, is a topic that is endlessly fascinating and worthy of additional study. I’ll leave you with this:
On a scale from 0 to 255 how fun is colour in code? I’m only looking for 10 answers here: 255 or FF.
Okay, I’ll stop.
Thank you for reading!✨
Sources & Further Reading
Reinventing the Wheel: Why red is not a primary color (John Muir Laws)
RGB Function (Microsoft)
Primary Colors are Red, Yellow, and Blue, Right? Well, Not Exactly (How Stuff Works)
Binary (Computer Hope)
What is Binary? Understanding How Computers Use Base 2 (Make Use Of)
Bits and Bytes (Stanford)
Bits and Bytes (Stanford — Intro to Computing)
Bytes (Khan Academy)
Hexadecimal Colors (Math is Fun)
How to Read Hex Color Codes (Pluralsight)
HTML Color Codes and Names (Computer Hope)
