title: Programmatically Lighten or Darken a hex color (or rgb, and blend colors)
body: <p>Here is a function I was working on to programmatically lighten or darken a hex color by a specific amount. Just pass in a string like <code>&quot;3F6D2A&quot;</code> for the color (<code>col</code>) and a base10 integer (<code>amt</code>) for the amount to lighten or darken. To darken, pass in a negative number (i.e. <code>-20</code>).</p>
  <p>The reason for me to do this was because of all the solutions I found, thus far, they seemed to over-complicate the issue. And I had a feeling it could be done with just a couple lines of code. Please let me know if you find any problems, or have any adjustments to make that would speed it up.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function LightenDarkenColor(col, amt) {
    col = parseInt(col, 16);
    return (((col &amp; 0x0000FF) + amt) | ((((col &gt;&gt; 8) &amp; 0x00FF) + amt) &lt;&lt; 8) | (((col &gt;&gt; 16) + amt) &lt;&lt; 16)).toString(16);
  }
  
  
  // TEST
  console.log( LightenDarkenColor("3F6D2A",40) );</code></pre>
  </div>
  </div>
  </p>
  <p>For Development use here is an easier to read version:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function LightenDarkenColor(col, amt) {
    var num = parseInt(col, 16);
    var r = (num &gt;&gt; 16) + amt;
    var b = ((num &gt;&gt; 8) &amp; 0x00FF) + amt;
    var g = (num &amp; 0x0000FF) + amt;
    var newColor = g | (b &lt;&lt; 8) | (r &lt;&lt; 16);
    return newColor.toString(16);
  }
  
  
  // TEST
  console.log(LightenDarkenColor("3F6D2A", -40));</code></pre>
  </div>
  </div>
  </p>
  <p>And finally a version to handle colors that may (or may not) have the &quot;#&quot; in the beginning. Plus adjusting for improper color values:</p>
  <pre><code>function LightenDarkenColor(col,amt) {
      var usePound = false;
      if ( col[0] == &quot;#&quot; ) {
          col = col.slice(1);
          usePound = true;
      }
  
      var num = parseInt(col,16);
  
      var r = (num &gt;&gt; 16) + amt;
  
      if ( r &gt; 255 ) r = 255;
      else if  (r &lt; 0) r = 0;
  
      var b = ((num &gt;&gt; 8) &amp; 0x00FF) + amt;
  
      if ( b &gt; 255 ) b = 255;
      else if  (b &lt; 0) b = 0;
      
      var g = (num &amp; 0x0000FF) + amt;
  
      if ( g &gt; 255 ) g = 255;
      else if  ( g &lt; 0 ) g = 0;
  
      return (usePound?&quot;#&quot;:&quot;&quot;) + (g | (b &lt;&lt; 8) | (r &lt;&lt; 16)).toString(16);
  }
  </code></pre>
  <p>OK, so now it's not just a couple of lines, but it seems far simpler and if you're not using the &quot;#&quot; and don't need to check for colors out of range, it is only a couple of lines.</p>
  <p>If not using the &quot;#&quot;, you can just add it in code like:</p>
  <pre><code>var myColor = &quot;3F6D2A&quot;;
  myColor = LightenDarkenColor(myColor,10);
  thePlaceTheColorIsUsed = (&quot;#&quot; + myColor);
  </code></pre>
  <p>I guess my main question is, am I correct here? Does this not encompass most (normal) situations? And if so, what is the fastest and smallest way to do this? I want to use in animations and in a small environment, so speed is the first most important factor here, size second, accuracy third, readability? huh? not on the list of requirements (sorry, I know half of you are tearing out your eyes right now!).</p>