Angular JS CSS Filters

darken.js

.filter('darken', function() {
  return function(hex, percentile) {
    if (!hex) return '';

    if (hex.indexOf('#') !== 0) {
      return hex;
    }

    hex = hex.replace('#','');
    var amount = 0;

    r = parseInt(hex.substring(0,2), 16);
    g = parseInt(hex.substring(2,4), 16);
    b = parseInt(hex.substring(4,6), 16);

    percentile = (percentile ? percentile : 0);
    if (percentile > 0) {
      amount = Math.ceil(percentile * 2.5);
    }

    r = r - amount;
    g = g - amount;
    b = b - amount;

    if (r < 0) r = 0;
    if (g < 0) g = 0;
    if (b < 0) b = 0;

    result = 'rgb('+r+','+g+','+b+')';
    return result;
  };
})

hex_to_rgba.js

.filter('rgba', function() {
  return function(hex, opacity) {
    if (!hex) return '';

    if (hex.indexOf('#') !== 0) {
      return hex;
    }

    hex = hex.replace('#','');
    opacity = (opacity ? opacity : 1.0);

    r = parseInt(hex.substring(0,2), 16);
    g = parseInt(hex.substring(2,4), 16);
    b = parseInt(hex.substring(4,6), 16);

    result = 'rgba('+r+','+g+','+b+',' + opacity + ')';
    return result;
  };
})

lighten.js

.filter('lighten', function() {
  return function(hex, percentile) {
    if (!hex) return '';

    if (hex.indexOf('#') !== 0) {
      return hex;
    }

    hex = hex.replace('#','');
    var amount = 0;

    r = parseInt(hex.substring(0,2), 16);
    g = parseInt(hex.substring(2,4), 16);
    b = parseInt(hex.substring(4,6), 16);

    percentile = (percentile ? percentile : 0);
    if (percentile > 0) {
      amount = Math.ceil(percentile * 2.5);
    }

    r = r + amount;
    g = g + amount;
    b = b + amount;

    if (r > 255) r = 255;
    if (g > 255) g = 255;
    if (b > 255) b = 255;

    result = 'rgb('+r+','+g+','+b+')';
    return result;
  };
})