css - HSL 到 HEX 错误与 Sass 的调整颜色

Question

一个月来我一直在努力解决这个问题，但没有任何效果。我有 3 种颜色需要计算 HSL 之间的差异。然后我使用 adjust-color 应用了差异，以便稍后可以添加另一种颜色作为基础。

但是 HSL 到 HEX 并不是在任何地方都能正确转换。在 primary-dark 的情况下，它返回我想要的颜色(#154360)。但是在主光的情况下它不会(我试图得到的颜色是#5499C7，我实际得到的颜色是#5298c7)。这没有任何意义，因为我正确计算了所有内容，应该没有问题。

这是我写的:

$primary: hsl(204, 64%, 44%);
$primary-dark: adjust-color($primary, $lightness: -21%, $hue: -1deg);
$primary-light: adjust-color($primary, $saturation: -13%, $lightness: 11%);

这是 codepen !

这是怎么回事？我一直在阅读我能找到的所有内容并疯狂地浏览，询问有关它的问题，但什么也没有!帮助，任何人!

Answer 1

我认为这只是以不同于您预期的方式对数字进行四舍五入的问题。

当然RGB和HEX基本上是相同的三对数，它们之间的转换是无缝的，但是HSL的转换要比这复杂的多。我不会进入数学，但是 here it is如果有人想阅读。

请注意，在元素检查器控制台(在 Chrome 中)中，您可以单击颜色值旁边的彩色方 block 并在 HSL、RGBA 和 HEX 之间切换。如果您将“正确”的 HEX 更改为 HSL，然后再更改回 HEX，您将得到“不正确”的 HEX。这可能是这个计算本身的四舍五入方式，而不是 SASS 本身的问题。

要解决此问题，我可能会建议使用 native HSL 值而不是将它们强制转换为 HEX，除非您的代码中有必要这样做。 Support for HSL看起来还不错。