index.html

<div class="container">
    <div class="row">
      <div class="span3" id="visual">
            <div class="colorVisual"></div>
            <div class="colorVisual"></div>
      </div>        
<div class="span7">
      <h3>Testing incrementable by <a href="twitter.com/leaVerou">@LeaVerou</a></h3>
  <blockquote>
    If you work with code where you need the user to be able to change a color value in a Firebug way, you will love the "<a href="http://raw.github.com/LeaVerou/incrementable">incrementable</a>" piece of code by <a href="twitter.com/leaVerou">@LeaVerou</a>.<br />
    Use Arrows + modifies to change the values below. Modifiers:<br />
    <code>CTRL +  up or down arrow</code> : 0.1 +/-<br />
    <code>up or down arrow</code> : 1 +/-<br />
    <code>SHIFT +  up or down arrow</code> : 10 +/-<br />
  </blockquote>
  <ul>
    <li>Background patterns by  <a href="twitter.com/leaVerou">@LeaVerou</a>: <a href="http://lea.verou.me/css3patterns">css3patterns</a></li>
  <li>Bootstrap theme: <a href="http://bootswatch.com/cyborg/bootstrap.min.css">cyborg</a>
  </ul></div>
    </div>
    <div class="row">
      <div class="input-prepend span3" title="red, green, blue">
      <span class="add-on">RGB</span><input class="span2 colorCode" id="colorCodeRGB" size="16" type="text" value="rgb(200,111,222)">
    </div>
    <div class="input-prepend span3" title="Red, green, blue + alpha">
      <span class="add-on">RGBA</span><input class="span2 colorCode" id="colorCodeRGBA" size="16" type="text" value="rgba(110,70,210,.5)">
    </div>
      <div class="input-prepend span3" title="Hue, Saturation, Luminance + alpha">
      <span class="add-on">HSLA</span><input class="span2 colorCode" id="colorCodeHSLA" size="16" type="text" value="hsla(0,100%,50%,0.2)">
    </div>
      <button class="btn btn-primary" id="save">Save</button>
    </div>
      <div class="row">
        <h4>Saved</h4>
        <pre id="saved"></pre>
      </div>
  </div>
  

script.js

new Incrementable(document.getElementById('colorCodeRGB'));
new Incrementable(document.getElementById('colorCodeRGBA'));
new Incrementable(document.getElementById('colorCodeHSLA'));
var $colorCode, colorCode, $colorVisualFirst, $colorVisualLast, $saved, savedTemplate;
jQuery(function() {
  savedTemplate = '<div class="saved"><div class="color" style="background-color: {{color}}"></div><code>.col{{id}} {background-color: {{color}}; }</code></div>';
    $saved = jQuery('#saved');
    $colorCode = jQuery('.colorCode');
    $colorVisualFirst = jQuery('.colorVisual:first');
    $colorVisualLast = jQuery('.colorVisual:last');

    $colorCode.on('keyup change', function(e) {
        colorCode = jQuery(this).val();
        $colorVisualFirst.css('background-color', colorCode).attr('title', colorCode).data('color', colorCode);
    });

    jQuery('#save').on('click', function(e) {
        oldColorCode = $colorVisualFirst.data('color');
        $colorVisualLast.css('background-color', oldColorCode).attr('title', 'last color: ' + oldColorCode);
        var id = new Date() - new Date(1964, 8, 23);
        var html = savedTemplate.replace(/{{id}}/ig , id);
        html = html.replace(/{{color}}/ig , oldColorCode);
        var $temp = jQuery(html);
        $saved.prepend(html);
    });
    $colorCode.trigger('click');
})

style.css

.colorVisual {
  height: 7.5em;
  width: 15em;
  border: solid 5px white;
  border-radius: 1em;
  margin-bottom: .5em;

}
#visual {
  border-radius: 1em;
  padding: 2em;
background: 
linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -50px 0,
linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0,
linear-gradient(315deg, #ECEDDC 25%, transparent 25%),
linear-gradient(45deg, #ECEDDC 25%, transparent 25%);  
background-size: 100px 100px;
background-color: #EC173A;
    margin-bottom: .5em;
}
#saved {height: 10em; overflow: scroll;}
#saved .saved {clear: both; height: 2.5em;}
#saved .color {border-radius: .1em; margin-right: .5em; height: 2em; width: 2em; float:left;}
#saved pre {padding-top: .2em;}