Hexadecimals and Alpha Channels Made Easy

Bart · October 24, 2015

Have you ever wondered why colours on the web and in computer graphics are often coded like #4499aa? BlenderHD explains why!

Why are colors are 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 (RGB for short). Mixing these colors 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.
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.

Link

BlenderHD – Hexadecimals and Alpha Channels Made Easy

Author Bart

I have a LONG history with Blender - I wrote some of the earliest Blender tutorials, worked for Not a Number and helped run the crowdfunding campaign that open sourced Blender (the first one on the internet!). I founded BlenderNation in 2006 and have been editing it every single day since then ;-) I also run the Blender Artists forum and I'm Community Lead at n8n.

5 responses

Gez

24 October 2015 at 20:36

Nice summary. However, perhaps for the sake of simplicity there are some mistakes that could make things a bit more confusing than they should.
I’m probably nitpicking here, but first of all, I don’t think the “buckets of light” metaphor is really helpful, as it might lead to confusions between the substractive and additive mixes. It works better with the intensity of 3 color lanterns.
The alpha channel section needs some work too. There is no such thing as transparent pixels. Pixels always have RGB information (associated or unassociated to the alpha channel). When alpha channel is used you’re telling the software that does image compositing how to blend pixels together.
When combining two images together with the alpha-over operation, you’re actually adding their light intensity, and the alpha channel of the foreground image controls how the front image occludes light coming from the background.
The simple math in the porter-duff alpha over operation shows it in a beautiful way: the alpha channel casts a shadow on the backgound, then the foreground with the associated alpha is added.

And finally, and this is definitely nitpicking: there were bitmap image files before Windows :-)

Jonathan Lampel
24 October 2015 at 23:43
Hi Gez, thank you for the specific corrections! I’ve reworded those parts of the article to be a bit more accurate.
Reply
John
26 October 2015 at 08:40
Totally agree with above. When stuff is written like for babies it is unfortunate to use ‘buckets’ for light.
Reply
1. Dolores 74
  30 October 2015 at 22:44
  I wrote this document for people taking their first baby steps. To people who take their first baby steps I talk baby language.
  I understand that you are somebody who were pushed out of your mother womb and went straight to the ‘Ironman Triathlon’. Unfortunately we are not all like you.
  By considering newbies as babies you only debase yourself.
  If you wish to be worshiped as a God you’d better start to create miracles and write your own alpha document spoken in a some divine language.
  The idea is to spread the word and Jonathan did a good job.
  Karel Van Tornhaut
  Reply