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.
5 Comments
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 :-)
Hi Gez, thank you for the specific corrections! I've reworded those parts of the article to be a bit more accurate.
Totally agree with above. When stuff is written like for babies it is unfortunate to use 'buckets' for light.
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
Adding from what GEZ wrote above...
Though it is easy to predict hue via hexadecimal, but when it comes to saturation and value (or chroma and luma), they are almost unpredictable.
That's why I have deviced a system to understand it in both data and artistic usage.
https://blendernpr.org/store/?page_id=2911