Sass颜色变换计算

2023年8月29日 275次阅读

我有两种颜色的蓝色(#1E95EF – >#1988DD),并且需要找出已发生的颜色转换,以便将其复制到调色板中的其他颜色(红色,绿色等).

我使用了darken()/ lighten()&的组合. saturate()/ desaturate()眼球转化,并且已经非常接近：

去饱和(变暗(#1E95EF,4.5％),8％); ===#1A88DC

但我需要完全正确,因此我用小数百分比制作的小错误不会在所有颜色中复制.我怎样才能确切地知道发生了什么变换？

这是我尝试过的：

sassmeister gist

在这个片段中,我的示例的相关类是.ga-primary和.ga-primary-hover

最佳答案 您可以根据您使用的颜色模型/空间以不同方式测量颜色之间的差异.十六进制颜色使用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

显然,代码可以被压缩很多 – 我认为你真正想要的是将变量定义为一组饱和/亮度变化,然后将它们应用到整个调色板中(而不是试图’逆向工程’它来自一个例子对).如果您需要帮助,请告诉我！

点赞