Black_Star,
Зачем все эти танцы с атрибутами data? Начальное состояние блоков известно же, для остальных двух параметров явно прослеживается зависимость блока от индекса. Да и конверторы никакие не нужны.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
.first_st1{
fill: hsl(1, 50%, 50%);
}
.first_st2{
fill: hsl(1, 70%, 40%);
}
.first_st3{
fill: hsl(1, 90%, 30%);
}
.second_st1{
fill: hsl(11, 50%, 50%);
}
.second_st2{
fill: hsl(11, 70%, 40%);
}
.second_st3{
fill: hsl(11, 90%, 30%);
}
</style>
</head>
<body>
<svg width="600" height="240">
<rect class="first_st1" width="80" height="80" x="0" y="0"></rect>
<rect class="first_st2" width="80" height="80" x="0" y="80"></rect>
<rect class="first_st3" width="80" height="80" x="0" y="160"></rect>
<rect class="second_st1" width="80" height="80" x="160" y="0"></rect>
<rect class="second_st2" width="80" height="80" x="160" y="80"></rect>
<rect class="second_st3" width="80" height="80" x="160" y="160"></rect>
</svg>
<script>
window.onload = function(){
var initialH1 = 1
initialH2 = 11,
allFirstColors = $("[class^='first_st']"),
firstColorsLength = allFirstColors.length,
allSecondColors = $("[class^='second_st']"),
secondColorsLength = allFirstColors.length;
window.setInterval(function(){
initialH1 = initialH1 === 360 ? 1 : initialH1 + 10 < 360 ? initialH1 + 10 : 360;
initialH2 = initialH2 === 360 ? 11 : initialH2 + 10 < 360 ? initialH2 + 10 : 360;
allFirstColors.each(function(i){
$(this).css("fill", `hsl(${initialH1}, ${50 + i * 20}%, ${50 - i * 10}%)`);
})
allSecondColors.each(function(i){
$(this).css("fill", `hsl(${initialH2}, ${50 + i * 20}%, ${50 - i * 10}%)`);
})
}, 200)
}
</script>
</body>
</html>