SASS progress bar color generation. I had to generate a progress bar that would change color from 0%(red) to 100%(green). See the output by using something like: http://sassmeister.com/

progress-bar.sass

$start: hsl(1, 62.5%, 45%)
$end: hsl(82, 62.6%, 38.8%)

$i: 0
@while $i < 100
    $i: $i + 1
	$hue: round((82 / 100) * $i)
    
    .progress-bar[data-percent='#{$i}']
        background-color: adjust-hue($start, $hue)
        width: percentage($i / 100)

x-output.css

.progress-bar[data-percent='1'] { background-color: #952622; width: 1%; }
.progress-bar[data-percent='2'] { background-color: #952822; width: 2%; }
.progress-bar[data-percent='3'] { background-color: #952822; width: 3%; }
.progress-bar[data-percent='4'] { background-color: #952a22; width: 4%; }
.progress-bar[data-percent='5'] { background-color: #952c22; width: 5%; }
.progress-bar[data-percent='6'] { background-color: #952e22; width: 6%; }
.progress-bar[data-percent='7'] { background-color: #953022; width: 7%; }
.progress-bar[data-percent='8'] { background-color: #953222; width: 8%; }
.progress-bar[data-percent='9'] { background-color: #953222; width: 9%; }
.progress-bar[data-percent='10'] { background-color: #953422; width: 10%; }
.progress-bar[data-percent='11'] { background-color: #953622; width: 11%; }
.progress-bar[data-percent='12'] { background-color: #953722; width: 12%; }
.progress-bar[data-percent='13'] { background-color: #953922; width: 13%; }
.progress-bar[data-percent='14'] { background-color: #953922; width: 14%; }
.progress-bar[data-percent='15'] { background-color: #953b22; width: 15%; }
.progress-bar[data-percent='16'] { background-color: #953d22; width: 16%; }
.progress-bar[data-percent='17'] { background-color: #953f22; width: 17%; }
.progress-bar[data-percent='18'] { background-color: #954122; width: 18%; }
.progress-bar[data-percent='19'] { background-color: #954322; width: 19%; }
.progress-bar[data-percent='20'] { background-color: #954322; width: 20%; }
.progress-bar[data-percent='21'] { background-color: #954522; width: 21%; }
.progress-bar[data-percent='22'] { background-color: #954722; width: 22%; }
.progress-bar[data-percent='23'] { background-color: #954922; width: 23%; }
.progress-bar[data-percent='24'] { background-color: #954b22; width: 24%; }
.progress-bar[data-percent='25'] { background-color: #954d22; width: 25%; }
.progress-bar[data-percent='26'] { background-color: #954d22; width: 26%; }
.progress-bar[data-percent='27'] { background-color: #954e22; width: 27%; }
.progress-bar[data-percent='28'] { background-color: #955022; width: 28%; }
.progress-bar[data-percent='29'] { background-color: #955222; width: 29%; }
.progress-bar[data-percent='30'] { background-color: #955422; width: 30%; }
.progress-bar[data-percent='31'] { background-color: #955422; width: 31%; }
.progress-bar[data-percent='32'] { background-color: #955622; width: 32%; }
.progress-bar[data-percent='33'] { background-color: #955822; width: 33%; }
.progress-bar[data-percent='34'] { background-color: #955a22; width: 34%; }
.progress-bar[data-percent='35'] { background-color: #955c22; width: 35%; }
.progress-bar[data-percent='36'] { background-color: #955e22; width: 36%; }
.progress-bar[data-percent='37'] { background-color: #955e22; width: 37%; }
.progress-bar[data-percent='38'] { background-color: #956022; width: 38%; }
.progress-bar[data-percent='39'] { background-color: #956222; width: 39%; }
.progress-bar[data-percent='40'] { background-color: #956322; width: 40%; }
.progress-bar[data-percent='41'] { background-color: #956522; width: 41%; }
.progress-bar[data-percent='42'] { background-color: #956522; width: 42%; }
.progress-bar[data-percent='43'] { background-color: #956722; width: 43%; }
.progress-bar[data-percent='44'] { background-color: #956922; width: 44%; }
.progress-bar[data-percent='45'] { background-color: #956b22; width: 45%; }
.progress-bar[data-percent='46'] { background-color: #956d22; width: 46%; }
.progress-bar[data-percent='47'] { background-color: #956f22; width: 47%; }
.progress-bar[data-percent='48'] { background-color: #956f22; width: 48%; }
.progress-bar[data-percent='49'] { background-color: #957122; width: 49%; }
.progress-bar[data-percent='50'] { background-color: #957322; width: 50%; }
.progress-bar[data-percent='51'] { background-color: #957522; width: 51%; }
.progress-bar[data-percent='52'] { background-color: #957722; width: 52%; }
.progress-bar[data-percent='53'] { background-color: #957722; width: 53%; }
.progress-bar[data-percent='54'] { background-color: #957822; width: 54%; }
.progress-bar[data-percent='55'] { background-color: #957a22; width: 55%; }
.progress-bar[data-percent='56'] { background-color: #957c22; width: 56%; }
.progress-bar[data-percent='57'] { background-color: #957e22; width: 57%; }
.progress-bar[data-percent='58'] { background-color: #958022; width: 58%; }
.progress-bar[data-percent='59'] { background-color: #958022; width: 59%; }
.progress-bar[data-percent='60'] { background-color: #958222; width: 60%; }
.progress-bar[data-percent='61'] { background-color: #958422; width: 61%; }
.progress-bar[data-percent='62'] { background-color: #958622; width: 62%; }
.progress-bar[data-percent='63'] { background-color: #958822; width: 63%; }
.progress-bar[data-percent='64'] { background-color: #958822; width: 64%; }
.progress-bar[data-percent='65'] { background-color: #958a22; width: 65%; }
.progress-bar[data-percent='66'] { background-color: #958c22; width: 66%; }
.progress-bar[data-percent='67'] { background-color: #958e22; width: 67%; }
.progress-bar[data-percent='68'] { background-color: #958f22; width: 68%; }
.progress-bar[data-percent='69'] { background-color: #959122; width: 69%; }
.progress-bar[data-percent='70'] { background-color: #959122; width: 70%; }
.progress-bar[data-percent='71'] { background-color: #959322; width: 71%; }
.progress-bar[data-percent='72'] { background-color: #959522; width: 72%; }
.progress-bar[data-percent='73'] { background-color: #939522; width: 73%; }
.progress-bar[data-percent='74'] { background-color: #919522; width: 74%; }
.progress-bar[data-percent='75'] { background-color: #919522; width: 75%; }
.progress-bar[data-percent='76'] { background-color: #8f9522; width: 76%; }
.progress-bar[data-percent='77'] { background-color: #8e9522; width: 77%; }
.progress-bar[data-percent='78'] { background-color: #8c9522; width: 78%; }
.progress-bar[data-percent='79'] { background-color: #8a9522; width: 79%; }
.progress-bar[data-percent='80'] { background-color: #889522; width: 80%; }
.progress-bar[data-percent='81'] { background-color: #889522; width: 81%; }
.progress-bar[data-percent='82'] { background-color: #869522; width: 82%; }
.progress-bar[data-percent='83'] { background-color: #849522; width: 83%; }
.progress-bar[data-percent='84'] { background-color: #829522; width: 84%; }
.progress-bar[data-percent='85'] { background-color: #809522; width: 85%; }
.progress-bar[data-percent='86'] { background-color: #7e9522; width: 86%; }
.progress-bar[data-percent='87'] { background-color: #7e9522; width: 87%; }
.progress-bar[data-percent='88'] { background-color: #7c9522; width: 88%; }
.progress-bar[data-percent='89'] { background-color: #7a9522; width: 89%; }
.progress-bar[data-percent='90'] { background-color: #789522; width: 90%; }
.progress-bar[data-percent='91'] { background-color: #779522; width: 91%; }
.progress-bar[data-percent='92'] { background-color: #779522; width: 92%; }
.progress-bar[data-percent='93'] { background-color: #759522; width: 93%; }
.progress-bar[data-percent='94'] { background-color: #739522; width: 94%; }
.progress-bar[data-percent='95'] { background-color: #719522; width: 95%; }
.progress-bar[data-percent='96'] { background-color: #6f9522; width: 96%; }
.progress-bar[data-percent='97'] { background-color: #6d9522; width: 97%; }
.progress-bar[data-percent='98'] { background-color: #6d9522; width: 98%; }
.progress-bar[data-percent='99'] { background-color: #6b9522; width: 99%; }
.progress-bar[data-percent='100'] { background-color: #699522; width: 100%; }