3

我正在创建一个网站，因为我非常喜欢使用 SASS/Compass 来组织我的 CSS，所以我想到了让我的网站主题化的想法。

起初，我想简单地拥有一组表示主题调色板颜色的 8 个变量。接下来，所有 CSS 规则都将使用这些颜色，或者它的变亮/变暗版本（用于阴影、覆盖、渐变和发光）。

然后我想到了一个疯狂的想法，即拥有一个单一的主题基色，之后调色板的其余部分就是从中计算出来的。例如：

在此处输入图像描述

在这个工具中，我选择了一个单一的基色（圆圈内部的绿色），然后它基于它生成了一个完整的调色板（见右图），在这种情况下它是一个“模拟”配色方案。

我的问题是这个工具使用的算法是否可以在 SASS 中复制，这样我就可以有一个可配置的颜色，而 SASS 计算颜色方案的其余部分。

我知道你们中的一些人可能会怀疑这个练习的用处，但我认为这是一个有趣的实验。

4

2 回答 2

2

一方面，那个色轮是不正确的。红色的补色是青色，而不是绿色。此外，正确的术语是“类比”，而不是“类比”。我个人认为这个网站更好。

要创建一个基本的类似配色方案，您需要拥有的第一件事是将颜色转换为 HSL（或类似的基于色调）形式的方法。假设你有这个，类似的 3 色方案的基本算法是：

Inputs: BaseColor, HueVariation

Color1 = BaseColor
Color2 = ColorFromHSL(Hue(BaseColor) + HueVariation, Saturation(BaseColor), Lightness(BaseColor))
Color3 = ColorFromHSL(Hue(BaseColor) - HueVariation, Saturation(BaseColor), Lightness(BaseColor))

维基百科有更多信息。

于 2012-06-14T22:08:13.763 回答
1

您正在寻找的是色彩和谐。有许多预定义的方案可以帮助您生成这样的和声。通常，它们基于 HSL 颜色空间而不是 RGB 颜色空间。

这是您可以使用的链接：

http://www.tigercolor.com/color-lab/color-theory/color-harmonies.htm

http://sputnik.freewisdom.org/lib/colors/

您可能还想尝试在 google 中搜索其他方案。

大多数情况下，方案适用于任何给定的输入颜色，因此您可以为一种颜色创建自定义方案并将其应用于另一组颜色。

于 2012-06-14T21:26:14.733 回答