Question

我有三种颜色，我试图去饱和/饱和，调整亮度和调整色调，因为较浅和较暗的HSL不同于基色。

最后，我可以添加另一种颜色作为主要颜色，并根据此颜色设置新的配色方案。希望这是有道理的。

如何使用HSL颜色执行此操作？以下是我在HSL中的颜色：

$primary: hsl(204, 64%, 44%);
$primary-dark: hsl(203, 64%, 23%);
$primary-light: hsl(204, 51%, 55%);

这里他们是十六进制的：

$primary: #2980B9;
$primary-dark: #154360;
$primary-light: #5499C7;

这是我迄今为止所尝试过的，但它都没有奏效 - 它没有给我正确的颜色代码。它总是偏离几个数字。例如，在示例中，$ primary-light最终为＃5298c7，当我希望它为＃5499C7时。

Example one， example two

编辑：我已经意识到在示例二中，调整色调函数我减去了1deg，根本没有做任何事情。这意味着我需要改变我应用这些颜色功能的格式，对吧？有没有办法可以将它们全部包含在一个函数/ mixin中？对不起，如果这最终听起来令人困惑，只是想弄明白。

Answer 1

您可以使用color functions中的内容来提取颜色成分例如：

// Your base color
$primary: hsl(204, 64%, 44%); 

// Get all color components and store them to variables
$hue:        hue($primary);
$saturation: saturation($primary);
$lightness:  lightness($primary);

// New color hue
$new-hue: 200;

// Create new color from existing color components
// using hsl() constructor
$color: hsl(
  $new-hue, 
  $saturation, 
  $lightness
);

a {
  // Use new color
  color: $color;
}

您可以从设置为RGB的颜色中提取色调（例如）组件：$hue: hue(#f00);。

Sass：正确的三种HSL颜色之间的色调和饱和度差异

1 个答案: