Even in the simplest photo editor applications, you can see black-white filters. Have you ever thought how these apps convert color images into black and white images, in other words gray-scale images?
Before going into the answer of the question, let me first explain in the simplest way how computers/smartphones display images. There are a lot of leds under the screens. These are rgb leds. They can generate red, green and blue lights.
The RGB color model is an additive color model in which red, green, and blue lights 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.
How many colors can you count? I really tried and could count up to 16 colors. Do you have any idea how many colors a computer can display on its screen?
16777216 different colors. It’s forking huge dude. Crazy, isn’t it? By the way the calculation is very easy. In computers, data should be stored in the memory. The RGB value goes up from 0 to 255 because it takes up exactly one byte of data. One byte is equal to 8 bits, and each bit represents either a 0 or a 1. This makes 0 in 8 bit binary:
The last bit says if there is a 1 in the value. The second last says if there is a 2 in the value. The third last says if there is a 4 in the value, and so on doubling every time. If you add up all of the small values that are present, you get the total value. For example,
=1*128 + 0*64 + 1*32 + 1*16 + 0*8 + 1*4 + 0*2 + 1*1
=128 + 32 + 16 + 4 + 1
This means that 10110101 in binary equals 181 in decimal form. Wow, sorry I got kind of off-topic.
So, there are 256 different tones of red. Same for green and blue. When you combine different tones of these three main colors, you generate new colors. So do the math. 256*256*256 = 16777216. (With the today’s technology, there are 1000 tones of each color. But I’ll go with the traditional :)
For example if you combine R=255, G=255 and B=0 you will get a very exact yellow.
If you want to generate pink, you need to add 255 pinch of red, 192 pinch of green and 203 pinch of blue.
You can generate any color on google color picker. Try it! This is very fun.
Well, we can derive that black has 256 different tones. The darkest tone is the super dark black which is the combination of 0 red, 0 green and 0 yellow. Makes sense right? If there is no light from any color, it is a black hole.
And the lightest tone of black is white. If you mix 255 red, 255 green and 255 yellow, you will get the lightest white in the world.
So, in a manner of speaking, gray-scale images are combination of different tones of black. Now the main question of this blog reduced to a very simple problem. How to convert RGB values to gray-scale values?
There are a couple of methods to convert into a gray-scale image. If you are living the life in the fast lane, in other words there are just true and false for you and no middle, then you will just use the darkest black and lightest white to convert images.
Let’s see an example. Here is a princess.
The algorithm for our first method is the following. If the red, green and blue values are greater than 123, we will put 255 to the corresponding pixel on the new gray-scale image. Otherwise we will put 0. Lets see our princess with this crazy filter.
As you can see, there is no gray tones on the image. There are just super blacks and super whites. (No to racism!)
What if we don’t want to lose the features of the image. Then we should try the averaging algorithm. Average method is the most simple one. You just have to take the average of three colors. Since its an RGB image, it means that you have add r with g with b and then divide it by 3 to get your desired gray-scale image. Its done in this way. Gray-scale = (R + G + B / 3).
Lets see our princess with this averaging filter.
Wow. Look at the little monster averaging algorithm. It generates a very good result. But there is minor problem with this algorithm. Can you really feel the green of nature on this image? I cannot! We wanted to convert the image into a gray-scale, but this turned out to be a rather black image.
This problem arise due to the fact that we take the average of the three colors. Since the three different colors have three different wavelength and have their own contribution in the formation of image, we have to take average according to their contribution, not done it averagely using average method. Right now what we are doing is this,
33% of Red, 33% of Green, 33% of Blue
We are taking 33% of each, that means, each of the portion has same contribution in the image. But in reality that is not the case. The solution to this has been given by luminosity method.
Since red color has more wavelength of all the three colors, and green is the color that has not only less wavelength then red color but also green is the color that gives more smoothing effect to the eyes.
It means that we have to decrease the contribution of red color, and increase the contribution of the green color, and put blue color contribution in between these two.
So the new equation is:
New gray-scale image = ( (0.3 * R) + (0.59 * G) + (0.11 * B) ).
According to this equation, Red has contributed 30%, Green has contributed 59% which is greater in all three colors and Blue has contributed 11%.
Applying this equation to our princess, we get this beauty:
Now you can feel the color transitions much more better. As you can see here, the image has now been properly converted to gray-scale using weighted method. As compare to the result of average method, this image is more brighter.
Final note: I generated the images above using Matlab. If you want to try yourself, you can start with learning programming :D 😎😎