Learn How to Convert RGB Colors to Hexadecimal with Javascript

What is a Hexadecimal?

A hexadecimal value uses a 16 digit number system, as opposed to our traditional 10. Instead of digits, the last 6 numbers are represented by the letters A through F. We use these for colors because the extra characters allow for a much wider range of values to be spread a two digit pattern. Rather than 100 possible values in a ten digit system, a hexadecimal provides 256. Or 16,777,216 possible colors when combined into a full RGB color code.

• 0 = 0 (#000000 blackest of blacks or {red: 0, green: 0, blue: 0})
• 1 = 1
• 2 = 2
• 3 = 3
• and so on, then letters replace 10 to 15.
• 9 = 9
• A = 10
• B = 11
• C = 12
• D = 13
• E = 14
• F = 15 (#FFFFFF whitest of whites or {red: 255, green: 255, blue: 255})

This why a hex code of #FFFFFF is white, and a hex code of #000000 is black.

What is an RGB (Red Green Blue) Color?

As you might know, the colors on your computer screen are generated by pixels that of red, blue, and green. By combining these colors, we can produce nearly every color variety on the visual spectrum. In CSS, we can use RGB colors by writing rgb(10, 20, 30). Each number should range from 0 to 255. The smaller the amount, the darker the color. 

Consider the hex code #5A5A5A. This gives us a dull grayish color. Whenever you repeat the same two-digit color codes together, you get an equal mix of that variety of red, blue, and green, always producing a different shade of gray.

If you swap out this pattern with some zeros, you can see how each 5A code is tied to its red, green, or blue counterpart. You will get the same results by swapping out 5A with another hex code. 

#5A0000
#005A00
#00005A

Since every hexadecimal has 256 characters, it would be most efficient to use an HTML range input in the UI so users can just slide their way to a color. We will need three separate sliders, one each for red, green, and blue. We will also add a span for the result that will dynamically change colors as we move the sliders.

<input id="red" class="color-slider" type="range" min="0" max="255">
<input id="green" class="color-slider" type="range" min="0" max="255">
<input id="blue" class="color-slider" type="range" min="0" max="255">

<span id="result">Your Color</span>

Now that you’re an expert on RBG and HEX color codes, let’s write some JavaScript. The data we’re receiving is going to range from 0 to 255. We need to convert this to a Hexadecimal, but it is also critical that this number is always two digits in length. To ensure the return value always has two digits, we are going to run a conditional that that checks if the size is less than 2. If so

var rgbToHex = function (rgb) { 
  var hex = Number(rgb).toString(16);
  if (hex.length < 2) {
       hex = "0" + hex;
  }
  return hex;
};

Now you can run the following function to covert any RGB value from 0 to 255 into the proper color hex value.

rgbToHex(123); // returns 7b string
rgbToHex(2); // returns 02 string

Paste this code into the developer console on your browser. These functions will return 7B and 02, respectively.

So far, we only have a hex code for a single color part. Now we need a second function that creates the entire color. This is as simple running our first function of 3 different RGB color values, then combining the output into a single string.

var fullColorHex = function(r,g,b) {   
  var red = rgbToHex(r);
  var green = rgbToHex(g);
  var blue = rgbToHex(b);
  return red+green+blue;
};

Just pass the RGB values into the function and you get a full hex color code in return.

fullColorHex(10, 20, 30); 
// returns color code 0a141e