Web Development: Color Selection and Counting All Possible Colors

If you are a web developer or have dealt with HTML/CSS at some point, you have probably dealt with color selection in customizing your text and background color.

One day though — as I practiced my CSS and jQuery skills via making a Twitter clone — an interesting question came across my mind: how many colors do we have in web development?

Naturally, I googled this very same question. And much to my surprise, I failed to encounter any thoughtful answer to this question.

As my next step, I probed the common ways we select colors and hoped to find clues to get the right answer for color count.

Method 1 of Choosing Color: Color as String

If we were to change colors in an <h1> tag, we can easily change the color using CSS. And for simple colors, we can simply specify the colors using a string.

Here, green is such a simple color that we can use ‘green’ as a string to indicate the color we want. Obviously, this method failed to provide clues in answering my question.

Method 2 of Choosing Color: Hexadecimal

In CSS, you will often see color specified as a hashtag with a bunch of numbers and letters.

For instance, the whitest of white colors is #FFFFFF. On the other hand, the blackest of black colors is #000000. The color system selection seemed complex enough that if probed, it would yield a clue to answer my original question!

Comparing the white and black color, it seems like there are only 6 spots for numbers and letters.

Then, after looking at a bunch of colors, it seems that in each of these spots, the values seem to only go as far as F. Then it dawned on me that each spot utilizes a base-16 number system! In short, each spot can have a value between 0 and F (inclusive).

Given these facts, we just need to perform a bunch of multiplication to answer my question. The total number of colors is simply: 16⁶

In short, we have 16,777,216 colors in our disposal in web development.