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

【问题标题】：CSS: Why does converting a hex color to hsl and then back to hex lead to a different valueCSS：为什么将十六进制颜色转换为 hsl 然后再转换回十六进制会导致不同的值
【发布时间】：2020-01-08 06:50:05
【问题描述】：

我发现的奇怪的东西。将#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

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

【问题讨论】：

#579f2f 的实际 HSL 将是 hsl(98.6, 54.4%, 40.4%) 所以我会说这是因为四舍五入。在这里试试：convertacolor.com
这是因为将 hsl 值四舍五入为 int。而且，是的，您可以使用 int hsl 颜色比使用 int rgb 颜色 cpver 更多颜色。
BTW rgb（8 位）有256^3，但请尽量不要假设 8 位值，并且 BTW 在 hsl 中，所有 S=0 或 L=0 的值都描述相同的颜色。
@OleSpaarmann 哎呀！我把它弄混了，对不起。使用 int rgb 和 hsl 肯定会在 rgb 空间中为您提供更多的 css 颜色。
@OleSpaarmann 对我来说它适用于 HSL 中的小数 jsfiddle.net/n2azqx9f/1 它不适合你吗？

标签： css rgb hsl

【解决方案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>

【讨论】：