SassMeister-output.css

.lighten .swatch1 {
  background-color: #f0803f;
}

.tint .swatch1 {
  background-color: #ec712a;
}

.darken .swatch1 {
  background-color: #bb4d0e;
}

.shade .swatch1 {
  background-color: #d35710;
}

.lighten .swatch2 {
  background-color: #f49f6e;
}

.tint .swatch2 {
  background-color: #ee8141;
}

.darken .swatch2 {
  background-color: #8b3a0b;
}

.shade .swatch2 {
  background-color: #bb4e0e;
}

.lighten .swatch3 {
  background-color: #f7be9e;
}

.tint .swatch3 {
  background-color: #f09059;
}

.darken .swatch3 {
  background-color: #5c2607;
}

.shade .swatch3 {
  background-color: #a4440d;
}

.lighten .swatch4 {
  background-color: #fbdecd;
}

.tint .swatch4 {
  background-color: #f2a071;
}

.darken .swatch4 {
  background-color: #2d1203;
}

.shade .swatch4 {
  background-color: #8c3a0b;
}

.lighten .swatch5 {
  background-color: #fffdfc;
}

.tint .swatch5 {
  background-color: #f5b089;
}

.darken .swatch5 {
  background-color: black;
}

.shade .swatch5 {
  background-color: #753109;
}

.lighten .swatch6 {
  background-color: white;
}

.tint .swatch6 {
  background-color: #f7c0a0;
}

.darken .swatch6 {
  background-color: black;
}

.shade .swatch6 {
  background-color: #5e2707;
}

.lighten .swatch7 {
  background-color: white;
}

.tint .swatch7 {
  background-color: #f9d0b8;
}

.darken .swatch7 {
  background-color: black;
}

.shade .swatch7 {
  background-color: #461d05;
}

.lighten .swatch8 {
  background-color: white;
}

.tint .swatch8 {
  background-color: #fbdfd0;
}

.darken .swatch8 {
  background-color: black;
}

.shade .swatch8 {
  background-color: #2f1304;
}

.lighten .swatch9 {
  background-color: white;
}

.tint .swatch9 {
  background-color: #fdefe7;
}

.darken .swatch9 {
  background-color: black;
}

.shade .swatch9 {
  background-color: #170a02;
}

.lighten .swatch10 {
  background-color: white;
}

.tint .swatch10 {
  background-color: white;
}

.darken .swatch10 {
  background-color: black;
}

.shade .swatch10 {
  background-color: black;
}

body {
  font-family: Segoe UI;
  font-size: 16px;
  padding: 20px;
}

.swatches {
  display: block;
  clear: both;
  line-height: 30px;
  overflow: hidden;
}

.swatches:before {
  display: block;
  float: left;
  width: 80px;
  text-align: right;
  margin-right: 10px;
}

.swatches div {
  float: left;
  width: 30px;
  height: 30px;
}

.swatches div.swatch0 {
  background-color: #EA6112;
}

.lighten:before {
  content: 'lighten';
}

.tint:before {
  content: 'tint';
}

.darken {
  margin-top: 20px;
}

.darken:before {
  content: 'darken';
}

.shade:before {
  content: 'shade';
}

code {
  display: inline-block;
  font-size: 90%;
  padding: 2px;
  background: #efefef;
}

SassMeister-input-HTML.html

<h3>A Visual Representation of the Problem With Lighten/Darken</h3>
<p>Wouldn't you expect <code>lighten( #EA6112, 50% )</code> to give you a result that is "half way white"?<br />
Me too, but check the Swatches below...</p>
<div class="lighten swatches">
  <div class="swatch0"></div>
  <div class="swatch1"></div>
  <div class="swatch2"></div>
  <div class="swatch3"></div>
  <div class="swatch4"></div>
  <div class="swatch5"></div>
  <div class="swatch6"></div>
  <div class="swatch7"></div>
  <div class="swatch8"></div>
  <div class="swatch9"></div>
  <div class="swatch10"></div>
</div>
<div class="tint swatches">
  <div class="swatch0"></div>
  <div class="swatch1"></div>
  <div class="swatch2"></div>
  <div class="swatch3"></div>
  <div class="swatch4"></div>
  <div class="swatch5"></div>
  <div class="swatch6"></div>
  <div class="swatch7"></div>
  <div class="swatch8"></div>
  <div class="swatch9"></div>
  <div class="swatch10"></div>
</div>
<p>The same is true for darken:</p>
<div class="darken swatches">
  <div class="swatch0"></div>
  <div class="swatch1"></div>
  <div class="swatch2"></div>
  <div class="swatch3"></div>
  <div class="swatch4"></div>
  <div class="swatch5"></div>
  <div class="swatch6"></div>
  <div class="swatch7"></div>
  <div class="swatch8"></div>
  <div class="swatch9"></div>
  <div class="swatch10"></div>
</div>
<div class="shade swatches">
  <div class="swatch0"></div>
  <div class="swatch1"></div>
  <div class="swatch2"></div>
  <div class="swatch3"></div>
  <div class="swatch4"></div>
  <div class="swatch5"></div>
  <div class="swatch6"></div>
  <div class="swatch7"></div>
  <div class="swatch8"></div>
  <div class="swatch9"></div>
  <div class="swatch10"></div>
</div>
<p>And this is exactly why <code>tint</code> and <code>shade</code> are more awesome then <code>lighten</code> and <code>darken</code></p>

<p><small>This is only a visualization of Hugo Giraudels <a href="https://css-tricks.com/snippets/sass/tint-shade-functions/">Article on css-tricks.com</a><br>- make sure to check out the other amazing stuff they have on sass</small></p>

SassMeister-input.scss

$color: #EA6112;

/// Slightly lighten a color
/// @access public
/// @param {Color} $color - color to tint
/// @param {Number} $percentage - percentage of `$color` in returned color
/// @return {Color}
@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

/// Slightly darken a color
/// @access public
/// @param {Color} $color - color to shade
/// @param {Number} $percentage - percentage of `$color` in returned color
/// @return {Color}
@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

// create mock classes
@for $i from 1 through 10 {
  // lighten
  .lighten .swatch#{$i} {
    background-color: lighten( $color, $i * 10 );
  }
  // tint
  .tint .swatch#{$i} {
    background-color: tint( $color, $i * 10 );
  }
  
  // darken
  .darken .swatch#{$i} {
    background-color: darken( $color, $i * 10 );
  }
  // shade
  .shade .swatch#{$i} {
    background-color: shade( $color, $i * 10 );
  }
}

// layout stuff
body {
  font-family: Segoe UI;
  font-size: 16px;
  padding: 20px;
}
.swatches {
  display: block;
  clear: both;
  line-height: 30px;
  overflow: hidden;
  &:before {
    display: block;
    float: left;
    width: 80px;
    text-align: right;
    margin-right: 10px;
  }
  div {
    float: left;
    width: 30px;
    height: 30px;
    &.swatch0 {
      background-color: $color;
    }
  }
}
.lighten:before {
  content: 'lighten';
}
.tint:before {
  content: 'tint';
}
.darken {
  margin-top: 20px;
  &:before {
    content: 'darken';
  }
}
.shade:before {
  content: 'shade';
}
code {
  display: inline-block;
  font-size: 90%;
  padding: 2px;
  background: #efefef;
}