Publishing System Settings Logout Login Register
Understanding the relationship between RGB and Hexadecimal
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Rating
Add to Favorites
Posted on January 26th, 2007
10601 views
CSS Stylesheets
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 RGB value is compromised of 3 numerical values. Similar to hexadecimal, the first number is the reds, second is the greens, and third is 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 ) + y
When 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 = 255

If 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 / 16
y = 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.
Dig this tutorial?
Thank the author by sending him a few P2L credits!

Send
cheerio

This author is too busy writing tutorials instead of writing a personal profile!
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top