Hexadecimal Color

How hexadecimal color works.

I suppose I just never really thought about it much and left the hexing of colors to designer witchcraft not meant for the likes of this poor programmer-minded plebe to understand.

Why is `#ff0000` red?

Hexadecimal is fancy speaking for Base 16

As mere mortals we use a Base 10 counting system. It consists of numerals from 0 to 9. It goes like this:

0 = 0; // 0 ones             = 00
1 = 1; // 1 one              = 01
2 = 2; // 2 ones             = 02
3 = 3; // 3 ones             = 03
4 = 4; // 4 ones             = 04
5 = 5; // 5 ones             = 05
6 = 6; // 6 ones             = 06
7 = 7; // 7 ones             = 07
8 = 8; // 8 ones             = 08
9 = 9; // 9 ones             = 09
10 = 10; // 1 ten and 0 ones = 10
11 = 11; // 1 ten and 1 one  = 11

If we were working in Base 6 or heximal it would consist of numerals from 0 to 5 and look like this:

0 = 0; // 0 ones             = 00
1 = 1; // 1 one              = 01
2 = 2; // 2 ones             = 02
3 = 3; // 3 ones             = 03
4 = 4; // 4 ones             = 04
5 = 5; // 5 ones             = 05
10 = 6; // 1 six and 0 ones  = 06
11 = 7; // 1 six and 1 one   = 07
12 = 8; // 1 six and 2 ones  = 08
13 = 9; // 1 six and 3 ones  = 09
14 = 10; // 1 six and 4 ones = 10
15 = 11; // 1 six and 5 ones = 11

In Hexadecimal, also known as Base 16, we use the numerals from 0 to 9 and then substitute letters for 10 to 15.

0 = 0; // 0 ones                 = 00
1 = 1; // 1 one                  = 01
2 = 2; // 2 ones                 = 02
3 = 3; // 3 ones                 = 03
4 = 4; // 4 ones                 = 04
5 = 5; // 5 ones                 = 05
6 = 6; // 6 ones                 = 06
7 = 7; // 7 ones                 = 07
8 = 8; // 8 ones                 = 08
9 = 9; // 9 ones                 = 09
A = 10; // 10 ones               = 10
B = 11; // 11 ones               = 11
C = 12; // 12 ones               = 12
D = 13; // 13 ones               = 13
E = 14; // 14 ones               = 14
F = 15; // 15 ones               = 15
10 = 16; // 1 sixteen and 0 ones = 16
11 = 17; // 1 sixteen and 1 one  = 17

Let's build a calculator.

Converting a decimal to base_n in JavaScript is super easy.

(255).toString(16); // outputs ff.

And with that we can create a rudimentary decimal (base₁₀) to hexadecimal (base₁₆) calculator.

<input type="number" value="0" id="i" />
<label id="l">00</label>
<script>
  const toBase16 = (n) => {
    return (+n).toString(16);
  }
  i.oninput = ({target}) => {
    l.innerText = toBase16(target.value);
  }
</script>

00

Hex Colors represent RGB.

Hex color is a representation of RGB colors. RGB is Red, Green, and Blue and is used in virtually all light emitting technologies such as computer monitors. Each color is represented as a value between 0 and 255 where zero is fully off and 255 is fully on.

The RGB color model is an additive color model in which the red, green, and blue primary colors of light are added together in various ways to reproduce a broad array of colors. The name of the model comes from the initials of the three additive primary colors, red, green, and blue. https://en.wikipedia.org/wiki/RGB_color_model

RRGGBB

Hexadecimals colors can be notated as RRGGBB where each set of two characters represents the 0 to 255 value of the colors red (RR), green, (GG), and blue (BB).

Here the RR value is represented by ff which is equal to 255 or "fully on". We have 255 for red and 0 for both green and blue and therefore we only see the red light. If we move that 255 (ff) value through each position we get the predictable result.

ff0000: red
00ff00: green
0000ff: blue

Shorthand CSS. Why is `#f00` also red?

In CSS f00 is expanded to ff0000. When we use a 3-character shorthand each character is simply duplicated in place. f00 becomes ff (doubled f), followed by 00 (doubled 0), followed by 00 (doubled 0). f = ff, followed by 0 = 00, followed by 0 = 00, becomes ff0000.

f00 -> ff0000 -> red
0f0 -> 00ff00 -> green
00f -> 0000ff -> blue

So what's with alphas values in hex colors?

Hexadecimal colors can also have an alpha value resulting in an 8 character string instead of six. #RRGGBBAA. The alpha value operates in the same domain as colors from 0 (00) to 255 (ff).

Here is a div with a background of blue at 255 alpha (ff).

<div style="background-color: #0000fffff"></div>

And the same div with a background of blue at 136 alpha (88).

<div style="background-color: #0000fff88"></div>

And now we can use 4 character shorthand. 00f4 becomes 00 00 ff 44

<div style="background-color: #00f4"></div>