I've wanted to make a post about this for quite some time and I've finally gotten to it. Take a look at this image:


What do you see? Does it make any sense? For some of you who know how to “decode” this coloured image I’d suggest skipping to the end if you are curious to find out what is hiding behind the colour curtain. And those of you who have no idea, you are about to learn.

As you know (you should at least), most colours used on the Web can be written in a RGB format, where every colour takes up one byte. One byte has 8 bits which can be either 0 or 1 so when you do some simple math, you end up with the fact that one colour can be any value between 0 and 255 and every colour in the RGB format falls between numbers 0 and 16777215.

Every coloured box you see in the image has a solid colour which is a single value between 0 and 16777215. Since it is much more practical to write colours in a hexadecimal base, rather than decimal (not to mention binary) I will write down the values of the two used colours in hexadecimal format as well.

The first colour has the value 4D696C and the second has the value 616E74.

You can see that the second box has a written hexadecimal number in it, which is 6578. Note that this number is also in a hexadecimal base, even though there is not even one A to F digit in it.

Write those numbers one next to another in a single line and you end up with something like this:


Now, do some more conversion and rewrite the number in binary base. You will end up with this:


Now, this isn’t really useful when you do not know what it represents. If this stream of bits is a monochrome raster image (a very small one) you would need to know the width and height of the raster in order to break it up properly and end up with an image. For example, let’s say that the image is 16 pixels in width, you would end up with:


When we translate this to pixels we get:


This doesn’t look very nice. Maybe we were wrong about the width. What if it should be 8 pixels? Let’s try it out. We will get:


When we translate this to pixels, we will get this:


This also makes no sense. So, maybe we were wrong about this binary stream representing an image. Let’s try with text.

There are many ways to encode characters. There is UTF-8, Windows-1252 and ASCII etc. To skip to the good part, I will not bother you with guessing games and will go straight to ASCII format.

ASCII character encoding uses exactly one byte for every character and the character table can be found all over the Web, so I will not be redundantly copying it here.

So, all we need to do is split the binary stream in groups of 8. We have already done this a minute ago for our 8 pixel wide monochrome raster image attempt, so I will just write them out here in a line:
01001101 01101001 01101100 01100001 01101110 01110100 01100101 01111000
Since every ASCII character has a numeric value from 0 to 255, let’s convert these grouped numbers into decimal numbers:
77  105  108  97  110  116  101  120
Now, when we lookup these values in the ASCII table we end up with this string:


There it is! The answer to the question “What is hiding in those colours?” is “Milantex”.
I hope you liked this post. If you really like it, I just might make a coloured box generator for any string you type in. Let me know if you like it, you know how.