Converting HEX and RGB Color Codes

HEX colors in HTML begin with a "#" character and are followed with either 3 or 6 hexadecimal digits. Hexadecimal digits range from 0 to F. Hexadecimal digits are case-insensitive. Example: #32Fe9A

RGB colors in HTML are specified with the rgb() or rgba() function. The function requires 3 numbers that range from 0 to 255, separated with commas. Example: rgb(50,254,154)

This article contains source code for a converter. You'll find it further below.

Here is a live implementation. Type a color in the left field and tap the "➜" button. Don't forget to bookmark if you think you may be using this page later.

The input field on the left may contain either a HEX color code or a RGB color code.

When you tap the button in the middle, the input field on the right will contain the converted code.

The converted color code may be copied from the right input field. When the right input field is tapped on, the content is selected and ready to copy.

HEX color code may be specified in the left input field with or without the leading "#" character. An example is #32FE9A

RGB color code is specified in the left input field with 3 numbers separated with commas. Optionally, the code may be specified as a full rgb() or rgba() color code. Examples are rgb(50,254,154) and rgba(50,254,154,.5) (rgba() for transparencies)

Conversions need to be done once in a while. As an example, you may prefer to use the HEX color code and have only the RGB available. This converter can do the conversion for you.

As another example, when you have a HEX color code and want to specify a degree of transparency, the HEX color needs to be converted so it can be used as a rgba() color. (Other conversions are possible, but the HEX color by itself can not be used for transparency.) A degree of transparency can be applied to text or background colors with a rgba() color specification.

Here is the source code for the converter. No modifications are required. Copy the code and paste it into your web page source code where you want the converter to publish.

<input 
   type="text" 
   id="conv_input" 
   style="width:10.6em; font-size:1rem; font-family:monospace;"> 
<input 
   onclick="ConvertNumber()" 
   type="button" 
   value="&#10140;"> 
<input 
   readonly="readonly" 
   onclick="select()" 
   type="text" 
   id="conv_response" 
   style="width:10.6em; font-size:1rem; font-family:monospace;">

<script style="text/javascript">
function dec2hex(d)
{
   d = parseInt(d);
   var h = d.toString(16);
   if( h.length < 2 ) { h = "0" + h; }
   return h.toUpperCase();
}
function hex2dec(h)
{
   if( h.length>1 && h.match(/^0/) ) { h = h.substr(1); }
   d = parseInt(h,16);
   return String(d);
}
function ConvertNumber()
{
   var response = document.getElementById("conv_response");
   n = document.getElementById("conv_input").value;
   n = n.replace(/rgba?/i,"");
   n = n.replace(/[^0-9a-f,]/ig,"");
   if( ! n.length ) { response.value=""; return; }
   if( n.match(/\,/) ) // rgb
   {
      var ta = n.split(/\,+/);
      if(ta.length!=3) { response.value="error"; return; }
      isok = true;
      for( var i=0; i<3; i++ )
      {
         if( ta[i]<0 || ta[i]>255 ) { isok = false; }
      }
      if( ! isok ) { response.value="error"; return; }
      var sta = new Array();
      for( var i=0; i<3; i++ ) { sta.push(dec2hex(ta[i])); }
      response.value = "#" + sta.join("");
      return;
   }
   var s = new String();
   if(n.length==3)
   {
      s = "";
      for( var i=0; i<3; i++ ) { s+=n.substr(i,1)+n.substr(i,1); }
      n = s;
   }
   s = "";
   if( n.length != 6 ) { response.value="error"; return; }
   var sta = new Array();
   for( var i=0; i<3; i++ )
   {
      s = n.substr((i*2),2);
      sta.push(hex2dec(s));
   }
   response.value = "rgb(" + sta.join(",") + ")";
}
</script>

The converter is JavaScript so it will work online or offline. Once loaded into a browser, no additional server resources are required.

The converter is speedy. And it is forgiving with your format. The "#" character is optional — just specify 3 or 6 hexadecimal characters. The rgb() or rgba() parts of color coding are also optional — you can get away with just specifying 3 numbers separated with commas.

(This content first appeared in Possibilities newsletter.)

Will Bontrager