Colour Converter

The ultimate colour converter. Convert between 5 different colour models! CMYK, RGB, RGBA, HEX and HSL!

by spedwards

HTML

<form id="colours">
  <fieldset>
    <label id="col">
      Color: 
      <input type="text" placeholder="#FFFFFF or rgb(0,0,0)" />
    </label>
  </fieldset>
  <fieldset id="type">
    <h3>Input Type</h3>
    <label>
      CYMK: 
      <input type="radio" id="cymk" name="coltype" value="cmyk" />
    </label><label>
      RGB: 
      <input type="radio" id="rgb" name="coltype" value="rgb" />
    </label><label>
      RGBA: 
      <input type="radio" id="rgba" name="coltype" value="rgba" />
    </label><label>
      HEX: 
      <input type="radio" id="hex" name="coltype" value="hex" />
    </label><label>
      HSL: 
      <input type="radio" id="hsl" name="coltype" value="hsl" />
    </label><label>
      Named:
      <input type="radio" id="websafe" name="coltype" value="websafe" />
    </label>
  </fieldset>
  <fieldset>
    <input type="submit" /><input type="reset" />
  </fieldset>
  <fieldset>
    <h3>Output:</h3>
    <div id="output">
      
    </div>
  </fieldset>
</form>

CSS

label {
  display:block;
}

#type label {
  width:90px;
}

input[type='radio'] {
  float:right;
}

input[type=submit],input[type=reset] {
  background: #e3e3e3;
  border: 1px solid #bbb;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
  -moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
  box-shadow: inset 0 0 1px 1px #f6f6f6;
  color: #333;
  font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
  line-height: 1;
  padding: 8px 0 9px;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
  width: 150px;
  margin-right:5px;}
input[type=submit]:hover,input[type=reset]:hover {
  background: #d9d9d9;
  -webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
  -moz-box-shadow: inset 0 0 1px 1px #eaeaea;
  box-shadow: inset 0 0 1px 1px #eaeaea;
  color: #222;
  cursor: pointer; }
input[type=submit]:active,input[type=reset]:active {
  background: #d0d0d0;
  -webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
  -moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
  box-shadow: inset 0 0 1px 1px #e3e3e3;
  color: #000; }

JavaScript

String.prototype.splice = function( idx, rem, s ) {
    return (this.slice(0,idx) + s + this.slice(idx + Math.abs(rem)));
};

$('input[type=submit]').on('click',function(){
  var colour = $('#col input[type=text]').val(),
      type = $('input:radio:checked').val();
  
  if (col === undefined) {
    // Undefined type
  } else {
    $('div#output').html( convertColour(type, colour) );
  }
});

function convertColour(colourType,col) {
  var hex, c, rgb, rgba, cmyk, hsl, web, colours = {"aliceblue":"#f0f8ff","antiquewhite":"#faebd7","aqua":"#00ffff","aquamarine":"#7fffd4","azure":"#f0ffff",
    "beige":"#f5f5dc","bisque":"#ffe4c4","black":"#000000","blanchedalmond":"#ffebcd","blue":"#0000ff","blueviolet":"#8a2be2","brown":"#a52a2a","burlywood":"#deb887",
    "cadetblue":"#5f9ea0","chartreuse":"#7fff00","chocolate":"#d2691e","coral":"#ff7f50","cornflowerblue":"#6495ed","cornsilk":"#fff8dc","crimson":"#dc143c","cyan":"#00ffff",
    "darkblue":"#00008b","darkcyan":"#008b8b","darkgoldenrod":"#b8860b","darkgray":"#a9a9a9","darkgreen":"#006400","darkkhaki":"#bdb76b","darkmagenta":"#8b008b","darkolivegreen":"#556b2f",
    "darkorange":"#ff8c00","darkorchid":"#9932cc","darkred":"#8b0000","darksalmon":"#e9967a","darkseagreen":"#8fbc8f","darkslateblue":"#483d8b","darkslategray":"#2f4f4f","darkturquoise":"#00ced1",
    "darkviolet":"#9400d3","deeppink":"#ff1493","deepskyblue":"#00bfff","dimgray":"#696969","dodgerblue":"#1e90ff",
    "firebrick":"#b22222","floralwhite":"#fffaf0","forestgreen":"#228b22","fuchsia":"#ff00ff",
    "gainsboro":"#dcdcdc","ghostwhite":"#f8f8ff","gold":"#ffd700","goldenrod":"#daa520","gray":"#808080","green":"#008000","greenyellow":"#adff2f",
    "honeydew":"#f0fff0","hotpink":"#ff69b4",
    "indianred ":"#cd5c5c","indigo ":"#4b0082","ivory":"#fffff0","khaki":"#f0e68c",
   ...