CSS：为什么将十六进制颜色转换为 hsl，然后再转换回十六进制会导致不同的值

Question

我发现的奇怪的事情。当转换#579f2f为 hsl 时，我到达hsl(99, 54%, 40%);. 当将其转换回十六进制时，我得到#559d2f。我使用了各种在线工具来测试这一点。

我猜原因是 hsl 将颜色描述为色调 (0-360)、饱和度 (0-100%) 和亮度 (0-100%)，而十六进制只是 RGB (0-255,0-255,0-255 ）写为三个十六进制数，因此 hsl 描述的颜色空间（或您可能表达的颜色数量）是不同的。

RGB: 255^3 = 16,581,375 colors
HSL: 360*100*100 = 3,600,000 colors

我的这个假设是正确的还是有其他原因？

Answer 1

从技术上讲，符号不仅hsl可以与整数一起使用。<number>这使得可能的颜色比您已经计算的更多，并且可以覆盖所有 RGB 颜色

$('.box').each(function() {
  console.log($(this).css('background-color'));
});

.box {
 height:40px;
 margin:10px;
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" style="background-color:hsl(12deg,11%,51%)"></div>
<div class="box" style="background-color:hsl(11.9deg,10.9%,50.9%)"></div>
<div class="box" style="background-color:hsl(11.1deg,10.9%,50.5%)"></div>
<div class="box" style="background-color:hsl(11.1deg,10.1%,50.5%)"></div>
<div class="box" style="background-color:hsl(11.1deg,10.1%,50.1%)"></div>
<div class="box" style="background-color:hsl(11deg,10%,50%)"></div>

请注意，角度可以使用rad和来表示turn。默认情况下，无单位值被视为deg。如果度数介于0和 之间360，则转弯仅介于0和1之间，而弧度介于0和PI (3.14)^ref之间

$('.box').each(function() {
  console.log($(this).css('background-color'));
});

.box {
 height:40px;
 margin:10px;
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" style="background-color:hsl(1.12rad,11%,51%)"></div>
<div class="box" style="background-color:hsl(1.125rad,10.9%,50.9%)"></div>
<div class="box" style="background-color:hsl(1.125rad,10.9%,50.5%)"></div>
<div class="box" style="background-color:hsl(1.13rad,10.1%,50.5%)"></div>
<div class="box" style="background-color:hsl(1.134rad,10.1%,50.1%)"></div>
<div class="box" style="background-color:hsl(1.132rad,10%,50%)"></div>