How do I use this?

On the homepage, write some text in the input field and hit [enter]. Your text has been converted into a few colors, all displayed on screen.

Click any color to see the hex color code. To learn more about color codes, the mechanism of this website and the little +??? you may see in the bottom left or right corner, read the next section.

How does this work?

Every character you can possibly type in the input field, has a special code (a simple number), called the unicode code point, used by computers to identify them under the hood. The letter a for example, is number 97, the letter c is 99, t is 116, etc.

The first step of the process consists of extracting all the code points and concatenating them. For example, the text cat would result in 9997116.

The result of the transformation above is always a decimal number. We call it 'decimal', because it is written in base 10. Explaining what that means would lead us too far, so if you want to learn more about that, I recommend this WikiPedia page.

As you may have guessed, there's also different ways (or bases) to write numbers; the one used here is 16, called 'hexadecimal'. To make up for the lack of numbers (we only have 10 numbers, hexadecimal notation needs 16), the first 6 letters of the latin alphabet (a-f) are used in combination with the regular numbers.

The next step is to transform the decimal number above to its hexadecimal counterpart. In this case, 9997116 becomes 988b3c.

The final step is to convert the hexadecimal number to a few colors. Fortunately, one particular way to express colors is based on hexadecimal numbers. A so-called 'hex' color consists of a hashtag (#), followed by three two-digit numbers between 00 and ff, for the red, blue and green components, respectively. For example, #000000 is black (all colors off), #ffffff is white (all colors on) and #ff0000 is red (only red on).

Now that we have one big hexadecimal number, we just have to split that in pieces of 6 digits; each piece will represent one color. In this case, 988b3c already consists of 6 digits, so we get one color, #988b3c.

Of course, the resulting hexadecimal numbers won't always consist of a multiple of 6 digits. In that case, the last bit is shown in the bottom left or right corner.

About the project

This project was developed by Tuur Dutoit, inspired by this video by Numberphile on YouTube.

The original version of this code can be found running here.

The source code, licensed under the MIT license, can be found on GitHub. You are free to look at, reuse and adapt the code, without attribution, although that would be nice :)

© 2016 Tuur Dutoit