Siteroller Blog

CSS accepts Red/Green/Blue color values written in either of two ways:

1. An array (each value can be 0 - 255)
   background: rgb(255,255,255);
2. A hexidecimal (each digit can be 0 - F)
   background: #FFFFFF;

The hex method uses base 16 to codify all values up to 255 in just two digits.
The letters A - F represent the numbers 10 - 15 respectively.

• F1 = (15 * 16) + (1 * 1) = 241
• 09 = (00 * 16) + (9 * 1) = 9

---

For the color picker, we needed an easy way to convert between the two notational values. 
Fortunately, Javascript has built in methods just for this, toString & parseInt.
(Both of which accept a number representing the base or radix that we are computing by.)

Converting to Hex:

Great! ...as long as the input value is above 15.  Otherwise, the returned value will be only one digit and will likely confuse the browser.
Since Javascript lacks an internal padding function, we will have to wing it:

There are better all purpose pad functions, but this is good for our needs.
BTW, all browsers can accept a 3 digit hex value, but when only one of the three colors is one digit that won't work.

Done.

Converting from Hex:

Simple, no?!

One last thing - if you use Mootools, this is already built into functions called rgbToHex() and hexToRgb(), which is even simpler!

 var arr = '#FF0000'.hexToRgb();
// arr == [255,0,0]