我如何获得将参数传递给 lighten() 函数的百分比，从而使一种颜色变为另一种颜色？

Question

我正在使用 HTML 5、JavaScipt 和 CSS 开发一个小项目。我使用 SASS 作为预处理器。

在

_variables.scss

中，我有一组颜色变量，像这样：

$success: #00875d;
$primary: #297fe1;
$danger: #bc133d;

我还需要获得上述颜色的小变化，具有给定的值.

例如，从 $success 颜色，我需要通过 SASS

#a7cabf

函数获得更轻的绿色变体

lighten()

。

问题：

我一直无法找到一种方法/工具来获取作为第二个参数传递给

lighten()

（或

darken()

）函数的百分比，以从另一种颜色中获取一种颜色。例子：

background: lighten($success, 9.5%)

问题：

1. 解决这个问题的可靠方法是什么？
2. 我可以使用在线工具来达到预期的结果吗？

Answer 1

您可以使用 Adobe Color 之类的工具选择您的基色（$success），然后使用色轮选择较浅的绿色阴影（#a7cabf）。该工具将显示亮度 (L) 或亮度 (B) 的百分比差异，然后您可以将其用作 lighten() 函数中的第二个参数。

另一种查找两种颜色之间百分比差异的方法是使用公式手动计算。例如，您可以使用以下公式根据亮度值计算两种颜色之间的百分比差异：

百分比（（亮度（$color2） - 亮度（$color1））/ 100）

• 在你的情况下。

$percent: percentage((lightness($lighter-green) - lightness($success)) / 100);

.my-element {
  background-color: lighten($success, $percent);
}