Intuitive way of understanding hexadecimal html color codes?

Question

Is there an intuitive way, or a good mnemonic, for understanding the correspondence between colors and their hexadecimal values?

Answer 1

You just have to remember that the scale is 00 (no color effect) through FF (full color effect) and the three parts of the triplet are red, green and blue.

000000 is black (i.e., no color) and FFFFFF is white (mixing all three primary colors).

The hard bit is remembering the mixtures, which I use the following mnemonics for:

• Really good yams: Red + Green = Yellow (potatoes are my favorite food).
• Really bad prunes: Red + Blue = Purple (I really hate prunes).
• Good/bad apples: Green + Blue = Aqua (I'm indifferent about apples).

Obviously, you may have to come up with your own mnemonics if you food tastes differ from mine. But I find that's the easiest way for me.

Then it's just a matter of varying the quantities to add a little more red or little less blue and so on. I generally only use values of 00, 40, 80, C0 and FF since that gives you a 125-color palette to choose from and I don't want an abundance of choices to slow me down.

Answer 2

You need to get your head around three distinct things here.

1. Reading and writing numbers in hexadecimal. This just takes practice and familiarizing yourself with it. Color codes range from 00 (zero) through FF (= 255), so spend a little time (using calc.exe in Scientific mode, maybe?) picking a number and trying to guess what it'll be in hex, and vice versa. Counting in decimal is probably second nature to you; counting in hex is the same concept, with different symbols and rules.

2. How to read an RGB colour code as three component values. RGB codes are either written as three digits (#FFF) or six (#FFFFFF). In the first case, each digit is a single colour component; red, green, then blue. 0 = empty, F = 'full' (maximum). The second is the same but the additional digit gives you a much wider range of tones because you have 256 possible intensities for each component instead of 16.

3. Knowing the RGB colour model. Your primary colours are red, green and blue. Your secondary colours are yellow (R+G), magenta (R+B) and cyan (G+B). Increasing all the values makes the colour lighter; decreasing them all makes it darker. Pure greyscales will have three equal components - e.g. #ddd, #222. Tint greys by nudging one of the colour values up a bit - #866 will give you a dark grey with a hint of red. This bit you just have to learn through experience. Play with it. Get a tool like Instant Eyedropper and use it to find the hex values of known colours.

Getting it exactly right is very, very hard, but it won't take more than a couple of days before you can say "right... I want orange, which is somewhere between red (#F00) and yellow (#FF0) on the colour wheel, so let's try splitting the difference and use #F90... hmm, bit dark, so let's nudge the G and B components up a bit... #FA2... got it!"