Это всё замечательно, но оно работает не правильно.
Как бы вообще условия не соблюдаются.
1) Цветовые каналы первой колонки блоков на второй итерации должны отвечать цветовым каналам второй колонки блоков что значит:
.first_st1{fill: hsl(1, 50%, 50%); должен стать fill: hsl(11, 50%, 50%);}
.first_st2{fill: hsl(1, 70%, 40%); должен стать fill: hsl(11, 70%, 40%);}
.first_st3{ fill: hsl(1, 90%, 30%); должен стать fill: hsl(11, 90%, 30%);}
Соответственно для второй колонки блоков
.second_st1{fill: hsl(11, 50%, 50%); должен стать fill: hsl(21, 50%, 50%);}
.second_st2{fill: hsl(11, 70%, 40%); должен стать fill: hsl(21, 70%, 40%);}
.second_st3{ fill: hsl(11, 90%, 30%); должен стать fill: hsl(21, 90%, 30%);}
И так далие на каждой итерации...(когда значение h канала становиться >360 то прибавляется сколько возможно а остаток прибавляет к нулю) надеюсь так стало понятнее.
(Цифры 1 и 11 взяты для наглядности, на самом деле там в 3 квадратах совершенно разные цифры для h канала)
Ваш вариант выдает совершенно сказочные вещи если смотреть в консоль
<!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 + 20 < 360 ? initialH2 + 20 : 360;
allFirstColors.each(function(i){
$(this).css("fill", `hsl(${initialH1}, ${50 + i * 20}%, ${50 - i * 10}%)`);
console.log( $(this).css("fill") + " = first block" )
})
allSecondColors.each(function(i){
$(this).css("fill", `hsl(${initialH2}, ${50 + i * 20}%, ${50 - i * 10}%)`);
console.log( $(this).css("fill") + " = second block" )
})
}, 2000)
}
</script>
</body>
</html>