Hexadecimals and Alphas Made Easy

Why are colors written as numbers and letters?

This topic can be really confusing at first, but it’s important for any digital artist to understand. By the end of this article, however, you’ll be reading HEX values like a pro.

The Basics

Whatever color you see on a computer is made out of only 3 colors: Red, Green, and Blue. These are the primary colors for additive color theory, where mixing them together in different proportions will produce new colors. If I have three buckets of light, each containing an amount of the basic colors Red, Green, and Blue, and I pour them together in a forth bucket and mix it all together, it will become a different color.

Note: mixing light refers to additive color theory, while mixing something that reflects light, like paint, refers to subtractive color theory

RGB Red Green Blue

In this example, the purple color is a mix of 70 % Red (of the buckets’ volume), 12% Green (of the buckets’ volume), and 85% Blue (of the buckets’ volume). If we want to write this in a short way to give the purple color a number, referring to the basic RGB colors, we could do it like this:

Purple Color Number = 701285

Pretty simple so far, we’re just smashing the three numbers together.

How image files work

An image file is nothing more than a table with an X number of columns, and an X number of rows. It means that every cell of this table represents a pixel. If you scale an image to the extreme, you see the pixels appearing as squares. Every cell of an image table, or pixel, contains 1 number and 1 number only because a pixel can have only 1 color. The number of this color is written in the same way as the bucket’s color, except in hexadecimal (a.k.a. HEX) instead of percent.

pixel values

If you give an image file to Blender, it reads the number of every cell in the table, row by row, column by column and shows the corresponding color on the screen.

So why use Hexadecimals?

Hexadecimal is a convenient way to express binary numbers in computers, where a color has one byte at its disposal. In our decimal system we have ten numbers or digits (deci means 10).

0 – 1 – 2 – 3 – 4 – 5 – 6 – 7 – 8 – 9

A byte, on the other hand, is always defined as containing eight binary digits.

If I say hundreds, you know that I am talking of a number with 3 digits: XXX. If I say thousands, you know it is a number containing 4 digits: XXXX. The same goes for computers – a byte is defined as containing 8 digits.

A byte = XXXXXXXX (8 times)

The smallest number in our decimal system with 8 digits is 00000000 and the biggest number is 99999999. To calculate the number of different combinations possible we use the formula : 10^8 (10 to the power 8, or 10x10x10x10x10x10x10x10). 10 Because there are 10 different numbers, and 8 because there are 8 digits.

That makes: 10^8, which is 100,000,000 different combinations, because 00000000 also is a combination.

The Binary system

A computer uses a binary system that knows only two numbers: a ‘0’ and a ‘1’. The reason is that it works with electric switches that turn on or off extremely fast. A switch is on (1) or it is off (0).

The smallest number is 00000000 and the biggest number will be 11111111 (All switches are off, or all switches are on). We can calculate the number of possible colors in the same way: 2^8 (2x2x2x2x2x2x2x2). 2, Because there are only 2 numbers, and 8, because there are 8 digits. That makes 256 different combinations possible. As a result of that, the three basic colors (Red/Green/Blue) each can have 256 different values. From 0 to 255. As with the buckets, 0 = 0% and 255 = 100%

Let’s take an example. We fill our buckets again, but this time with numbers instead of a percent.

  • A value for red is: 10101010 (combination 170 out of the 256 possibilities)
  • A value for green is: 00011001 (combination 25 out of the 256 possibilities)
  • A value for blue is: 11001101 (combination 205 out of the 256 possibilities)

As explained in the illustration above, a color can have only one number, so we place them all after each other, as with the buckets. That means a color mixed with these red, green and blue values will give this digital number :

RGB number = 101010100001100111001101

The computer knows that the first 8 digits are the Red value, the middle 8 digits the Green value and the last 8 digits are the Blue value. Can you imagine writing this number down to remember the kind of color you used? We obviously need a better system here.

The HEX system

The system used is the ‘Hexadecimal’ system. HEXA means 6 and DECI 10. Therefore 16. The symbols will be:

0 – 1 – 2 – 3 – 4 – 5 – 6 – 7 – 8 – 9 – A – B – C – D – E – F (We need 16 symbols, so we add letters.)

To replace an 8 digit number (XXXXXXXX) containing only two different digits, 1 and 0, with a 16 digit system, we need a number with only 2 digits (XX), because 2^8 = 256 and 16^2 also is 256.

Our binary color number, 101010100001100111001101, converted to a HEX number will gives us #AA19CD.

In this HEX combination, the first two digits are the Red value, the middle two are the Green, and the last two are the Blue value. Now I can take a piece of paper and easily write this color down.

The # (pound symbol, hashtag if you are under 17) is commonly used to indicate that what follows has to be interpreted as a number. FF can have different meanings, so if you write #FF, there is no doubt.

You can find this number in Blender in every color wheel if you click on the HEX button. If we write our example HEX number #AA19CD in the color wheel for the viewport color of our cube, we have a purple looking cube.

hex color

Note how if you play with the color, this number changes. If you click on the textbox you don’t have to write the # symbol.
If you switch back to RGB, which is the default, Blender does not give the values of the basic colors from 0 to 255, but from 0 to 1 instead. 0 representing minimum (0) and 1 representing maximum (255).

If you go to the color picker in Photoshop, you will find the regular numbers back.

photoshop color

The minimum number in a hexadecimal system is #000000 (Black), and the maximum number is #FFFFFF (White). All F’s, because F is the biggest digit.

0 – 1 – 2 – 3 – 4 – 5 – 6 – 7 – 8 – 9 – A – B – C – D – E – F (We need 16 symbols so we add letters.)

Here is our first ‘table’ illustration again. This should clear up why it is called a ‘CHANNEL’

channels3

So what about transparency?

When computers still wore diapers, this system worked out well. Steve Jobs could make his ‘Graphical Users Interface’ (GUI) to use computers without any command line shenanigans. Icons could be shown on the screen and the user just had to click it with the mouse. Everything was made of bitmaps.

But the more computers conquered the world, the more people wanted to manipulate pictures and make everything look pretty.
There was a small problem with that. What if I have an image and I want to add something else to it? I can lay it on top of my image, but I don’t want the gray background of it. I only want the logo. You can’t just remove a pixel out of the image table. It means that the gray pixels have to be transparent, so the background can show through it.

transparent logo

In the system, so far explained, there is no way of doing that. A value is minimum #000000 (black) or a value is maximum #FFFFFF (white). All the numbers in between are some kind of a color.

Now what? We have to come up with a way to define that a pixel is transparent.

But wait, there’s more! What if I want my logo to have a shadow that fades out? Whether or not we can see a pixel is not enough information, we have to give it a value based on how much the background should peep through.

If you open our logo, with its shadow and glare effect, in the ‘UV/Image editor’ in Blender you see this:

transparency

Of course, Blender cannot show transparency on the screen, or you would have a hole in your monitor. It instead represents transparency with a checkerboard-like pattern.

The glare and shadow fades out towards the borders. It means that we need something like a minimum and maximum, and all the values in between.

Finally, the Alpha Channel

We already gave the colors, Red/Green/Blue a minimum and maximum value. We gave it a byte at their disposal with values variable from 0 to 255.

Remember the HEX number? #XXXXXX

So what stops us from giving the total color number one more byte? #XXXXXX + XX = #XXXXXXXX

We can give extra values from 0 to 255 to every pixel in our bitmap table and assign it to something like the alpha channel. If everything has to do with transparency, however, than why on earth do they call it the ‘Alpha Channel’ and not the ‘Transparency Channel’ ?

Well …

If you really want an answer to that question you’d better ask Mister Alvy Ray Smith, Ed Catmull, Tom Duff or Tom Porter for it. They invented it and received the technical academy award on March 1996 from the Academy of Motion Picture Arts and Science for “pioneering inventions in digital image compositing”. They got an Oscar award for inventing the ‘Alpha channel’.

We have a value for the transparency of every pixel from 0 (100% transparent) to 255 (100% opaque). This value has no color. It is just a value determining how much the background should shine through.

If you have an image that has an alpha channel and you want to see it, (represented as Black and White) open your image in Blenders ‘UV/Image editor’, click the ‘Alpha’ button and the alpha channel of our logo looks like this :

alpha channel

As you can see, the logo itself is fully white (0% transparent), and the more it fades out to the border it turns to complete black (100% transparent).

You have to be careful though, not every image file has the capability to contain an Alpha Channel and not all image files that do contain an alpha channel have the values from 0 to 255.

In the beginning was RGB

The very first bitmap file for Windows was called BMP, and DIB for Mac.

The next step towards the Alpha channel was an “is there transparency, yes or no”,  without any values in between. GIF was one of the first bitmap files that had an Alpha channel, but it was a simple yes or no, 0 or 1.

The next step was to give the alpha channel fully gradable values from 0 to 255, and one of those files is a PNG.

Putting it all to use

To find out if a file extension has the capability to contain an Alpha Channel, go to the ‘Output’ menu in the ‘Render’ tab. There you can select different file types to save your work in. If it has the capability to contain an Alpha channel, an option box appears with RGBA (Red/Green/Blue/Alpha). A JPEG file does not have an Alpha Channel, there is no RGBA button available. (BW = Black/White)

output

If there is no transparency in your image, there is no need to save it as RGBA. Click the RGB button instead. As you know, an RGBA pixel has this color data #XXXXXXXX. But an RGB pixel has only this color data : #XXXXXX, so it has byte less.

An image file does not only contain the table data for the pixels – it has a header too. In this header is written whether or not a program should take the alpha channel in account when it reads the file. Therefore, if Blender writes the file, it does not write that extra alpha XX byte when it saves (If you select the RGB button), and writes that information into the header of that file. It also means that the file size is smaller since it does not contain that extra alpha byte.

“OY! Photoshop, there’s no alpha here!”

This image saved as RGBA PNG has a size of 389 kB. Saved as RGB PNG it is only 249 kB. The difference of 140 kb doesn’t seems to be much. But if you have an animation with 1.000 frames, it is 140 MB.

If you load the final rendered image sequence of an animation of 1.000 frames into the Video Sequence Editor to turn it into a video file, Blender is dealing with 140 MB of useless data that only slows the performance down.

So, if there is no transparency in your work, you’d better just save it as RGB only.

This article was originally written as a PDF by community member Dolores, and adapted to a blog post with her permission. The cookie logo in a few of the images belongs to our friends at cgcookie.com.

I hope that helps! Want to learn about image compression? Check out my video here.