Sass 颜色变换计算

Question

我有两种蓝色调（#1E95EF -> #1988DD），需要弄清楚发生的颜色转换，以便将它复制到我调色板中的其他颜色（红色、绿色等） .

我使用了 darken()/lighten() 和 saturate()/desaturate() 的组合来观察转变，并且非常接近：

desaturate(darken(#1E95EF, 4.5%), 8%); === #1A88DC

但我需要让它完全正确，这样我在百分比小数点上犯的小错误就不会在所有颜色上重复出现。我怎样才能弄清楚到底发生了什么转变？

这是我尝试过的：

sassmeister gist

在此代码段中，与我的示例相关的类是 .ga-primary 和 .ga-primary-hover

Answer 1

您可以通过不同的方式衡量颜色之间的差异，具体取决于您使用的颜色 model/space。十六进制颜色使用 RGB，但 HSL 模型在这里更有用。它将颜色记录为 3 个值：色调、饱和度和亮度。

我们可以使用 SASS 的 HSL 函数计算出颜色的每个值有何不同，然后有选择地将该差异应用到其他颜色：

$start-color: #1E95EF
$end-color: #1988DD

//We won't need the hue-difference in practice
$hue-difference: hue($start-color) - hue($end-color)

//These express the difference as a percentage
$saturation-difference: saturation($start-color) - saturation($end-color)
$lightness-difference: lightness($start-color) - lightness($end-color)

@function color-adjust($base-color)
  //Apply the lightness and saturation changes but keep the original Hue
  @return hsl(hue($base-color), saturation($base-color) + $saturation-difference, lightness($base-color) + $lightness-difference)

//To find the adjusted color, just pass whatever base color you like to the color-adjust function:
background: color-adjust(red)

这里有几个颜色的演示：http://codepen.io/anon/pen/bqOaZZ

显然，代码可以压缩很多 - 我认为您真正想要的是将变体定义为一组 Saturation/Lightness 更改，然后将它们应用于整个调色板（而不是试图从一对示例中 'reverse-engineer' 它）。如果你需要帮助来做这件事，请告诉我！

Sass 颜色变换计算

Sass color transform calculation

hsl

sass