css - 在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)));