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>

请注意， Angular 可以使用 rad 表示和 turn .默认情况下，无单位值被视为 deg .如果学位介于0之间和 360 , turn 仅在 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>