如果我有原始颜色和黑暗颜色，我如何确定在Sass中使用它变暗的百分比？

Question

Sass语言具有名为 darken 的函数，该函数有两个参数：颜色和要使颜色变暗的百分比。我只知道原始颜色和产生的颜色。如何确定传递给变暗函数的百分比值以及原始颜色？

darken(#e8e8e8, ???) // returns #c1c1c1

Answer 1

对于变暗（也可能变亮），您需要计算两种颜色的亮度值之间的差异：

@function color-difference($c1, $c2) {
  $c1: lightness($c1);
  $c2: lightness($c2);
  @return max($c1, $c2) - min($c1, $c2);
}

$color1: #e8e8e8;
$color2: #c1c1c1;

.foo {
  // guessed the percentage manually
  test: darken($color1, 15.25%);
  // check our percentage
  test: color-difference($color1, $color2);
  // do we get the same result?
  test: darken($color1, color-difference($color1, $color2));
}

输出：

.foo {
  test: #c1c1c1;
  test: 15.2941176471%;
  test: #c1c1c1;
}

Answer 2

您可以使用rgba()，其中rgb是reg，绿色，蓝色和＆＃39; a＆＃39;是阿尔法。您可以使用alpha而不是百分比。