Hello Color

There's a rainbow of colors out there in the world. Purple. Lime green. Bright blues. Mellow yellows. etc. In order to be able to use them in our projects, we need some way to describe them. It turns out that all the colors of the rainbow can be described in terms of a combination of only three colors: Red, Green, and Blue. This is referred to as additive color.

In the image above you can see the basic idea for how this works. Red is just red. Green is just green. Blue is just blue. But if you want yellow then you combine red and green. The purple color is called magenta and is a combination of red and blue. The light blue color is called cyan and is a combination of green and blue. What happens if you combine all three? Well, you get white, as shown in the middle of the diagram.

But we can also create many more colors by picking how much we mix each of the red, blue, and green together. Here is a much more colorful wheel of color.

For example, orange is mostly red with a little bit of green. Pink is mostly red with a little bit of blue. How do we come up with the right mixture of red, green, and blue for all of these pretty colors? Luckily there are lots of handy tools to help us out. In fact, you can get a very easy to use one by simply going to Google and doing a search for 'rgb color picker'.

Of course you'll get a lot of search results as well. But this is such a commonly used tool, that Google just throws one up for you to use right away. Here's a breakdown of how to use it.

Use slider (1) to pick a color. Then move slider (2) around to change how light or dark the color is. The resulting color is shown in (3) along with some cryptic numbers.

Let's look at what those numbers mean.

Colors in Code

The color picker above provides information on the current color in two formats. The one that looks like #4286f4 is referred to as 'hex', which is short for hexadecimal. The one that looks like rgb(66, 134, 244) is referred to as 'rgb' (are-gee-bee), r for red, g for green, b for blue. They are both describing the same color but in different ways. In code, you'll typically use one form or the other, or sometimes swap between them. Basically:

  • Use hex to describe the color with a single value
  • Use rgb to more intuitively describe a color or for easy access to a specific color channel

RGB Color Codes

This one is pretty easy to understand. You just specify the three separate values for red, green, and blue. For example:

rgb(66, 134, 244)

is setting red to 66, green to 134, and blue to 244. The values can range from 0 to 255. What's so magic about 255? Why not 100 or 1000? It has to do with these being 8-bit values. In this coloring scheme, each color is specified by 8-bits. And the range of values that can be specified by 8-bits is 0 to 255 (2^8-1). Here is how you would specify the three primary colors:

CircuitPlayground.setPixelColor(0, 255,   0,   0);  // red
CircuitPlayground.setPixelColor(0,   0, 255,   0);  // green
CircuitPlayground.setPixelColor(0,   0,   0, 255);  // blue

But of course you can specify any random combination of values, with each ranging from 0 to 255.

CircuitPlayground.setPixelColor(0,  98,  12, 143);  // ??
CircuitPlayground.setPixelColor(0,   0, 251,   1);  // ??
CircuitPlayground.setPixelColor(0,  176, 42,  23);  // ??

And just if you're curious, there are 2^24 = 16,777,216 possible color combinations. Thats a lot of colors, yo!

HEX Color Codes Part 1

This one is a little more difficult to understand. First, you need to understand hexadecimal. We all grow up using a decimal numbering system. This means the numbering system is based on ten unique values, which (in English) we give the symbols: 0,1,2,3,4,5,6,7,8,9. With hexadecimal, the numbering system has sixteen unique values instead of ten. To represent them, the first ten are the same as before and the remaining six use the first six letters of the alphabet. So we have 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.

Let's count to 20 using both decimal (DEC) and hexadecimal (HEX).

Note how everything is the same up to 9 (i.e. the first ten values). Once we reach 10, we've run out of decimal digits, so we need to increment. However, we haven't run out of hexadecimal digits, so we just keep counting. We run out of hexadecimal digits when we reach 16, at which point we increment like we did when we reached 10 in decimal.

One key thing to note is what the maximum 8-bit value looks like in hex. Remember this was 255 in decimal. That becomes FF in hex. To go one higher, say to 256, first we'd need an extra bit, and then the hex would become 100.

Confusing? Yeah it can be. It can take some time, but eventually you'll get the idea. There are special calculators called programmers calculators that help out with these conversions.

You can also get away with just typing the conversion in to Google. For example, try Googling the phrase "256 in hex".

Is it DEC or HEX?

We also need some way of specifying to our program if we are using decimal or hexadecimal. For example, consider the following assignment:

someValue = 10;

Is that the decimal 10 we all know and love, or is it that weird 10 in hexadecimal which is actually 16 in decimal? To sort this out, special character sequences are used in front of the number to let the program know which one it is. The default is decimal, so we just need something for hexadecimal. In Arduino programs, we prefix hexadecimal numbers with 0x. Then we can do things like this:

someValue1 = 10;    // this is decimal 10
someValue2 = 0x10;  // this is hexadecimal 10 (decimal 16)

HEX Color Codes Part 2

The idea with the HEX color code is to combine the red, green, and blue values into one value. This way we can specify a color with a single value, instead of three separate values.

Since each color uses 8-bits, we end up needing 24-bits to store the information. You can think of it as just chaining the three separate 8-bits of color info into one 24-bit sequence. Red is 'first', then green, and finally blue. Something like this:

0xRRGGBB

Since we are using hexadecimal to specify each 8-bit value, the range for each is from 0x00 to 0xFF. For example, here is how you would specify the three primary colors:

CircuitPlayground.setPixelColor(0, 0xFF0000);  // red
CircuitPlayground.setPixelColor(0, 0x00FF00);  // green
CircuitPlayground.setPixelColor(0, 0x0000FF);  // blue

And others colors will be a mixture of values. Here's the one from the color picker:

Which would look like this in code:

CircuitPlayground.setPixelColor(0, 0x4286f4);

Note that case typically doesn't matter when specifying hex numbers. That is:

0xff = 0xFF

Picking one or the other is just a matter of style.

More Info

If you want more info on decimal, hexadecimal, and even binary, check out this guide and associated video.

Nerdy Nerd Joke

Decimal is base ten. Hexadecimal is base sixteen. But you can actually have a numbering system with any base you want. Humans tend to like base ten because we have ten fingers. Computers really like base two, otherwise known as binary, because in their world things are either on or off. And in a base two universe, you can tell jokes like this:

There are 10 kinds of people in this world. Those that know binary and those that don't.

Last updated on 2017-05-08 at 10.04.38 PM Published on 2017-04-24 at 10.03.14 PM