How to Play

The Aim of the Game

The aim of the game is simple: Try to guess the color that is being presented on the screen in front of you. The closer your color guess resembles the actual color shown, the lower score you achieve.

The way you guess colors in this game is by typing in the HEX color code of the color you want to guess. If you do not know what HEX is, read the following section on how it works.

Guess the Hex is a game with a purpose. This means that while it is an entertaining game, it does two things. Firstly, you personally learn more about how computers interpret color and gain a much deeper understanding of the constituents of certain color groups. And secondly, for every guess you make (as long as you have a registered account), data is collected and stored about the color that was presented and the accuracy of your guess. This gives three great advantages to this game. As a user, this means you can resume a saved game at any point, and you may view statistics and information about your development in color guessing for each round you play and your overall statistics (view ‘Full Stats’ in-game and ‘Personal Stats’ on the menu page). If you would like to use the data that is collected from all users for analysis, please send me an email and I will grant your request provided the intent is appropriate (this data would be anonymized).

Game Rules

A color similarity algorithm called CIEDE2000 calculates the difference between your guess and the color that is shown, called Delta E. The meanings behind the score that you achieve for a given guess is as follows.

Credit to hamada147 (GitHub) for the CIEDE2000 implementation in JavaScript

Each guess changes your lives:

You can hold at most five lives. A timer tracks the amount of time to guess the color presented. If your timer runs out, the timer is reset, and you lose a life. The color presented does not change. The more rounds you pass, the shorter the time available becomes. The amount of time available matches the following curve.

When you run out of lives, the game is lost.

You must submit a six-digit HEX code, or else the input cannot be submitted.

After submitting your color, the sides next to the target image illuminate with the color that you have guessed. The accuracy of your guess will be shown, and a new HEX color will be displayed.

Understanding HEX

A HEX code is a six-digit set of numbers and letters. The way a color is produced from these is simple. A computer generates color by combining a mix of red, green and blue. With these three components, any color on the visible color spectrum can be created. A HEX code just puts together the amount of red, green and blue in each color by chunking each component into pieces of two. The first two symbols represent the red amount, the next two the green amount and the last two the blue amount. Let us look at an example:

*The ‘#’ is simply an indicator that this is a HEX code

So this is simple, but how can letters represent a number?

This is because hexadecimal numbers are written in hexadecimal notation, just like binary, or the normal decimal notation. This means that one digit represents a value from zero to 15. Because there are no more than 10 number symbols (0-9), hexadecimal also uses symbols from the alphabet for numbers beyond 9.

1. 00
2. 11
3. 22
4. 33
5. 44
6. 55
7. 66
8. 77
9. 88
10. 99
11. A10
12. B11
13. C12
14. D13
15. E14
16. F15

As can be seen by the chart, hexadecimal values range from 0 to F, F being 15.

Each individual color component ranges from 00 to FF (255 in decimal) and defines a point on the spectrum of black to maximum of that color component - exactly like RGB (red, green, blue).

These components can be mixed to produce all humanly visible colors. Read ‘Tips for Success’ to learn about a few key color combinations and their ratios.

Tips for Success

1. Identify the color in front of you as belonging to one of these color groups. They are the same groups your statistics use (how colors are grouped):

*Note that these HEX codes by far do not represent all possible colors and their perfect ratios. This only helps to get started manipulating your hex code to the color that you want. Read the list of subsequent steps to perfect the color.

2. Identify a color as being bright, or less bright, and adjust accordingly

3. Check whether the color presented rather leans more to a certain color component. Colors will almost always have a dominant color.

4. Recognize how saturated the color is: if it is very saturated, there must be a large difference between at least two color components. A large difference would, for example be 00 to DD, for example. If the color becomes less saturated, the third, most far away color component from the rest must approach the other color components.

With all of these tips, you should be set to be able to guess HEX colors! Do not be discouraged if you do not start off all too well, you will improve by practicing, as you get a better feel for how the three color components stand in relation to each other.

And lastly, one small tip: It is already very difficult to correctly identify the 16s place of a color component in this game. Therefore, to help with speed when the time available becomes very short, I advise you to repeat the same number for the 1s place in order to make typing faster (all of the examples used in the past few diagrams show what I mean).

See you on the leaderboard!