RGB to HEX (and vice versa) converter Please review the code.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;RGB to HEX (and vice versa) converter&lt;/title&gt;
    &lt;link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.0/normalize.min.css"&gt;
    &lt;style&gt;
      body{
        color: #222;
        font-family: "Segoe UI", sans-serif;
      }
      #main {
        margin: 10% auto;
        max-width: 300px;
      }
      input[type="text"] {
        padding: 10px;
        width: 100%;
        outline: 0;
        border: 0;
        border-bottom: 1px dashed;
        background: inherit;
        text-shadow: 0 1px 0 #f0f0f0;
        font-size: 18px;
      }
      ::-webkit-input-placeholder { color: #a9a9a9; }
      :-moz-placeholder { color: #a9a9a9; }
      ::-moz-placeholder { color: #a9a9a9; }
      :-ms-input-placeholder { color: #a9a9a9;}
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="main"&gt;
      &lt;p&gt;&lt;input id="rgb" type="text" placeholder="rgb(255, 255, 255)"&gt;&lt;/p&gt;
      &lt;p&gt;&lt;input id="hex" type="text" placeholder="#ffffff"&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;script&gt;
      (function() {
        "use strict";

        var inputRgb = document.getElementById("rgb"),
          inputHex = document.getElementById("hex"),
          converter = {
            // help: http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb

            toHex: function() {
              function componentToHex(c) {
                var hex = parseInt(c).toString(16);
                return hex.length == 1 ? "0" + hex : hex;
              }
              var rgb = /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/.exec(inputRgb.value);
              inputHex.value = rgb ? "#" + componentToHex(rgb[1]) + componentToHex(rgb[2]) + componentToHex(rgb[3]) : "";
              converter.changeBgColor(inputRgb.value);
            },

            toRgb: function() {
              // expand shorthand form (e.g. "03f") to full form (e.g. "0033ff")
              var hex = inputHex.value.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, function(m, r, g, b) {
                return r + r + g + g + b + b;
              }),
                result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
              inputRgb.value = result ? "rgb(" + [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)].join(", ") + ")" : "";
              converter.changeBgColor(inputHex.value);
            },

            changeBgColor: function(color) {
              document.body.style.backgroundColor = color;
            }
          };

        inputRgb.addEventListener("input", converter.toHex, false);
        inputHex.addEventListener("input", converter.toRgb, false);

      }());
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;


Jsbin - http://jsbin.com/fokayomo/1/
Two things jump out at me.


Decouple from the HTML elements.

var inputRgb = document.getElementById("rgb"),
    inputHex = document.getElementById("hex"),


I would do something like:

function RGB2Hex (inputRgb, inputHex){
    var converter = {
        toHex: ...
        toRGB: ...
    };

    inputRgb.addEventListener("input", converter.toHex, false);
    inputHex.addEventListener("input", converter.toRgb, false);

    return converter;
}

// Usage:
var mainHexConversion = new RGB2Hex(document.getElementById("rgb"), document.getElementById("hex"));
var secondHexConversion = new RGB2Hex(document.getElementById("mini-rgb"), document.getElementById("mini-hex"));

keep the background colour changing code outside the converter.

function RGB2Hex (inputRgb, inputHex, onColourChange)
{
   var converter = {
        toHex: ...
        toRGB: ...
        colourChanged: function(colourValue){
            if(typeof onColourChanged == "function")
            {
                onColourChange(colourValue);
            }
        }
    };
}

// Usage: 
var mainHexConversion = new RGB2Hex(
    document.getElementById("rgb")
    , document.getElementById("hex")
    , function(color)
    {
      document.body.style.backgroundColor = color;
    }
);