Color Master

Harys Dalvi

January 2022

This is a small game to practice hex colors, as used in web development and some other places. There is “encode mode” where you see a color and type its hex code, and “decode mode” where you see a hex code and pick the right color.

Encode

1 minute

Beginner Easy Hard

Decode

2 minutes

Beginner Easy Hard

Help

Encode: Type six characters to guess the hex code of the color shown (not case sensitive). When you check your guess, you will get feedback on your guess. If your guess is within range for a color (red, green, blue) your guess for that color will be shown in the text box. If your guess is not within range, two blanks will be shown for that color. If your guess is within range for all three colors, or if you guess three times, a new color is shown. You get a bonus for taking fewer tries to guess, and for being closer to the correct answer.

Decode: A hex code will be shown, along with nine colors. Click the color you think matches the hex code. If you guess correctly, you get 160 points. Otherwise, you lose 20 points. (This is so random guessing does not increase your score.) After each guess, you go to a new hex code.

At the end of each game, you'll get a report showing colors and hex codes for the correct answers as well as your guesses.

What is this?

The cells in the eye that help us see color are called cone cells. Usually, people have three types of them, except color blind people. In rare cases, people called tetrachromats can have more than three. But three is most common.

Just as human eyes have three types of cone cell, computer LEDs come in three types: red, green, and blue (RGB). Different brightnesses of each type stimulate our three types of cone cells differently, creating the illusion of a single color. For example, red and green make yellow in the RGB system.

The brightness for each RGB color goes from 0 to 255. In the hexadecimal color system, each brightness is written as a hexadecimal number. For example, FF is 255 in hex. So to write the color blue, you want zero brightness (00) for red, zero brightness (00) for green, and full brightness (FF) for blue. That's how you get #0000FF, the hex code for pure blue. A lighter blue might be #A0A0FF, and a darker, more greenish blue might be #00A0C0. #FFFFFF is white and #000000 is black.

It's possible to build up an intuition for these hex codes, rather than seeing them as just numbers. This makes for cool party tricks like giving the hex code for the color of a table just by looking at it. Computers can go from hex codes to colors and back instantly, but can you? If you play this game, you will be able to. Best of all, you can learn cool new social media hashtags like #7DC845 and #510E3E.