pcandmore.net

Use hex colors without a color picker

Hex colors, or hexadecimal color codes, are something that everyone who wants to develop a website - or just a web frontend - should be familiar with. Examples of hexadecimal color codes are #ffffff (white), #505050 (gray) or #05673e (dark green). There are two ways to respond to the confusion that one might be experiencing when they see hex colors.

You can make your life "easy" by just going on with your day and using a color picker to identify your colors, or you can do the "difficuilt" thing by taking a bit of time and understanding how hexadecimal codes can represent colors. Those words belong between quotation marks, since learning hex colors enables you to make changes to your color schemes for your website or whatever on-the-fly without the need to use external tools.

So, let's understand what the codes stand for. Firstly, its important to understand the concept of RGB Colors. You probably know the term RGB from colorful gaming hardware or image editing. RGB stands for RED-GREEN-BLUE. A hexadecimal color code contains the amounts of red, green and blue that represent a color. The codes consist of multiple two-digit hexadecimal numbers. The character range of the hexadecimal (base-16) system is 0-f, in contrast to 0-9 for our conventional decimal (base-10) system. The hexadecimal system uses the letters a-f to allow holding the equivalents of the decimal numbers 10 to 15 within a single digit. This allows us to store values from 0-255 within just two digits.

Let's look at #05673e (dark green) for example. To translate a hexadecimal number into a decimal number, you have to multiply the first digit from the right of a pair, such as '5' in the first pair '05' by one and then multiply the second digit from the right, '0' by 16. Then, you add the values together. This results in 0 * 16 + 5 = 5. If you repeat those steps for the other two pairs of hexadecimal digits, you get the values 103 (green) and 62 (blue). Put together, this means our color is a mix of 5 parts of red, 103 parts of green and 62 parts of blue. Easy, right?

Mind that there can be a maximum of 255 parts per red, green or blue color. This helps us to find the right brightness. The more intense/bright the colors we supply are, the brighter our result is going to be. For example, #404040 is going to be darker compared to #909090, while both are gray. Now, you can experiment and try to approximate the hexadecimal values of some colors!

Tip: If you wonder why translating the hexadecimal values into decimal values works the way it does, it actually is very logical. The hexadecimal system works just like the decimal system. If we take the decimal number '47', the first digit from the right tells us the number of ones (10^0), while the digit to the left tells us the number of tens (10^1). The third digit would tell us the number of hundreds (10^2). The hexadecimal system just uses 16 as its base instead of 10, which means the digits from right to left represent the occurences of 16^0, 16^1, 16^2 and so on.

Visits: 27