在 sass 中实现颜色公式来定义调色板

Question

所以通过'图形设计'堆栈交换，我发现我需要使用这个颜色公式来计算我的调色板的色调：

Y=255 - P*(255-X) where X is a RGB number, P=opacity (0...1), Y=new RGB number 

基本上我有许多基色，我需要根据白色背景上不透明度的颜色看起来如何，找到一些较浅的版本。这个公式背后的理论应该有效，但我不知道如何在 sass 中实现它（我还没有正确测试过这个公式）。

为了简单起见，假设我有 1 种基色：

$primary: #FFA789;

并且我希望该颜色的色调与 50% 的不透明度级别的输出相同。

$primary-light: rgba(#FFA789, .5);

但是我根本不希望颜色不透明。但我想要与 $primary-light 值相同的色调。 - 这应该可以通过公式来实现。

Answer 1

我猜您在获取定义颜色的 R、G 和 B 值时遇到了问题。您可以使用 red()、green() 或 blue() 函数来做到这一点。

所以，你必须这样做，

$active-color: #0074D9;
$opacity: 0.5;
$sec-color: rgb(255 - $opacity*(255 - red($active-color)), 255 - $opacity*(255 - green($active-color)), 255 - $opacity*(255 - blue($active-color)));

如果你只需要修改一个或两个 RGB 值，你可以使用 change_color() 函数，例如，

$secondary-color: change-color($active-color, $blue: 255 - $opacity*(255 - blue($active-color)), $green: 255 - $opacity*(255 - green($active-color)));