RGB to HEX (and vice versa) converter

Please review the code.

```



RGB to HEX (and vice versa) converter


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;}








(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(", ") + ")" : "";

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;
    }
);

StackExchange Code Review Q#43670, answer score: 7