title: Move a color shade down in color picker programatically?
body: <p>I have an input box where the user can set the color of an object. I want to add a check box that the user clicks that says 'make 3D' which adds a text-shadow effect to the object to give it a 3D appearance. The 3D effect needs a lighter shade of the base color to make it look correct. If I want to use the base color as a start, and programatically move one shade lighter for the first text shadow, two shades lighter for the second shadow etc. is that possible?</p>
  
  <p>They can input any color they want, but the text-shadow should use that input and move one or two shades lighter at a time. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;p&gt;Object Color:&lt;input type="text" class="object_color" value="FF8000" id="object_color"&gt;&lt;/p&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>CSS to add to object</strong></p>
  
  <pre><code> text-shadow: 0 1px 0 #one-shade-lighter-than-FF8000,
                 0 2px 0 #one-shade-lighter-than-FF8000,
                 0 3px 0 #two-shades-lighter-than-FF8000,
                 0 4px 0 #two-shades-lighter-than-FF8000,
                 0 5px 0 #three-shades-lighter-than-FF8000,
                 0 6px 1px rgba(0,0,0,.1),
                 0 0 5px rgba(0,0,0,.1),
                 0 1px 3px rgba(0,0,0,.3),
                 0 3px 5px rgba(0,0,0,.2),
                 0 5px 10px rgba(0,0,0,.25),
                 0 10px 10px rgba(0,0,0,.2),
                 0 20px 20px rgba(0,0,0,.15)
  </code></pre>
  
  <p>I guess ultimately can we subtract colors from one another to move to a new color like</p>
  
  <pre><code>var textShadow = rgb(156, 87, 135) - rgb(2, 4, 18)
  </code></pre>