This article was originally posted as a Twitter thread as a part of my Crash Course series.
❤️💚💙 HEX colour codes explained (with a hint of colour theory)
Crash Course #1
Basically, a HEX (Hexidecimal) colour code is shorthand for RGB values that requires little heavy lifting for conversion (great for copy + pasting too).
First, each pair of characters represents a value for one of the RGB channels:
The standard number system is base 10 — when we count to 10, we start over counting up and repeat.
Hexidecimal is base 16, meaning we count to 16 before starting over. To achieve this in a single character (without inventing new numbers), we switch to letters as substitutes:
Which means that “F” is now the highest value we have for each digit.
For example, normally we would count 19, 20, 21, etc. Instead, we would count 9F, A0, A1, etc.
Our complete scale to work with is 00 → FF per pair:
This is what our original HEX value visually broken down looks like into it’s different channels:
Side note: Since we’re using RGB values, we’re using an additive colour mixing system. This is what happens when you mix different lightwaves together, they’re added together to become lighter. On the flipside mixing paint or ink is subtractive (it gets darker):
Now knowing that, if we mix the 3x RGB channel pairs together, then we get our final colour (as shown in the center of the crossover).
You can achieve this by having your separate RGB channel colours overlapping and their blending mode set to “Lighten” (Make sure there’s no BG:
Back to why it’s easy to convert to RGB: First we switch our characters to base 10. As our first number is in the “Sixteenth” column, we need to multiply it by 16. The second character is singular column, so nothing happens to it. Add the numbers together and that’s our RGB value:
Hopefully you found this helpful. Soon you’ll be able to look at a HEX code and know what colour it is in no time 😉
Bonus: It’s worth mentioning that the range is 00 to FF, because HEX colours are typically 8bit per channel, which gives a 0 to 255 range.
8bit is pretty limiting, so we may be seeing “Float RGBA” instead soon (Which is typically 32bit per channel).
