// I made a new version where you can type in the colors
// https://codepen.io/waddington/pen/yqmFL
-5.times do
  .circle
    -4.times do
      .shades

// I made a new version where you can type in the colors
// https://codepen.io/waddington/pen/yqmFL
$color1:#363734;
$color2:#f29c54;
$color3:#ebae3d;
$color4:#66a6b8;
$color5:#719e77;

@import url(https://fonts.googleapis.com/css?family=Lobster);

@mixin color($color) {
  background:$color;
  @for $i from 1 through 4 {
    $amount: 8%;
    .shades:nth-of-type(#{$i}) {
      background:lighten($color, ($amount * $i));
    }
  }
  @for $n from 1 through 5 {
    &:nth-of-type(#{$n}):after {
      content:"#{$color}";
      color:invert($color);
    }
  }
}
.circle {
  width:200px;
  height:200px;
  border-radius:50%;
  overflow:hidden;
  float:left;
  margin:10px 15px;
}
.circle:after {
  display:block;
  position:relative;
  top:-35px;
  width:200px;
  text-align:center;
  font-family: 'Lobster', cursive;
  font-size:25px;
}
.shades {
  width:50px;
  height:100px;
  float:left;
  position:relative;
  top:100px;
}
.circle:nth-of-type(1) {
  @include color($color1);
}
.circle:nth-of-type(2) {
  @include color($color2);
}
.circle:nth-of-type(3) {
  @include color($color3);
}
.circle:nth-of-type(4) {
  @include color($color4);
}
.circle:nth-of-type(5) {
  @include color($color5);
}

// updated version where you can edit colors without code
// https://codepen.io/waddington/pen/yqmFL