Sass: 三个HSL颜色之间正确的色调和饱和度差异处理

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。 示例一, 示例二。

编辑：我意识到在示例二中，我减去1deg的调整色相函数根本不起作用。这意味着我需要改变如何应用这些颜色函数的格式，对吧？有没有办法将它们全部包含在一个函数/混合中？抱歉如果这听起来令人困惑，只是想找出答案。

- Retros

---

这超出了我的能力范围。但是也许W3C文档中有什么可以帮助你的东西？https://www.w3.org/TR/css3-color/ - JGFMK

Answer 1

您可以使用内置的颜色函数来提取颜色组件。
例如：

// 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);。

- 3rdthemagical

---

对回复晚了表示抱歉，但如果我必须添加另一种颜色作为主色调，那么它该如何工作呢？这样会改变颜色方案吗？ - Retros

例如，我尝试了这个，以便能够使其可重用并与其他颜色方案配合使用，但它没有起作用，也没有给我正确的颜色代码：https://codepen.io/anon/pen/EXQGRG。 我做错了什么？ - Retros

或者类似这样，尽管颜色代码仍然与原始的primary-dark不同：https://codepen.io/anon/pen/eRVxWa - Retros