Добрый день уважаемые. Столкнулся с не пониманием почему JS возвращает значения RGB каналов хотя в CSS задаю под HSL. В целом задача состоит такая- необходимо каждые две секунды менять значения цветов у квадратов. Первый и второй блоки (столбци) квадратов должны получать +10 к hue каналу каждые две секунды ( То есть после второй секунды у классов .first_st* должны быть значения h =11 а у классов .second_st* = 21 ).
Если значения h доходят до 360 то добавляется сколько возможно а затем всё стартует с нуля. (То есть на 36 итерации у классов .first_st* должны быть значения h =1 а у классов .second_st* = 11)
<!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 allFirstColors = $("[class^='first_st']"),
firstColorsLength = allFirstColors.length,
allSecondColors = $("[class^='second_st']"),
secondColorsLength = allFirstColors.length;
var h,s,l;
console.log(" st1 = " + $(".first_st1").css("fill") ); // Почему возвращает RGB каналы?
allFirstColors.each(function(indx, el){
let color = $(el).css("fill"),
[h,s,l] = color.match(/\d+/g);
console.log("[h,s,l] = " + [h,s,l]);
});
}
</script>
</body>
</html>