In web design, hexadecimal (hex code) is a number system used to generate digital colors. This code is base-16, instead of the base-10 system we are used to. Hex code has its origins in the early days of computing, where it was implemented as a simpler counting method than a computer's standard "binary" code (all zeroes and ones). This method of color selection is a common choice when determining colors for web design.
Click through the tabs below to learn about how to calculate and use hex code for color selection in web design.
When we count normally, we count by ones up to ten. We continue to count by ones until we reach ten again, at which point, we increase the tens spot by one, giving us twenty.
Example: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10...20...30
Hexadecimal code works similarly, except to get the extra digits, it uses the letters A-F to represent the numbers 10-15. After you reach F, you add one to the next number place (which would be the tens place in our base-10 counting system) and start back at zero in the ones slot.
Example: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F and then 10, followed by 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, 1C, 1D, 1E, 1F and then 20...
When you use hexadecimal coding in web design, you'll only ever need to calculate two numbers at a time. With base-10 counting, a number like 84 can be described as "(8 x 10) + 4". When you calculate a hex number, you essentially do the same thing. The exception is that you multiply by 16 instead of 10. You can use the formula (first digit x 16) + second digit.
For example, the hexadecimal value of the number "42" would be calculated as follows:
(4 x 16) + 2 = 66
So, what about something like AA? We know now that A represents the number 10. Since there are two of them, we have two tens. We plug that into the formula: (10 x 16) + 10 = 170. The maximum possible value with two digits is FF, which equals 255.
Quesstion
What are the values of A-F for hexadecimal counting?
A = 10, B = 11, C = 12, D = 13, E = 14, F = 15
Now, as far as actually applying this system, a pair of numbers is assigned to each color (red, green, and blue), always totaling six digits.
Since black is the absence of any color values in RGB, the code to represent black is zeroes across the board: #000000. On the opposite side, white is all colors set to max, so we use the code: #FFFFFF. Here's a table showing a few other full-value combinations:
| Red #FF0000 | Green #00FF00 | ||
| Blue #0000FF | Yellow #FFFF00 | ||
| Cyan #00FFFF | Magenta #FF00FF |
Any other color variation is created by using a combination of values for red, green, and blue. The more stark the difference in values, the more intense the colors will be. If the values are set closer, they'll appear duller or closer to gray.
| #016FB9 | #EC4E20 | ||
| #BCD979 | #4A306D | ||
| #F75590 | #FFC914 |
If you're feeling a little overwhelmed by the calculation of hex values, don't worry. Most designers who use hex values in their work utilize a color generator to find their desired hex color code. Thankfully, the web has multiple ways of representing colors. The trick is finding the method that works best for you.
