CSS Color Palette

CSS 颜色选板的创建技巧

我们知道现在有“暗黑模式”和“亮白模式”吗？此外，“暗黑”和“亮白”颜色方案也包含在浏览器的默认样式中。浏览器可以使用（或选择使用）CSS 的 `color-scheme` 属性来显示具有其暗黑或亮白默认样式的特定组件。

为网站选择颜色方案是一项艰巨的任务。设计、色彩理论和对比度理解都是这一过程的关键。

在完整的网页设计过程开始时，我们通常会从 Figma 等设计工具开始。借助此设计工具，我们可以仔细地创建我们的想法，测试各种颜色组合，并最终确定最终项目的最终外观。

可以使用各种架构技术结合 CSS 和 HTML，从完成的设计中创建可行的原型。本课程主要关注在实现设计时用于创建和使用颜色方案的 CSS 方法。

随着课程的进展，我将演示三种用于开发和使用颜色方案的 CSS 方法，其中两种方法得到了专家的信任。我还将讨论目前实验性的 LCH 和 LAB 颜色函数，用于相对颜色。

如果您对色彩理论有基本了解，则可以采用以上任何一种策略，无论是否采用设计策略。在深入细节之前，让我们回顾一些基本的网页设计和配色概念。

了解 60-30-10 设计法则

经典的 60-30-10 设计法则是所有着色和装饰项目的一般指南。网页也不例外；从这个准则开始可以简化您的颜色方案创建。

• 在 60-30-10 法则中，每对数字代表不同的颜色权重。为简单起见，我们将它们分别称为主色、次色和强调色。
• 主色占据尽可能多的设计“空间”，即页面上大约 60% 的区域。例如，它通常是背景色。
• 其次是次色，占据设计空间的约 30%。浮现在主色之上的文本组件的颜色通常是次色。
• 强调色，仅应占设计区域的大约 10%，用于突出重要但细微的设计元素。强调色的最常见位置是号召性用语按钮和超链接。

这种在 UI 中均匀分布颜色的方法将使我们免于在设计中过度使用过多颜色而产生混乱的颜色方案的麻烦。

探索色彩对比度和和谐的想法

色彩和谐使视觉体验更加有序和平衡。当设计在美学上不和谐时，观众会感到厌倦或混乱。

色彩对比度是色彩和谐的关键组成部分，用于衡量一种颜色相对于另一种颜色的可读性或可访问性。在选择最终颜色之前，设计师应确保色彩对比度足以满足色彩可访问性指南。

色彩理论原理还提供了一些选择和谐色的通用策略。研究两种方法将帮助我们稍后在文本中创建颜色选板。

互补色

颜色在色轮上排列成一个圆圈。因此，您可以使用与颜色在色轮上的位置相对应的度数值来表示一种颜色。

互补色包括色轮上直接相对的任何两种色调，例如红色和青色或蓝色和黄色。您可以通过相对于特定颜色 180 度来确定互补匹配。

根据理论，互补色能产生最大的对比度和稳定性，使设计在色彩方面更具美感。在本篇文章的后面部分，我们将讨论互补色如何创造色调的对立面。

类似色

如果三个颜色出现在 12 部分的色轮上，例如黄绿色、黄色和黄橙色，那么它们就被称为类似色。特定色调的类似对应项是通过在其基础上加减 30 度来计算的。

类似色选择通常令人放松且具有美感。通过使用这些类型的颜色组合，我们可以避免手动从色轮中选择随机颜色并重新检查其和谐性的麻烦。

现在我们对颜色和设计理论有了广泛的了解，让我们继续进行技术方面，即使用 CSS 创建颜色选板的几种策略。我们将采用 HSL 颜色模型来实现简单且适应性强的颜色方案。

用于创建颜色选板的 CSS SASS 变量

虽然如今使用 CSS 最好通过自定义属性和 `calc()` 来完成，但熟悉 Sass 等预处理器的开发人员也可以使用此方法。与此策略相比，使用此策略的最有力理由是 CSS 预处理器比原生 CSS 提供更精细的东西的控制。

让我们选择一个色调并完全用 Sass 变量创建颜色方案

$hue: 150;

根据我们之前讲的内容，让我们构建三个函数，它们接受 $hue 值并生成其互补色和类似色。有两种不同的函数用于获取给定色调的左侧和右侧类似邻近色。

让我们使用这些 Sass 函数计算我们在本节开头定义的 $hue: 150; 的互补色和类似色。

我们现在可以使用四种不同的色调值中的一种来制作我们的主色、次色和强调色。考虑到它们的预期用途，通过修改 HSL 参数的饱和度和亮度，可以按以下方式声明这些颜色值：

次色必须与主色形成有效对比，主色将占据大部分屏幕区域。次色是互补色，因为它最能实现此功能。

如果我们生成的任何类似色足够饱和，可以使强调色适合突出显示的细节，那么这些类似色就可以作为我们的强调色。

最后，我们可能需要我们主色的更深色调来装饰边框和分隔线。同样，我们次色的更浅版本可以代表不太重要的文本元素，例如字幕和标签。

在上一节中，我们使用数字 500、600 和 900 来表示颜色的相对亮度。这有助于我记住特定颜色值的重要性。

考虑到强调色将是 CTA 等突出显示组件的背景，因此规划一些与强调色形成鲜明对比的颜色将是一个明智的决定。

使用 CSS 变量和 HSL 创建颜色选板

此方法基本上相当于用 CSS 变量替换上一种策略中的 Sass 功能。我们可以只使用 `calc()` CSS 函数进行计算。然而，这不像 Sass 那样为我们提供 DRY 策略。

我们仍然可以通过在开发前端结合 Sass 来利用此技术的优势。为了保持简单，我不会在此示例中使用 Sass，但作为一项练习，您可以选择结合 Sass 和此技术。

从上图可以看出，我们必须手动确定互补色和类似色。其余步骤与前一种方法类似，只是改用 CSS 自定义属性（例如 `var(--hue)`）而不是 Sass 变量。