Section 9.22. The two minute guide to hex codes

9.22. The two minute guide to hex codes The first thing you need to know about hex codes is that they aren't based on ten digits (0 to 9)7 they're based on 16 digits (0 to F). Here's how hex digits work: Using hex, you only need a single digit to count all the way from 0 to 15. When you get above 9, you start using letters. So if you see a hex number like B, you know that just means 11. But, what does BB, or E1, or FF mean? Let's disassemble a hex color and see what it actually represents. In fact, here's how you can do that for any hex color you might encounter. 9.22.1. Step one: Separate the hex color into its three components. Remember that each hex color is made up of a red, green and blue component. The first thing you want to do is separate those. # cc 66 00 Red Blue Green CC 66 00 Take your hex color and break it up into its red, green, and blue components. 9.22.2. Step two: Convert each hex number into its decimal equivalent. Now that you have the components separated you can compute the value for each from 0 to 255. Let's start with the hex number for the red component: Now take the left-most number and convert it to its decimal value, and also multiply it by 16. Finally, add these two numbers together. CC 12 12 * 16 = 192 Take the right-most number and write down its decimal value. 192 + 12 = 204 So 204 is the decimal equivalent of CC in hex. 9.22.3. Step three: Now do this for the other two values. Repeat the same method on the other two values. Here's what you should get: CC 66 00 204 102 0 To calculate 66, you have (6 *16)+ 6 = 102 To calculate 00, you have (0 *16)+ 0 = 0 9.22.4. Step four: There is no step four, you're done! That's it. Now you've got the numbers for each component and you know exactly how much red, green, and blue go into the color. You can disassemble any hex color in exactly the same way. Now let's see how you'll usually determine Web colors. Putting it all together You've now got a few different ways to specify colors. Take our orange color that is made up of 80% red, 40% green, and 0% blue. In CSS we could specify this color in any of these ways: body { background-color: rgb(80%, 40%, 0%);Specify by the percentage of red, green and blue. } body { background-color: rgb(204, 102, 0);Specify the amount of red, green and blue on the scale 0255. } body { background-color: #cc6600;Specify using a compact hex code. }