rgbtohex comparison

JavaScript performance comparison

Test case created by Xotic750

Info

Some of the routing given as answerd to rgb2hex on stackoverflow.

http://stackoverflow.com/questions/16245668/javascript-converting-hex-values-automatically

http://stackoverflow.com/questions/1740700/how-to-get-hex-color-value-rather-than-rgb-value

My answer on js fiddle

http://jsfiddle.net/Xotic750/u6LCD/

Be aware, some of the functions do not play well with varied white-space or capitalised input.

Preparation code

<script src="https://raw.github.com/matthewbj/Colors/master/colors.js">
</script>
<script>
  function rgbToHex1(rgb) {
    var re = /^rgb/i;
    var bits = rgb.match(/\d+/g);

    function z(n) {
      return (n.length == 1 ? '0' : '') + n;
    }

    if (re.test(rgb) && bits.length == 3) {
      return '#' + z((+bits[0]).toString(16)) + z((+bits[1]).toString(16)) + z((+bits[2]).toString(16));
    }
    return rgb;
  }
</script>
<script>
  var hexDigits = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f");

  //Function to convert hex format to a rgb color

  function rgb2hex1(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
  }

  function hex(x) {
    return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
  }
</script>
<script>
  function rgb2hex2(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

    function hex(x) {
      return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
  }
</script>
<script>
var rgbToHex2 = (function () {
    var rx = /^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i;

    function pad(num) {
        if (num.length === 1) {
            num = "0" + num;
        }
       
        return num;
    }

    return function (rgb, uppercase) {
        var rxArray = rgb.match(rx),
            hex;

        if (rxArray !== null) {
            hex = pad(parseInt(rxArray[1], 10).toString(16)) + pad(parseInt(rxArray[2], 10).toString(16)) + pad(parseInt(rxArray[3], 10).toString(16));
           
            if (uppercase === true) {
                hex = hex.toUpperCase();
            }
           
            return hex;
        }

        return;
    };
}());
</script>
<script>
Benchmark.prototype.setup = function() {
    var rgb = "rgb(10, 128, 255)";
};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Colours library
// you have to do your own string to array conversion
var r = rgb.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);

if (r === null) {
  r = [0, 0, 0];
} else {
  r = r.slice(1, 4);
}

Colors.rgb2hex(r[0], r[1], r[2]);
pending…
Accepted 1
rgbToHex1(rgb);
pending…
My answer
rgbToHex2(rgb);
pending…
Accepted 2
rgb2hex1(rgb);
pending…
Other popular
rgb2hex2(rgb);
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments

Add a comment