Hex Master

My first public project

Finally, my first public project!

What type of project is this?

In web development you can use hex values, that are a number in hexadecimal, to set the color of an element as every hex value refers to one, and one only, color.
They’re a bit strange as they use the letters from A to F to reppresent the number from 10 to 15, that’s why is called hexadecimal, they have 16 digits, from 0 to F.
Usually they are used in pairs per channel, so we have a value that can be between 0 and FF(which is 255).
They are written like this: the symbol # followed by 2 digit for red channel then another 2 digits for green channel and the last 2 digit for the blue channel.
By the combination of these 3 value you can recreate every color you want, let’s see some examples:
#FFFFFF - is white, FF is the max value for a channel so white has all channels to the max value.
#000000 - is black, 00 is the lowest value for a channel so black has all channels to the lowest value.
#FF0000 - is red, max value for channel red, and all the others channels to the lowest value.
#FFD700 - is the gold color, max value for red, almost 85% green an 0% blue.

Web developers don’t know every color in hex, in fact they use some tools to pick colors, so I thought, why not to make a simple game to test my ability to recreate a color by only know its hex value?
So I did this game.

Game rules

The game give you an hex value(random), and you must recreate the color by using the 3 bars(one for each channel) that you have, once you think to have chosen the correct combination you can view the results by press the “Done!” button. This button will show the color that you create, the correct color and your accuracy of your color.
After that you can ask for new color from the “New color!” button.
There’s no limit, you can ask for how many color you want!

Play the game

You can find the game HERE.
Note: Firefox or Chrome based browser is needed.

Conclusion

In another post I’ll show how I created the game.

What’s your max accuracy that you achieved?
What do you think about it?
Comment on Twitter! @CodeSailer