Function shadeIt(hex,percent) that recieves a hex string (ex: "#ffffff") and a percentage (ex: "0.2") and return a hex string of the color shaded by that percentage. Two external libraries were included and modified https://gist.github.com/mjackson/5311256 and w3color.js ver.1.18 by w3schools.com

shadeIt.min.js

function shadeIt(e,t){(s=rgbToHsv((s=new w3color(e,"")).red,s.green,s.blue)).v=s.v-t;var s=hsvToRgb(s);return(s=new w3color(s)).toHexString()}function w3SetColorsByAttribute(){var e,t,s;for(e=document.getElementsByTagName("*"),t=0;t<e.length;t++)(s=e[t].getAttribute("data-w3-color"))&&(e[t].style.backgroundColor=w3color(s).toRgbString())}function rgbToHsv(e,t,s){e/=255,t/=255,s/=255;var r,a,n=Math.max(e,t,s),i=Math.min(e,t,s),h=n,l=n-i;if(a=0==n?0:l/n,n==i)r=0;else{switch(n){case e:r=(t-s)/l+(t<s?6:0);break;case t:r=(s-e)/l+2;break;case s:r=(e-t)/l+4}r/=6}return{h:r,s:a,v:h}}function hsvToRgb(e){var t,s,r,a=e.h,n=e.s,i=e.v,h=Math.floor(6*a),l=6*a-h,o=i*(1-n),u=i*(1-l*n),f=i*(1-(1-l)*n);switch(h%6){case 0:t=i,s=f,r=o;break;case 1:t=u,s=i,r=o;break;case 2:t=o,s=i,r=f;break;case 3:t=o,s=u,r=i;break;case 4:t=f,s=o,r=i;break;case 5:t=i,s=o,r=u}return"rgb("+255*t+","+255*s+","+255*r+")"}!function(){function e(a,i){return this instanceof e?"object"==typeof a?a:(this.attachValues(function(e){var a,i,h,u,f,c,b,d,g,m,y,k=[],w=[],p=[];e=l(e.toLowerCase()),a=e.substr(0,1).toUpperCase(),i=e.substr(1),d=1,"R"!=a&&"Y"!=a&&"G"!=a&&"C"!=a&&"B"!=a&&"M"!=a&&"W"!=a||isNaN(i)||6==e.length&&-1==e.indexOf(",")||(e="ncol("+e+")");3==e.length||6==e.length||isNaN(e)||(e="ncol("+e+")");e.indexOf(",")>0&&-1==e.indexOf("(")&&(e="ncol("+e+")");if("rgb"==e.substr(0,3)||"hsl"==e.substr(0,3)||"hwb"==e.substr(0,3)||"ncol"==e.substr(0,4)||"cmyk"==e.substr(0,4)){if("ncol"==e.substr(0,4)?(4==e.split(",").length&&-1==e.indexOf("ncola")&&(e=e.replace("ncol","ncola")),h="ncol",e=e.substr(4)):"cmyk"==e.substr(0,4)?(h="cmyk",e=e.substr(4)):(h=e.substr(0,3),e=e.substr(3)),u=3,c=!1,"a"==e.substr(0,1).toLowerCase()?(u=4,c=!0,e=e.substr(1)):"cmyk"==h&&(u=4,5==e.split(",").length&&(u=5,c=!0)),e=(e=e.replace("(","")).replace(")",""),k=e.split(","),"rgb"==h){if(k.length!=u)return{red:0,green:0,blue:0,hue:0,sat:0,lightness:0,whiteness:0,blackness:0,cyan:0,magenta:0,yellow:0,black:0,ncol:"R",opacity:1,valid:!1};for(f=0;f<u;f++){if(""!=k[f]&&" "!=k[f]||(k[f]="0"),k[f].indexOf("%")>-1&&(k[f]=k[f].replace("%",""),k[f]=Number(k[f]/100),f<3&&(k[f]=Math.round(255*k[f]))),isNaN(k[f]))return{red:0,green:0,blue:0,hue:0,sat:0,lightness:0,whiteness:0,blackness:0,cyan:0,magenta:0,yellow:0,black:0,ncol:"R",opacity:1,valid:!1};parseInt(k[f])>255&&(k[f]=255),f<3&&(k[f]=parseInt(k[f])),3==f&&Number(k[f])>1&&(k[f]=1)}y={r:k[0],g:k[1],b:k[2]},1==c&&(d=Number(k[3]))}if("hsl"==h||"hwb"==h||"ncol"==h){for(;k.length<u;)k.push("0");for("hsl"!=h&&"hwb"!=h||parseInt(k[0])>=360&&(k[0]=0),f=1;f<u;f++){if(k[f].indexOf("%")>-1){if(k[f]=k[f].replace("%",""),k[f]=Number(k[f]),isNaN(k[f]))return{red:0,green:0,blue:0,hue:0,sat:0,lightness:0,whiteness:0,blackness:0,cyan:0,magenta:0,yellow:0,black:0,ncol:"R",opacity:1,valid:!1};k[f]=k[f]/100}else k[f]=Number(k[f]);Number(k[f])>1&&(k[f]=1),Number(k[f])<0&&(k[f]=0)}"hsl"==h&&(y=r(k[0],k[1],k[2]),g=Number(k[0]),m=Number(k[1])),"hwb"==h&&(y=n(k[0],k[1],k[2])),"ncol"==h&&(y=function(e,t,s){var r,a,i;if(i=e,isNaN(e.substr(0,1))){if(r=e.substr(0,1).toUpperCase(),""==(a=e.substr(1))&&(a=0),a=Number(a),isNaN(a))return!1;"R"==r&&(i=0+.6*a),"Y"==r&&(i=60+.6*a),"G"==r&&(i=120+.6*a),"C"==r&&(i=180+.6*a),"B"==r&&(i=240+.6*a),"M"==r&&(i=300+.6*a),"W"==r&&(i=0,t=1-a/100,s=a/100)}return n(i,t,s)}(k[0],k[1],k[2])),1==c&&(d=Number(k[3]))}if("cmyk"==h){for(;k.length<u;)k.push("0");for(f=0;f<u;f++){if(k[f].indexOf("%")>-1){if(k[f]=k[f].replace("%",""),k[f]=Number(k[f]),isNaN(k[f]))return{red:0,green:0,blue:0,hue:0,sat:0,lightness:0,whiteness:0,blackness:0,cyan:0,magenta:0,yellow:0,black:0,ncol:"R",opacity:1,valid:!1};k[f]=k[f]/100}else k[f]=Number(k[f]);Number(k[f])>1&&(k[f]=1),Number(k[f])<0&&(k[f]=0)}y=function(e,t,s,r){var a,n,i;return a=255-255*Math.min(1,e*(1-r)+r),n=255-255*Math.min(1,t*(1-r)+r),i=255-255*Math.min(1,s*(1-r)+r),{r:a,g:n,b:i}}(k[0],k[1],k[2],k[3]),1==c&&(d=Number(k[4]))}}else if("ncs"==e.substr(0,3))y=function(e){var t,s,r,a,n,i,h,o,u,f,c,b,d,g,m,y,k;-1==(e=(e=(e=(e=(e=l(e).toUpperCase()).replace("(","")).replace(")","")).replace("NCS","NCS ")).replace(/  /g," ")).indexOf("NCS")&&(e="NCS "+e);if(null===(e=e.match(/^(?:NCS|NCS\sS)\s(\d{2})(\d{2})-(N|[A-Z])(\d{2})?([A-Z])?$/)))return!1;if(t=parseInt(e[1],10),s=parseInt(e[2],10),"N"!=(r=e[3])&&"Y"!=r&&"R"!=r&&"B"!=r&&"G"!=r)return!1;a=parseInt(e[4],10)||0,"N"!==r?(n=1.05*t-5.25,i=s,"Y"===r&&a<=60?u=1:"Y"===r&&a>60||"R"===r&&a<=80?(h="Y"===r?a-60:a+40,u=(Math.sqrt(14884-Math.pow(h,2))-22)/100):"R"===r&&a>80||"B"===r?u=0:"G"===r&&(h=a-170,u=(Math.sqrt(33800-Math.pow(h,2))-70)/100),"Y"===r&&a<=80?o=0:"Y"===r&&a>80||"R"===r&&a<=60?(h="Y"===r?a-80+20.5:a+20+20.5,o=(104-Math.sqrt(11236-Math.pow(h,2)))/100):"R"===r&&a>60||"B"===r&&a<=80?(h="R"===r?a-60-60:a+40-60,o=(Math.sqrt(1e4-Math.pow(h,2))-10)/100):"B"===r&&a>80||"G"===r&&a<=40?(h="B"===r?a-80-131:a+20-131,o=(122-Math.sqrt(19881-Math.pow(h,2)))/100):"G"===r&&a>40&&(o=0),"Y"===r?green1=(85-.85*a)/100:"R"===r&&a<=60?green1=0:"R"===r&&a>60?(h=a-60+35,green1=(67.5-Math.sqrt(5776-Math.pow(h,2)))/100):"B"===r&&a<=60?(h=1*a-68.5,green1=(6.5+Math.sqrt(7044.5-Math.pow(h,2)))/100):"B"===r&&a>60||"G"===r&&a<=60?green1=.9:"G"===r&&a>60&&(h=a-60,green1=(90-1/8*h)/100),h=(u+green1+o)/3,f=(h-u)*(100-i)/100+u,c=(h-green1)*(100-i)/100+green1,b=(h-o)*(100-i)/100+o,d=1/(f>c&&f>b?f:c>f&&c>b?c:b>f&&b>c?b:(f+c+b)/3),m=parseInt(f*d*(100-n)/100*255,10),y=parseInt(c*d*(100-n)/100*255,10),k=parseInt(b*d*(100-n)/100*255,10),m>255&&(m=255),y>255&&(y=255),k>255&&(k=255),m<0&&(m=0),y<0&&(y=0),k<0&&(k=0)):((g=parseInt(255*(1-t/100),10))>255&&(g=255),g<0&&(g=0),m=g,y=g,k=g);return{r:m,g:y,b:k}}(e);else{for(b=!1,w=s("names"),f=0;f<w.length;f++)if(e.toLowerCase()==w[f].toLowerCase()){p=s("hexs"),b=!0,y={r:parseInt(p[f].substr(0,2),16),g:parseInt(p[f].substr(2,2),16),b:parseInt(p[f].substr(4,2),16)};break}if(0==b){for(3==(e=e.replace("#","")).length&&(e=e.substr(0,1)+e.substr(0,1)+e.substr(1,1)+e.substr(1,1)+e.substr(2,1)+e.substr(2,1)),f=0;f<e.length;f++)if(!o(e.substr(f,1)))return{red:0,green:0,blue:0,hue:0,sat:0,lightness:0,whiteness:0,blackness:0,cyan:0,magenta:0,yellow:0,black:0,ncol:"R",opacity:1,valid:!1};for(k[0]=parseInt(e.substr(0,2),16),k[1]=parseInt(e.substr(2,2),16),k[2]=parseInt(e.substr(4,2),16),f=0;f<3;f++)if(isNaN(k[f]))return{red:0,green:0,blue:0,hue:0,sat:0,lightness:0,whiteness:0,blackness:0,cyan:0,magenta:0,yellow:0,black:0,ncol:"R",opacity:1,valid:!1};y={r:k[0],g:k[1],b:k[2]}}}return t(y,d,g,m)}(a)),void(i&&(i.style.backgroundColor=this.toRgbString()))):new e(a,i)}function t(e,t,s,r){var a,n,i,h,l,o,u,f;return e?(null===t&&(t=1),a=function(e,t,s){var r,a,n,i,h,l,o,u=[];for(u[0]=e/255,u[1]=t/255,u[2]=s/255,r=u[0],a=u[0],l=0,n=0;n<u.length-1;n++)u[n+1]<=r&&(r=u[n+1]),u[n+1]>=a&&(a=u[n+1],l=n+1);0==l&&(o=(u[1]-u[2])/(a-r));1==l&&(o=2+(u[2]-u[0])/(a-r));2==l&&(o=4+(u[0]-u[1])/(a-r));isNaN(o)&&(o=0);(o*=60)<0&&(o+=360);i=(r+a)/2,h=r==a?0:i<.5?(a-r)/(a+r):(a-r)/(2-a-r);return{h:o,s:h=h,l:i}}(e.r,e.g,e.b),n=function(e,t,s){var r,a,n;e/=255,t/=255,s/=255,max=Math.max(e,t,s),min=Math.min(e,t,s),chroma=max-min,r=0==chroma?0:e==max?(t-s)/chroma%6*360:t==max?((s-e)/chroma+2)%6*360:((e-t)/chroma+4)%6*360;return a=min,n=1-max,{h:r,w:a,b:n}}(e.r,e.g,e.b),i=function(e,t,s){var r,a,n,i;e/=255,t/=255,s/=255,max=Math.max(e,t,s),1==(i=1-max)?(r=0,a=0,n=0):(r=(1-e-i)/(1-i),a=(1-t-i)/(1-i),n=(1-s-i)/(1-i));return{c:r,m:a,y:n,k:i}}(e.r,e.g,e.b),o=s||a.h,u=r||a.s,h=function(e){for(;e>=360;)e-=360;if(e<60)return"R"+e/.6;if(e<120)return"Y"+(e-60)/.6;if(e<180)return"G"+(e-120)/.6;if(e<240)return"C"+(e-180)/.6;if(e<300)return"B"+(e-240)/.6;if(e<360)return"M"+(e-300)/.6}(o),l={red:e.r,green:e.g,blue:e.b,hue:o,sat:u,lightness:a.l,whiteness:n.w,blackness:n.b,cyan:i.c,magenta:i.m,yellow:i.y,black:i.k,ncol:h,opacity:t,valid:!0},(f=l).red=Number(f.red.toFixed(0)),f.green=Number(f.green.toFixed(0)),f.blue=Number(f.blue.toFixed(0)),f.hue=Number(f.hue.toFixed(0)),f.sat=Number(f.sat.toFixed(2)),f.lightness=Number(f.lightness.toFixed(2)),f.whiteness=Number(f.whiteness.toFixed(2)),f.blackness=Number(f.blackness.toFixed(2)),f.cyan=Number(f.cyan.toFixed(2)),f.magenta=Number(f.magenta.toFixed(2)),f.yellow=Number(f.yellow.toFixed(2)),f.black=Number(f.black.toFixed(2)),f.ncol=f.ncol.substr(0,1)+Math.round(Number(f.ncol.substr(1))),f.opacity=Number(f.opacity.toFixed(2)),l=f):{red:0,green:0,blue:0,hue:0,sat:0,lightness:0,whiteness:0,blackness:0,cyan:0,magenta:0,yellow:0,black:0,ncol:"R",opacity:1,valid:!1}}function s(e){return"names"==e?["AliceBlue","AntiqueWhite","Aqua","Aquamarine","Azure","Beige","Bisque","Black","BlanchedAlmond","Blue","BlueViolet","Brown","BurlyWood","CadetBlue","Chartreuse","Chocolate","Coral","CornflowerBlue","Cornsilk","Crimson","Cyan","DarkBlue","DarkCyan","DarkGoldenRod","DarkGray","DarkGrey","DarkGreen","DarkKhaki","DarkMagenta","DarkOliveGreen","DarkOrange","DarkOrchid","DarkRed","DarkSalmon","DarkSeaGreen","DarkSlateBlue","DarkSlateGray","DarkSlateGrey","DarkTurquoise","DarkViolet","DeepPink","DeepSkyBlue","DimGray","DimGrey","DodgerBlue","FireBrick","FloralWhite","ForestGreen","Fuchsia","Gainsboro","GhostWhite","Gold","GoldenRod","Gray","Grey","Green","GreenYellow","HoneyDew","HotPink","IndianRed","Indigo","Ivory","Khaki","Lavender","LavenderBlush","LawnGreen","LemonChiffon","LightBlue","LightCoral","LightCyan","LightGoldenRodYellow","LightGray","LightGrey","LightGreen","LightPink","LightSalmon","LightSeaGreen","LightSkyBlue","LightSlateGray","LightSlateGrey","LightSteelBlue","LightYellow","Lime","LimeGreen","Linen","Magenta","Maroon","MediumAquaMarine","MediumBlue","MediumOrchid","MediumPurple","MediumSeaGreen","MediumSlateBlue","MediumSpringGreen","MediumTurquoise","MediumVioletRed","MidnightBlue","MintCream","MistyRose","Moccasin","NavajoWhite","Navy","OldLace","Olive","OliveDrab","Orange","OrangeRed","Orchid","PaleGoldenRod","PaleGreen","PaleTurquoise","PaleVioletRed","PapayaWhip","PeachPuff","Peru","Pink","Plum","PowderBlue","Purple","RebeccaPurple","Red","RosyBrown","RoyalBlue","SaddleBrown","Salmon","SandyBrown","SeaGreen","SeaShell","Sienna","Silver","SkyBlue","SlateBlue","SlateGray","SlateGrey","Snow","SpringGreen","SteelBlue","Tan","Teal","Thistle","Tomato","Turquoise","Violet","Wheat","White","WhiteSmoke","Yellow","YellowGreen"]:"hexs"==e?["f0f8ff","faebd7","00ffff","7fffd4","f0ffff","f5f5dc","ffe4c4","000000","ffebcd","0000ff","8a2be2","a52a2a","deb887","5f9ea0","7fff00","d2691e","ff7f50","6495ed","fff8dc","dc143c","00ffff","00008b","008b8b","b8860b","a9a9a9","a9a9a9","006400","bdb76b","8b008b","556b2f","ff8c00","9932cc","8b0000","e9967a","8fbc8f","483d8b","2f4f4f","2f4f4f","00ced1","9400d3","ff1493","00bfff","696969","696969","1e90ff","b22222","fffaf0","228b22","ff00ff","dcdcdc","f8f8ff","ffd700","daa520","808080","808080","008000","adff2f","f0fff0","ff69b4","cd5c5c","4b0082","fffff0","f0e68c","e6e6fa","fff0f5","7cfc00","fffacd","add8e6","f08080","e0ffff","fafad2","d3d3d3","d3d3d3","90ee90","ffb6c1","ffa07a","20b2aa","87cefa","778899","778899","b0c4de","ffffe0","00ff00","32cd32","faf0e6","ff00ff","800000","66cdaa","0000cd","ba55d3","9370db","3cb371","7b68ee","00fa9a","48d1cc","c71585","191970","f5fffa","ffe4e1","ffe4b5","ffdead","000080","fdf5e6","808000","6b8e23","ffa500","ff4500","da70d6","eee8aa","98fb98","afeeee","db7093","ffefd5","ffdab9","cd853f","ffc0cb","dda0dd","b0e0e6","800080","663399","ff0000","bc8f8f","4169e1","8b4513","fa8072","f4a460","2e8b57","fff5ee","a0522d","c0c0c0","87ceeb","6a5acd","708090","708090","fffafa","00ff7f","4682b4","d2b48c","008080","d8bfd8","ff6347","40e0d0","ee82ee","f5deb3","ffffff","f5f5f5","ffff00","9acd32"]:void 0}function r(e,t,s){var r,n;return{r:255*a(r=2*s-(n=s<=.5?s*(t+1):s+t-s*t),n,(e/=60)+2),g:255*a(r,n,e),b:255*a(r,n,e-2)}}function a(e,t,s){return s<0&&(s+=6),s>=6&&(s-=6),s<1?(t-e)*s+e:s<3?t:s<4?(t-e)*(4-s)+e:e}function n(e,t,s){var a,n,i,h=[];for(n=r(e,1,.5),h[0]=n.r/255,h[1]=n.g/255,h[2]=n.b/255,(i=t+s)>1&&(t=Number((t/i).toFixed(2)),s=Number((s/i).toFixed(2))),a=0;a<3;a++)h[a]*=1-t-s,h[a]+=t,h[a]=Number(255*h[a]);return{r:h[0],g:h[1],b:h[2]}}function h(e){for(var t=e.toString(16);t.length<2;)t="0"+t;return t}function l(e){return e.replace(/^\s+|\s+$/g,"")}function o(e){return"0123456789ABCDEFabcdef".indexOf(e)>-1}e.prototype={toRgbString:function(){return"rgb("+this.red+", "+this.green+", "+this.blue+")"},toRgbaString:function(){return"rgba("+this.red+", "+this.green+", "+this.blue+", "+this.opacity+")"},toHwbString:function(){return"hwb("+this.hue+", "+Math.round(100*this.whiteness)+"%, "+Math.round(100*this.blackness)+"%)"},toHwbStringDecimal:function(){return"hwb("+this.hue+", "+this.whiteness+", "+this.blackness+")"},toHwbaString:function(){return"hwba("+this.hue+", "+Math.round(100*this.whiteness)+"%, "+Math.round(100*this.blackness)+"%, "+this.opacity+")"},toHslString:function(){return"hsl("+this.hue+", "+Math.round(100*this.sat)+"%, "+Math.round(100*this.lightness)+"%)"},toHslStringDecimal:function(){return"hsl("+this.hue+", "+this.sat+", "+this.lightness+")"},toHslaString:function(){return"hsla("+this.hue+", "+Math.round(100*this.sat)+"%, "+Math.round(100*this.lightness)+"%, "+this.opacity+")"},toCmykString:function(){return"cmyk("+Math.round(100*this.cyan)+"%, "+Math.round(100*this.magenta)+"%, "+Math.round(100*this.yellow)+"%, "+Math.round(100*this.black)+"%)"},toCmykStringDecimal:function(){return"cmyk("+this.cyan+", "+this.magenta+", "+this.yellow+", "+this.black+")"},toNcolString:function(){return this.ncol+", "+Math.round(100*this.whiteness)+"%, "+Math.round(100*this.blackness)+"%"},toNcolStringDecimal:function(){return this.ncol+", "+this.whiteness+", "+this.blackness},toNcolaString:function(){return this.ncol+", "+Math.round(100*this.whiteness)+"%, "+Math.round(100*this.blackness)+"%, "+this.opacity},toName:function(){var e,t,r,a=s("hexs");for(i=0;i<a.length;i++)if(e=parseInt(a[i].substr(0,2),16),t=parseInt(a[i].substr(2,2),16),r=parseInt(a[i].substr(4,2),16),this.red==e&&this.green==t&&this.blue==r)return s("names")[i];return""},toHexString:function(){return"#"+h(this.red)+h(this.green)+h(this.blue)},toRgb:function(){return{r:this.red,g:this.green,b:this.blue,a:this.opacity}},toHsl:function(){return{h:this.hue,s:this.sat,l:this.lightness,a:this.opacity}},toHwb:function(){return{h:this.hue,w:this.whiteness,b:this.blackness,a:this.opacity}},toCmyk:function(){return{c:this.cyan,m:this.magenta,y:this.yellow,k:this.black,a:this.opacity}},toNcol:function(){return{ncol:this.ncol,w:this.whiteness,b:this.blackness,a:this.opacity}},isDark:function(e){var t=e||128;return(299*this.red+587*this.green+114*this.blue)/1e3<t},saturate:function(e){var s,a;s=e/100||.1,this.sat+=s,this.sat>1&&(this.sat=1),a=t(r(this.hue,this.sat,this.lightness),this.opacity,this.hue,this.sat),this.attachValues(a)},desaturate:function(e){var s,a;s=e/100||.1,this.sat-=s,this.sat<0&&(this.sat=0),a=t(r(this.hue,this.sat,this.lightness),this.opacity,this.hue,this.sat),this.attachValues(a)},lighter:function(e){var s,a;s=e/100||.1,this.lightness+=s,this.lightness>1&&(this.lightness=1),a=t(r(this.hue,this.sat,this.lightness),this.opacity,this.hue,this.sat),this.attachValues(a)},darker:function(e){var s,a;s=e/100||.1,this.lightness-=s,this.lightness<0&&(this.lightness=0),a=t(r(this.hue,this.sat,this.lightness),this.opacity,this.hue,this.sat),this.attachValues(a)},attachValues:function(e){this.red=e.red,this.green=e.green,this.blue=e.blue,this.hue=e.hue,this.sat=e.sat,this.lightness=e.lightness,this.whiteness=e.whiteness,this.blackness=e.blackness,this.cyan=e.cyan,this.magenta=e.magenta,this.yellow=e.yellow,this.black=e.black,this.ncol=e.ncol,this.opacity=e.opacity,this.valid=e.valid}},window.w3color=e}();