http://sassmeister.com/gist/matiassingers/8662166 - Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>

SassMeister-input.sass

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// Bourbon (v3.2.0.beta.1.a)
// ----

@import "bourbon/bourbon"

// adjust these values to change how each color is generated
// first value is 0 so it takes the supplied color
// to darken a color supply a negative value in $lights
$hues: 0, 358, 359, 0, 359
$saturations: 0, -2, 1, 30, -2
$lights: 0, 15, 8, -15, 22

@function get-stripe-color($color, $i)
  $hue: get-property($i, $hues)
  $saturation: get-property($i, $saturations)
  $light: get-property($i, $lights)

  @return adjust-color($color, $hue: $hue, $saturation: $saturation, $lightness: $light)
  
@function get-index($index, $length)
  @if $index == $length
    @return $index

  @if $index < $length + 1
    @return $index

  @return get-index($index - $length, $length)

@function get-property($index, $property)
  @return nth($property, get-index($index, length($property)))

@mixin stripe($color, $direction: 90deg, $stops: 20)
  $stripes: 100% / $stops
  $gradient: ()

  @for $i from 1 through $stops
    $stripe-color: get-stripe-color($color, $i)
    $dump: $stripe-color $stripes * ($i - 1), $stripe-color $stripes * $i

    $gradient: join($gradient, $dump, comma)

  @include background-image(linear-gradient($direction, $gradient))

// example of the mixin in use
$base-colors: #51bda5, #dd4b39, #fcd630, #4862a3, #88b422
@for $i from 1 through length($base-colors)
  $color: nth($base-colors, $i)

  .stripe:nth-child(#{$i})
    height: 5px
    margin-top: 10px
    @include stripe($color)

SassMeister-output.css

.stripe:nth-child(1) {
  height: 5px;
  margin-top: 10px;
  background-image: -webkit-linear-gradient(-360deg, #51bda5 0%, #51bda5 5%, #8ad0be 5%, #8ad0be 10%, #6ec9b3 10%, #6ec9b3 15%, #18a989 15%, #18a989 20%, #a4dbcd 20%, #a4dbcd 25%, #51bda5 25%, #51bda5 30%, #8ad0be 30%, #8ad0be 35%, #6ec9b3 35%, #6ec9b3 40%, #18a989 40%, #18a989 45%, #a4dbcd 45%, #a4dbcd 50%, #51bda5 50%, #51bda5 55%, #8ad0be 55%, #8ad0be 60%, #6ec9b3 60%, #6ec9b3 65%, #18a989 65%, #18a989 70%, #a4dbcd 70%, #a4dbcd 75%, #51bda5 75%, #51bda5 80%, #8ad0be 80%, #8ad0be 85%, #6ec9b3 85%, #6ec9b3 90%, #18a989 90%, #18a989 95%, #a4dbcd 95%, #a4dbcd 100%);
  background-image: linear-gradient(90deg, #51bda5 0%, #51bda5 5%, #8ad0be 5%, #8ad0be 10%, #6ec9b3 10%, #6ec9b3 15%, #18a989 15%, #18a989 20%, #a4dbcd 20%, #a4dbcd 25%, #51bda5 25%, #51bda5 30%, #8ad0be 30%, #8ad0be 35%, #6ec9b3 35%, #6ec9b3 40%, #18a989 40%, #18a989 45%, #a4dbcd 45%, #a4dbcd 50%, #51bda5 50%, #51bda5 55%, #8ad0be 55%, #8ad0be 60%, #6ec9b3 60%, #6ec9b3 65%, #18a989 65%, #18a989 70%, #a4dbcd 70%, #a4dbcd 75%, #51bda5 75%, #51bda5 80%, #8ad0be 80%, #8ad0be 85%, #6ec9b3 85%, #6ec9b3 90%, #18a989 90%, #18a989 95%, #a4dbcd 95%, #a4dbcd 100%);
}

.stripe:nth-child(2) {
  height: 5px;
  margin-top: 10px;
  background-image: -webkit-linear-gradient(-360deg, #dd4b39 0%, #dd4b39 5%, #e7847c 5%, #e7847c 10%, #e4685b 10%, #e4685b 15%, #ca1600 15%, #ca1600 20%, #eca29a 20%, #eca29a 25%, #dd4b39 25%, #dd4b39 30%, #e7847c 30%, #e7847c 35%, #e4685b 35%, #e4685b 40%, #ca1600 40%, #ca1600 45%, #eca29a 45%, #eca29a 50%, #dd4b39 50%, #dd4b39 55%, #e7847c 55%, #e7847c 60%, #e4685b 60%, #e4685b 65%, #ca1600 65%, #ca1600 70%, #eca29a 70%, #eca29a 75%, #dd4b39 75%, #dd4b39 80%, #e7847c 80%, #e7847c 85%, #e4685b 85%, #e4685b 90%, #ca1600 90%, #ca1600 95%, #eca29a 95%, #eca29a 100%);
  background-image: linear-gradient(90deg, #dd4b39 0%, #dd4b39 5%, #e7847c 5%, #e7847c 10%, #e4685b 10%, #e4685b 15%, #ca1600 15%, #ca1600 20%, #eca29a 20%, #eca29a 25%, #dd4b39 25%, #dd4b39 30%, #e7847c 30%, #e7847c 35%, #e4685b 35%, #e4685b 40%, #ca1600 40%, #ca1600 45%, #eca29a 45%, #eca29a 50%, #dd4b39 50%, #dd4b39 55%, #e7847c 55%, #e7847c 60%, #e4685b 60%, #e4685b 65%, #ca1600 65%, #ca1600 70%, #eca29a 70%, #eca29a 75%, #dd4b39 75%, #dd4b39 80%, #e7847c 80%, #e7847c 85%, #e4685b 85%, #e4685b 90%, #ca1600 90%, #ca1600 95%, #eca29a 95%, #eca29a 100%);
}

.stripe:nth-child(3) {
  height: 5px;
  margin-top: 10px;
  background-image: -webkit-linear-gradient(-360deg, #fcd630 0%, #fcd630 5%, #fce07d 5%, #fce07d 10%, #fddc57 10%, #fddc57 15%, #e0b600 15%, #e0b600 20%, #fdeaa0 20%, #fdeaa0 25%, #fcd630 25%, #fcd630 30%, #fce07d 30%, #fce07d 35%, #fddc57 35%, #fddc57 40%, #e0b600 40%, #e0b600 45%, #fdeaa0 45%, #fdeaa0 50%, #fcd630 50%, #fcd630 55%, #fce07d 55%, #fce07d 60%, #fddc57 60%, #fddc57 65%, #e0b600 65%, #e0b600 70%, #fdeaa0 70%, #fdeaa0 75%, #fcd630 75%, #fcd630 80%, #fce07d 80%, #fce07d 85%, #fddc57 85%, #fddc57 90%, #e0b600 90%, #e0b600 95%, #fdeaa0 95%, #fdeaa0 100%);
  background-image: linear-gradient(90deg, #fcd630 0%, #fcd630 5%, #fce07d 5%, #fce07d 10%, #fddc57 10%, #fddc57 15%, #e0b600 15%, #e0b600 20%, #fdeaa0 20%, #fdeaa0 25%, #fcd630 25%, #fcd630 30%, #fce07d 30%, #fce07d 35%, #fddc57 35%, #fddc57 40%, #e0b600 40%, #e0b600 45%, #fdeaa0 45%, #fdeaa0 50%, #fcd630 50%, #fcd630 55%, #fce07d 55%, #fce07d 60%, #fddc57 60%, #fddc57 65%, #e0b600 65%, #e0b600 70%, #fdeaa0 70%, #fdeaa0 75%, #fcd630 75%, #fcd630 80%, #fce07d 80%, #fce07d 85%, #fddc57 85%, #fddc57 90%, #e0b600 90%, #e0b600 95%, #fdeaa0 95%, #fdeaa0 100%);
}

.stripe:nth-child(4) {
  height: 5px;
  margin-top: 10px;
  background-image: -webkit-linear-gradient(-360deg, #4862a3 0%, #4862a3 5%, #778fc0 5%, #778fc0 10%, #5b78b8 10%, #5b78b8 15%, #193886 15%, #193886 20%, #90a2cb 20%, #90a2cb 25%, #4862a3 25%, #4862a3 30%, #778fc0 30%, #778fc0 35%, #5b78b8 35%, #5b78b8 40%, #193886 40%, #193886 45%, #90a2cb 45%, #90a2cb 50%, #4862a3 50%, #4862a3 55%, #778fc0 55%, #778fc0 60%, #5b78b8 60%, #5b78b8 65%, #193886 65%, #193886 70%, #90a2cb 70%, #90a2cb 75%, #4862a3 75%, #4862a3 80%, #778fc0 80%, #778fc0 85%, #5b78b8 85%, #5b78b8 90%, #193886 90%, #193886 95%, #90a2cb 95%, #90a2cb 100%);
  background-image: linear-gradient(90deg, #4862a3 0%, #4862a3 5%, #778fc0 5%, #778fc0 10%, #5b78b8 10%, #5b78b8 15%, #193886 15%, #193886 20%, #90a2cb 20%, #90a2cb 25%, #4862a3 25%, #4862a3 30%, #778fc0 30%, #778fc0 35%, #5b78b8 35%, #5b78b8 40%, #193886 40%, #193886 45%, #90a2cb 45%, #90a2cb 50%, #4862a3 50%, #4862a3 55%, #778fc0 55%, #778fc0 60%, #5b78b8 60%, #5b78b8 65%, #193886 65%, #193886 70%, #90a2cb 70%, #90a2cb 75%, #4862a3 75%, #4862a3 80%, #778fc0 80%, #778fc0 85%, #5b78b8 85%, #5b78b8 90%, #193886 90%, #193886 95%, #90a2cb 95%, #90a2cb 100%);
}

.stripe:nth-child(5) {
  height: 5px;
  margin-top: 10px;
  background-image: -webkit-linear-gradient(-360deg, #88b422 0%, #88b422 5%, #b3da49 5%, #b3da49 10%, #a5d827 10%, #a5d827 15%, #608801 15%, #608801 20%, #bde066 20%, #bde066 25%, #88b422 25%, #88b422 30%, #b3da49 30%, #b3da49 35%, #a5d827 35%, #a5d827 40%, #608801 40%, #608801 45%, #bde066 45%, #bde066 50%, #88b422 50%, #88b422 55%, #b3da49 55%, #b3da49 60%, #a5d827 60%, #a5d827 65%, #608801 65%, #608801 70%, #bde066 70%, #bde066 75%, #88b422 75%, #88b422 80%, #b3da49 80%, #b3da49 85%, #a5d827 85%, #a5d827 90%, #608801 90%, #608801 95%, #bde066 95%, #bde066 100%);
  background-image: linear-gradient(90deg, #88b422 0%, #88b422 5%, #b3da49 5%, #b3da49 10%, #a5d827 10%, #a5d827 15%, #608801 15%, #608801 20%, #bde066 20%, #bde066 25%, #88b422 25%, #88b422 30%, #b3da49 30%, #b3da49 35%, #a5d827 35%, #a5d827 40%, #608801 40%, #608801 45%, #bde066 45%, #bde066 50%, #88b422 50%, #88b422 55%, #b3da49 55%, #b3da49 60%, #a5d827 60%, #a5d827 65%, #608801 65%, #608801 70%, #bde066 70%, #bde066 75%, #88b422 75%, #88b422 80%, #b3da49 80%, #b3da49 85%, #a5d827 85%, #a5d827 90%, #608801 90%, #608801 95%, #bde066 95%, #bde066 100%);
}

SassMeister-rendered.html

<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>