Posted on
January 26th, 200710601 views
Introduction
When coding in CSS and a lot of times in HTML as well, we find ourselves using special color codes. The two most commonly used color codes in HTML/CSS are Hexadecimal and RGB. In this tutorial, we will cover what the relationship between the two is, and how to convert from one to the other. RGB and Hexadecimal Color values are very similar. They both work the same way by creating a color based on 3 values - Reds, Greens, and Blues. We will work with a very easy example: #FF0000 = Red = rgb( 255, 0, 0 ) The next page will cover the basics of the hexadecimal system. The Basics If we were to convert a hexadecimal color into an rgb color value, the first thing you must realize is that the hexadecimal value is 6 characters long. - The first 2 represent the reds
- The second 2 characters represent the greens
- The final 2 characters represent the blues
An important thing to remember is that the hexadecimal number system is based on 16, unlike the common number system used by most humans, which is based on 10.So What's up with A-F? A-F Represents 10-15. Think of it like this: 0 = 0 1 = 1 2 = 2 ... 9 = 9 A = 10 B = 11 C = 12 D = 13 E = 14 F = 15 The next page will show you how to convert between hexadecimal and RGB. We will now convert red (#FF0000) into its RGB values. First we will split up the hex value into 3 parts. The reds (FF), the greens(00), and the blues(00). Let's start with the reds. The first character of the reds is F, so look up what F is ( F is 15 ). The second character is also F, which is obviously 15 as well. Now is where the math comes in. Converting hex to rgb is basic math, not much room to make error. We will call the first character's value x, and we will call the second character's value y. Here's the simple math formula you use to get the RGB value.Reds = ( x * 16 ) + yWhen using this formula, you should NOT get an answer over 255. If you do, something is wrong and you should go back and check And when you substitute... Reds = ( 15 * 16 ) + 15 = 255If you do the math correctly you should get 255, which is the reds value :D Do the same thing for the greens and blues (it's not needed in this example, because they are 0) If you want to convert RGB To Hex, it's the reverse procedure. Let's use rgb( 255, 0, 0 ) which is also known as red. x = Reds / 16y = Remainder when you divide the reds by 16.So... 255 / 16 = 15 with a remainder of 15. Now you can use the chart on the second page to figure out what letter you may need to use. |