开发者如何生成配色方案：简易指南
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
作为全栈软件工程师或前端工程师，我们难免会遇到设计决策。从早期创业公司的小设计决策到创建自己的项目，我们可能都需要为不同的用户界面 (UI) 元素选择颜色。本指南旨在帮助您在项目未定义或未提供颜色的情况下，选择最佳颜色。
首先，大多数基础颜色都可以从许多热门网站复制，或者从下一章介绍的网站获取。这些预设的配色方案适用于您将创建的大多数 Web 应用程序，并能生成出色的设计。
热门配色方案网站
近年来，互联网上涌现出许多配色方案网站。其中大多数都经过精心挑选，可以作为满足自身需求的良好参考。但这些网站的一个缺点是，它们大多只展示五种颜色，而对于大多数应用来说，这远远不够。工程师通常会使用不透明度来区分不同的颜色色调，但不同的背景颜色可能会导致不同的效果。例如，不透明度为 100% 的黄色0.8在黑白背景上可能会呈现出截然不同的效果。
你可以看到中间和右侧的底色与左侧的底色有何不同。中间的底色是白色的，而右侧的底色是黑色的。这两种颜色完全不同，这表明你不应该使用这种模式来创建色调。要确定底色，我们可以使用以下配色方案网站之一。
coolors.co
coloros.co可能是最受欢迎的配色方案网站。它主要以配色方案生成器而闻名，但真正让该网站脱颖而出的是其探索或浏览菜单。精选的配色方案和最佳搜索筛选器提供了各种各样非常优秀的配色方案。
颜色和字体
colorsandfonts在设计资源领域算是一个新晋网站，但它在设计细节和精美案例展示方面表现出色。网站上的配色方案区分度很高，而且看起来很漂亮。您可以在这里找到这些配色方案。
颜色搭配的问题
通常情况下，调色板可以为颜色提供良好的基础，但对于大多数元素来说，五种颜色可能就显得不够用了。例如，按钮边框的颜色应该基本相同，但在获得焦点时略有不同。下图展示了如果我们使用不透明度会遇到的问题。
按钮在白色背景上效果很好，但在深色背景下，效果就大打折扣了。
相反，我们可以为边框生成一种新的颜色，这种颜色在深色和浅色背景上都能发挥作用，如下图所示。
图中右侧按钮边框的颜色更加一致，而且完全不透明。要生成这样的颜色，我们需要先学习HSL值，这将在下一章中进行讲解。
使用 HSL 而不是十六进制
网页开发者大多使用十六进制颜色代码。但遗憾的是，十六进制颜色代码并不适合用于设计。因此，我们引入了 HSL 的概念。它代表：
- 色相：是色轮上的一个角度，范围从0到360。
- 饱和度：从 0% 到 100%。0% 表示颜色完全变灰。
- 亮度：范围从 0% 到 100%。如果设置为 100%，颜色将为白色。如果设置为 0%，颜色将为黑色。
您可以在浏览器的开发者工具中很好地观察 HSL 颜色。在 Mac 上的 Chrome 浏览器中，只需按 CMD+Option+J 打开开发者工具即可。之后，color: hsl(0, 100%, 50%);对某些元素进行一些设置，即可在 Chrome 或 Firefox 中使用颜色选择器。
只需在S（饱和度）输入框中输入数值（示例中设置为 100%），然后尝试使用上下箭头键。您可以观察颜色选择器中圆圈的移动轨迹。当饱和度恢复到 100% 并使用上下箭头键调整 50% 的值时，人们可以感受到亮度变化如何影响颜色。
生成颜色色调
了解了 HSL 的工作原理后，就可以创建不同的颜色色调了。这非常简单。我们首先从 coolors.co 网站上一个流行的配色方案入手，选择以下基础颜色：
hsl(207, 95%, 8%)hsl(35, 100%, 55%)
现在，打开另一个名为“颜色生成器”的工具，我们可以看到已经生成了不同的颜色色调。由于之前选择的底色已经很深了，所以我们选择了一种更浅的颜色。我选择的颜色hsl(207, 95%, 45%)目前比较符合我们的需求。现在我们有两种颜色，一种是深色hsl(207, 95%, 8%)，另一种是浅色hsl(207, 95%, 45%)。
我们可以看到，HSL 代码中只有最后一个数字发生了变化，它代表亮度。从现在开始，我们可以从这些色调中构建 5、7 或 9 种颜色，从而得到不同的颜色组合，用作基础配色方案。通常，使用九种颜色进行规划比较好。不过，在这个例子中，我们将使用 5 种颜色。开始操作非常简单。取最深的颜色hsl(207, 95%, 8%)和最亮的颜色hsl(207, 95%, 45%)，我们尝试选择它们的中间色。这很容易，因为计算公式很简单，(45% + 8%) / 2即26.5%。现在将这个颜色代入 HSL 代码，我们得到的颜色hsl(207, 95%, 26.5%)目前勉强符合我们想要的色调。
现在，我们已经实现了上述功能，接下来可以添加缺失的颜色。同样的规则也适用于此。颜色计算方式与之前相同。上方的颜色通过以下公式计算：上方的颜色通过(26.5% + 8 %) / 2以下公式计算：下方的颜色通过以下公式17.25%计算：下方的颜色通过以下公式计算：最终，应该生成一个类似于下图的颜色方案。(26.5% + 45%) / 237.75%
这些蓝色调现在是该 Web 应用程序唯一需要的蓝色。理论上，这些蓝色调可以作为变量保存在项目的某个位置，并在 CSS、SCSS或 JS 中使用，例如在styled-components等 CSS 样式中使用。
现在，此方法可应用于基础配色方案中的所有颜色。
同时设计州色
状态颜色是所有设计的重要组成部分。绿色、黄色和红色是最常用的状态指示颜色。软件工程师需要为这些颜色设计配色方案。虽然大多数调色板都已包含这些颜色，但每个调色板都需要更多色调才能创建符合 Web 应用程序需求的界面设计。这意味着，正如上一章所述，这些颜色的色调也需要生成。
本指南中使用的基本配色方案，其调色板如下图所示。
第一个无色设计
对于非专业设计师而言，设计过程中一个重要的步骤是先创建无色原型。无色线框图有助于构建设计的整体结构。添加颜色是为了突出某些元素，并为用户提供一些使用提示。但设计的整体结构应首先取决于布局和组件的选择。
资源
- Figma 资源：https://www.figma.com/file/Yn0ta0mGXP6MBgrIKMHiev/generating-color-schemas-as-developer-a-simple-guide
- 基础配色方案：https://coolors.co/011627-fdfffc-2ec4b6-e71d36-ff9f1c
- 所有颜色均以 JavaScript 变量形式表示：https://gist.github.com/igeligel/fb6d630597b3c900634206035327919c