Convert Between RGB and HEX
Welcome to yet another exciting issue of Tech Tips! I’m taking this week’s tip in a slightly different direction. This week instead of learning how to do something we are going to learn all about something. And that something is two different ways to represent colors: RGB and Hexadecimal. RGB and Hex is decimal are two different ways to name computer colors.
If you have ever used Photoshop or something similar, you are probably used to seeing RGB color representations. RGB stands for Red Green Blue, which are the three colors that when mixed together create all other colors that computers display. RGB colors are shown as three separate values that vary between 0 and 255. These numbers represent how much of each color is used to create the resultant color. The higher the number of color, the more influence that color will have on the final color. So for example, 255, 0, 0 will turn out to be a Red color, because we are mixing 255 units of red, 0 units of green and 0 units of blue. 0,0,0 will turn out to be a black color, because no colors will be represented. If we max out all the colors (255, 255, 255) we will get a white color.
If you have ever created a web site before, or done any web design, you have probably seen colors looking like this: #ffffff. This is called the hexadecimal form of the color. The number sign (#) begins every Hexadecimal color; After that, the 1st and 2nd digits represent the red value; the 3rd and 4th represent the green value; the 5th and 6th represent the Blue. For example, in the color #3366cc, 33 represents the red, 66 represents the green and cc represents the blue. Hex color values can contain any of 16 different digits, they are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F.
Follow the steps outlined below to convert between the color types:
RGB to HEX (ex: 168, 79, 255)
- Divide the Red value by 16. (Ex: 168 ÷ 16 = 10.5)
- Separate this number into two parts, the part before the decimal point and the part after the decimal point. (Ex: 10 and 0.5)
- Multiply the part of the number that was after the decimal point by 16 (Ex: 0.5 × 16 = 8 )
- Now you should have the first part of the number that you got in step two and your result from step three. (Ex: 10 and 8 )
- If either of these numbers greater than 9 subtract 9 from them and substitute that letter of the alphabet. (Ex: 10 > 9 so 10 – 9 = 1 = A; 8 ≤ 9 so we leave as 8 )
- These are the red digits of the hexadecimal color. (Ex: a8 )
- Repeat steps 1 through 6 for green and blue values (Ex. 4f, ff)
- Put all these values together and put in a number sign in front (Ex: #a84fff)
HEX to RGB (Ex: #a84fff)
- Take the first digit of the red part of the hex color. (ex: a)
- If this digit is a letter, replace with the letter of the alphabet and add 9. If it is not a letter, leave it. (ex: a = 1; 1 + 9 = 10)
- Take the second digit of the red part of the hex color. (ex: 8 )
- If this digit is a letter, replace with the letter of the alphabet and add 9. If it is not a letter, leave it. (ex: 8 )
- Divide this number by 16. (ex: 8 ÷ 16 = 0.5)
- Add the number you got in step two and the number you got in step 5. (ex: 10 + 0.5 = 10.5)
- Multiply this number by 16 to get the red value. (ex: 10.5 × 16 = 168)
- Repeat steps 1 through 8 with green and blue values. (ex: 168, 79, 255))
There are certain hex colors that are considered “Web Safe”. These colors include all combinations of the follow strings of digits: 00, 33, 66, 99, cc, ff. As you can see there are 6 possible choices here and in order create a hex color out of them, you need 3. Giving 63 which is equal to 216 possibilities.