javascriptcolorshexrgb

RGB to hex and hex to RGB


How to convert colors in RGB format to hex format and vice versa?

For example, convert '#0080C0' to (0, 128, 192).


Solution

  • Note: both versions of rgbToHex expect integer values for r, g and b, so you'll need to do your own rounding if you have non-integer values.

    The following will do to the RGB to hex conversion and add any required zero padding:

    function componentToHex(c) {
      var hex = c.toString(16);
      return hex.length == 1 ? "0" + hex : hex;
    }
    
    function rgbToHex(r, g, b) {
      return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
    }
    
    alert(rgbToHex(0, 51, 255)); // #0033ff

    Converting the other way:

    function hexToRgb(hex) {
      var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
      return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
      } : null;
    }
    
    alert(hexToRgb("#0033ff").g); // "51";

    Finally, an alternative version of rgbToHex(), as discussed in @casablanca's answer and suggested in the comments by @cwolves:

    function rgbToHex(r, g, b) {
      return "#" + (1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1);
    }
    
    alert(rgbToHex(0, 51, 255)); // #0033ff

    Update 3 December 2012

    Here's a version of hexToRgb() that also parses a shorthand hex triplet such as "#03F":

    function hexToRgb(hex) {
      // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
      var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
      hex = hex.replace(shorthandRegex, function(m, r, g, b) {
        return r + r + g + g + b + b;
      });
    
      var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
      return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
      } : null;
    }
    
    alert(hexToRgb("#0033ff").g); // "51";
    alert(hexToRgb("#03f").g); // "51";