Color picker

index.html

<h1>Color Picker</h1>

<ul>
<li>+ 50</li>
<li>+ 45</li>
<li>+ 40</li>
<li>+ 35</li>
<li>+ 30</li>
<li>+ 25</li>
<li>+ 20</li>
<li>+ 15</li>
<li>+ 10</li>
<li>+ 5</li>
<li class="color">Indian Red</li>
<li>- 5</li>
<li>- 10</li>
<li>- 15</li>
<li>- 20</li>
<li>- 25</li>
<li>- 30</li>
<li>- 35</li>
<li>- 40</li>
<li>- 45</li>
<li>- 50</li>
</ul>

style.scss

@import "compass";
$color: indianred;
$text: #eee;
$title: #444;

$pad: 1em;

h1 {
  margin-bottom: $pad;
  text-align: left;
  color: lighten($title, 50%);
  font-size: 2em;
}

body {
  text-align: center;
  max-width: 30%;
  margin: 2em auto;
  font-family: sans-serif;
  background: $text;
}

ul {
  padding: $pad;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 0 40px darken($text, 20%);
}

li {
  color: $text;
  background: $color;
  padding: $pad;
  margin: 0;
}

.color {
  position: relative;
  margin-left: -$pad;
  width: 100%;
  z-index: 20;
	box-shadow: 0 0 0 1px darken($color, 25%),
    					0 0 8px darken($color, 35%),
    					inset 0 0 0 1px lighten($color, 10%);
}

/* Lighten */
li:nth-child(1) { background: lighten($color, 50%); }
li:nth-child(2) { background: lighten($color, 45%); }
li:nth-child(3) { background: lighten($color, 40%); }
li:nth-child(4) { background: lighten($color, 35%); }
li:nth-child(5) { background: lighten($color, 30%); }
li:nth-child(6) { background: lighten($color, 25%); }
li:nth-child(7) { background: lighten($color, 20%); }
li:nth-child(8) { background: lighten($color, 15%); }
li:nth-child(9) { background: lighten($color, 10%); }
li:nth-child(10) { background: lighten($color, 5%); }

/* Neutral */
li:nth-child(11) { background: $color; }

/* Darken */
li:nth-child(12) { background: darken($color, 5%); }
li:nth-child(13) { background: darken($color, 10%); }
li:nth-child(14) { background: darken($color, 15%); }
li:nth-child(15) { background: darken($color, 20%); }
li:nth-child(16) { background: darken($color, 25%); }
li:nth-child(17) { background: darken($color, 30%); }
li:nth-child(18) { background: darken($color, 35%); }
li:nth-child(19) { background: darken($color, 40%); }
li:nth-child(20) { background: darken($color, 45%); }
li:nth-child(21) { background: darken($color, 50%); }