Sass 的颜色调整导致 HSL 到 HEX 错误答案

【问题标题】：HSL to HEX mistakes with Sass' adjust-colorSass 的颜色调整导致 HSL 到 HEX 错误
【发布时间】：2017-07-20 13:16:23
【问题描述】：

我已经尝试解决这个问题一个月了，但没有任何效果。我有 3 种颜色需要计算 HSL 之间的差异。我做了并使用了调整颜色应用了差异，以便以后可以添加另一种颜色作为基础。

但是 HSL 到 HEX 并不能在任何地方正确转换。在主要深色的情况下，它返回我想要的颜色（即#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！

这里发生了什么？我一直在阅读我能找到的所有内容，并疯狂地经历，询问有关它的问题，但什么也没有！帮助，任何人！

【问题讨论】：

标签： css colors sass

【解决方案1】：

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

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

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

为了解决这个问题，我可能会建议使用本机 HSL 值，而不是将它们转换为 HEX，除非在您的代码中需要这样做。 Support for HSL 看起来不错。

【讨论】：