Question

我有两种颜色的蓝色（＃1E95EF - ＆gt;＃1988DD），并且需要找出已发生的颜色转换，以便将其复制到调色板中的其他颜色（红色，绿色等）。

我使用了darken()/lighten()＆amp;的组合saturate()/desaturate()注意转变，并且已经非常接近：

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

但我需要完全正确，因此我用小数百分比制作的小错误不会在所有颜色中复制。我怎样才能弄清楚究竟发生了什么转变？

这是我尝试过的：

sassmeister gist

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

Answer 1

您可以使用不同的方式测量颜色之间的差异，具体取决于您使用的颜色模型/空间。十六进制颜色使用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

显然代码可以被压缩很多 - 我认为你真正想要的是将你的变体定义为一组饱和/亮度变化，然后将它们应用到你的整个调色板（而不是试图＆＃39;从一个示例对中对其进行逆向工程）。如果您需要帮助，请告诉我们！

Sass颜色变换计算

1 个答案: