Colour blender

            
              console.clear();

var col = {
  /** @function _stripHash
      @private
      removes any leading hash tag (#) from a string
      @param {string} hex - colour
      @returns {string}
  */
  _stripHash: function(hex) {
    return (hex.substr(0, 1) === '#') ? hex.substr(1) : hex;
  },
  
  /** @function _containsValidHexChars
      @private
      checks that a string contains only characters
      valid for a hexadecimal colour code (excluding #)
      @param {string} hex - candidate for testing as valid hex colour
      @returns {bool}
  */
  _containsValidHexChars: function(hex) {
    return (/^[0-9a-f]+$/i.test(hex));
  },
  
  /** @function _padWith0
      @private
      adds leading 0s if a string is shorter than 6 characters
      (it assumes a number has originally been entered with leading 0s
      that have been stripped away)
      @param {string} hex
      @returns {string}
  */
  _padWith0: function(hex) {
    return '000000'.substr(0, 6 - hex.length) + hex;
  },
  
  /** @function _expandHex
      @private
      expands a shorthand hex colour code (a03)
      to a longhand (full-length) hex colour code (aa0033)
      (i could have used a loop but found it pointless for six chars)
      @param {string} hex - possible shorthand
      @returns {string} longhand
  */
  _expandHex: function(hex) {
    if (hex.length === 3) {
      hex.split('');

      hex = [
        hex[0], hex[0],
        hex[1], hex[1],
        hex[2], hex[2]
      ].join('');
    }

    return hex;
  },
  
  /** @function _validateHex
      @private
      makes sure that a usable hex colur code is being used, by
       - stripping leading #
       - checks for valid characters only
       - expanding shorthand codes
       - pads short numbers with leading 0s
       - removes excess characters
      if tests fails it returns hex code for black
      @param {string} candidate - the string to be validates
      @returns {string} valid hex code or '#000000'
      @requires col._stripHash, col._containsValidHexChars, col._expandHex, col._padWith0
  */
  _validateHex: function(candidate) {
    var hex = col._stripHash(candidate.toString());
    
    if (col._containsValidHexChars(hex)) {
      if (hex.length === 3) {
        hex = col._expandHex(hex);
      } else if (hex.length < 6) {
        hex = col._padWith0(hex);
      } else if (hex.length > 6) {
        hex = hex.substr(0, 6);
      }
      
      return hex;
    }
    
    return '000000';
  },
  
  /** @function _decimalToHex
      @private
      converts a decimal colour code (0-255) to hex code (00-ff)
      @param {string || number} decimal
      @returns {string} hex
  */
  _decimalToHex: function(decimal) {
    return decimal.toString(16);
  },

  /** @function _hexToDecimal
      @private
      converts a hex code (00-ff) to decimal colour code (0-255)
      @param {string} hex
      @returns {number} decimal
  */
  _hexToDecimal: function(hex) {
    return parseInt(hex, 16);
  },
  
  /** @function mix
      @public
      mixes two colours based on the weight specified
      @author based on https://gist.github.com/jedfoster/7939513
      @param {string} color1 - the first hex colour to be mixed
      @param {string} color2 - the second hex colour to be mixed
      @param {number} weight - the weight of colour1 used in the mix
      @returns {string} hex code of colour mix
      @requires col._validateHex, col._hexToDecimal, col._decimalToHex
      
      @example
        // returns '#7f007f'
        col.mix('#00f', '#f00')
        
        // returns '#69006f'
        col.mix('#d300de', '#000', 75)
  */
  mix: function(color1, color2, weight) {
    // make sure the colors are 6 digit hex colors without leading #
    color1 = col._validateHex(color1);
    color2 = col._validateHex(color2);
    
    // if weight hasn't been set (undefined)
    // or outside allowed range (0-100)
    // well make it 50 (an equal mix of both colors)
    weight = (typeof(weight) === 'undefined' || parseInt(weight) < 0 || parseInt(weight) > 100) ? 50 : weight;
    
    // holding variable for new colour
    var newColor = '';
    
    // loop through hex
    // we want to extract each of the colour triplets (rr, gg, bb)
    // so we use a step of 2
    for (var i = 0; i < 6; i += 2) {
      // retrieve individual color triplet
      // and convert to decimal
      var color1triplet = col._hexToDecimal(color1.substr(i, 2));
      var color2triplet = col._hexToDecimal(color2.substr(i, 2));
      
      // blend colour triplets
      var calculatedTriplet = Math.floor(color1triplet + ((color2triplet - color1triplet) * (weight / 100)));
      
      // convert decimal back to hex
      calculatedTriplet = col._decimalToHex(calculatedTriplet);
      
      // if only one digit prepend with 0
      // and add to newColor variable
      newColor += (calculatedTriplet.length === 1) ? '0' + calculatedTriplet : calculatedTriplet;
    }
    return '#' + newColor;
  },
  
  /** @function blendRange
      @public
      creates an array of colours from two colours with a requested number of midpoints
      the array contains the original two colours
      @param {string} color1 - the first hex colour to be mixed
      @param {string} color2 - the second hex colour to be mixed
      @param {number} midpoints - number of intermediate colours to be created
      @returns {array} intermediate colours' hex codes bookended by the original colours
      @requires col._validateHex, col.mix
  */
  blendRange: function(color1, color2, midpoints) {
    // make sure the colors are 6 digit hex colors without leading #
    color1 = col._validateHex(color1);
    color2 = col._validateHex(color2);
    
    // make sure that the number of midpoints is bigger than 0
    // and add 1 because we want to include the original colours
    midpoints = (parseInt(midpoints) >= 1) ? parseInt(midpoints) + 1 : 2
    
    // create array for the blended colours
    var blendArray = [];
    
    // loop through number of midpoints
    for (var i = 0, len = midpoints; i < (len + 1); i++) {
      
      // mix the two colours with a weight calculated on the position in the blend
      // and add to blendArray
      blendArray.push(col.mix(color1, color2, (100/len) * i));
    }
    
    // ... and ship back
    return blendArray;
  }
};

// --------------------------------------
// ui stuff:

document.querySelector('#color-blend-form').addEventListener('change', function() {
  // get references
  var color1 = document.querySelector('#color1').value;
  var color2 = document.querySelector('#color2').value;
  var color1span = document.querySelector('#color1-span');
  var color2span = document.querySelector('#color2-span');
  var midpoints = parseInt(document.querySelector('#midpoints').value);
  var output = document.querySelector('#output');
  
  // stuff required for adding to clipboard
  var hiddenInput = document.querySelector('#hidden');
  
  // write the hex code of the selected colours in the spans
  // below the colour inputs 
  color1span.textContent = color1;
  color2span.textContent = color2;
  
  // create the array of mixed colours
  var mix = col.blendRange(color1, color2, midpoints);
  
  // nastily clear the output area
  output.innerHTML = '';
  
  // loop through the array of mixed colours
  for (var i = 0, len = mix.length; i < len; i++) {
    
    // create a new div for each colour
    // this contains
    //  - a span to show the colour
    //  - the hex code of the colour
    var colDiv = document.createElement('div');
    colDiv.innerHTML = '<span style="background-color: ' + mix[i] + ';"><\/span><p>' + mix[i] + '<\/p>';
    colDiv.classList.add('midpoint');
    
    // output it
    output.appendChild(colDiv);
  }
  
  // remove placeholder class to reveal button
  output.classList.remove('placeholder-text');
  
  // add it to our hidden input so we can copy it
  hidden.value = mix;
}, false);

document.querySelector('#copy-array').addEventListener('click', function() {
  // get hidden input value
  document.querySelector('#hidden').select();
  
  try {
    var success = document.execCommand('copy');

    alert(success ? 'Colours copied as array.' : 'Unable to copy.');
  } catch (err) {
    alert('Unable to copy.');
  }
}, false);