使用CSS生成颜色

# 使用 CSS 生成色彩 来源：https://gomakethings.com/articles/generative-colors-with-css/ 我刚刚更新了我网站的 CSS，改用 Kelp UI (https://kelpui.com/) 的一个分支，它包含了比以前更一致且易于维护的类系统。 **快速说明：** 如果你在浏览过程中发现任何错误，请告诉我！(https://gomakethings.com/) 虽然整体外观与之前大致相同，但最大的变化在于色彩调色板。 我现在利用 CSS 函数 `oklch()` 的相对颜色功能，仅通过定义为 CSS 变量的六个十六进制代码，动态生成站点的所有颜色。 让我们来看看它是如何工作的！ ## CSS 函数 `oklch()` CSS 函数 `oklch()` 允许你通过定义以下属性来创建一种颜色： - **亮度（Lightness）** — 感知的明亮程度。 - **色度（Chroma）** — 颜色的鲜艳程度或饱和度。 - **色相（Hue）** — 表示颜色的数字。 例如，我为此网站使用的蓝色 `#007ab8`，在 OKLCH 中表示为 `oklch(55.48% 0.131 241.70)`。 `oklch()` 函数之所以酷，在于一旦你有了颜色的 L、C 和 H 值，你就可以通过略微调整*亮度*和*色度*，从你的*色相*中创建完整的调色板。 例如，我可以通过稍微降低*亮度*来创建该蓝色的更深色调：`oklch(48% 0.131 241.70)`。 ***注意：** 除了 `oklch()` 之外，还有其他颜色函数，包括 `rgb()`、`oklab()` 等。我发现 `oklch()` 是最容易使用的。* ## 相对颜色 手动使用 `oklch()` 创建颜色调色板是一项繁琐的工作，我不推荐这样做。 这就是相对颜色（https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Using_relative_colors）的用武之地！ 通过将 `from` 操作符后跟一种颜色（可以是十六进制值*或*其他颜色函数），`oklch()` 函数会为你将该颜色转换为 `l`、`c` 和 `h` 值（百分比以小数表示）。 ```css :root { --color-blue: oklch(from #007ab8 l c h); } ``` 这里，我直接将生成的变量原样传递，没有做任何更改。 但——这才是真正强大的地方——你可以手动覆盖它们的值，甚至使用 `calc()` 数学函数来调整这些值。 让我们通过程序化地将*亮度*（`l`）降低 5% 来创建一个更深的蓝色。我无需关心或知道实际的起始值是多少。 ```css :root { --color-blue-darker: oklch(from #007ab8 calc(l - 0.05) c h); } ``` ## 关于亮度和色度的快速说明 非常亮和非常暗的*亮度*水平往往看起来过于饱和。 因此，许多调色板在从中间范围的*亮度*向边缘移动时，略微降低*色度*会显得更加协调。 ## 生成整个调色板 让我们看看如何利用 `oklch()` 和一点数学，从一个十六进制代码生成一个 11 色调色板。 首先，我们将颜色定义为 CSS 变量。 ```css :root { --color: #007ab7; } ``` 接下来，我们创建一系列命名的颜色变量，从 `--color-05` 到 `--color-95`。 对于每个变量，我们将从我们的 `--color` 变量（使用 `from`）生成颜色。我们将调整亮度（`l`），但暂时保持色度（`c`）不变。 ```css :root { --color: #007ab7; --color-05: oklch(from var(--color) 18.5% c h); --color-10: oklch(from var(--color) 24% c h); --color-20: oklch(from var(--color) 32.5% c h); --color-30: oklch(from var(--color) 40% c h); --color-40: oklch(from var(--color) 45% c h); --color-50: oklch(from var(--color) 57% c h); --color-60: oklch(from var(--color) 67% c h); --color-70: oklch(from var(--color) 75% c h); --color-80: oklch(from var(--color) 83.5% c h); --color-90: oklch(from var(--color) 92% c h); --color-95: oklch(from var(--color) 96% c h); } ``` 这是调色板的演示。(https://codepen.io/cferdinandi/pen/MYbWQxx) ## 调整色度 你可能注意到最浅的色调仍然相当鲜艳。如果你将它们用作柔和的背景色，它们可能有点过于强烈。 为了解决这个问题，我们将使用 `calc()` 函数和一点数学，在调色板边缘附近略微降低色度。 经过反复试验，我找到了在调色板每一步调整色度时我喜欢的一组百分比。为了让数学生效，我将色度（`c`）除以 `0.2`，然后乘以该百分比。 为什么除以 `0.2`？在 OKLCH 中，`0.4` 表示 100% 饱和度。颜色很少能达到那样的饱和度。使用 50% 的饱和度可以为其余数学计算提供一个良好的基线。 ```css :root { --color: #007ab7; --color-05: oklch(from var(--color) 18.5% calc(0.08 * (c / .2)) h); --color-10: oklch(from var(--color) 24% calc(0.1 * (c / .2)) h); --color-20: oklch(from var(--color) 32.5% calc(0.135 * (c / .2)) h); --color-30: oklch(from var(--color) 40% calc(0.16 * (c / .2)) h); --color-40: oklch(from var(--color) 45% calc(0.185 * (c / .2)) h); --color-50: oklch(from var(--color) 57% calc(0.2 * (c / .2)) h); --color-60: oklch(from var(--color) 67% calc(0.175 * (c / .2)) h); --color-70: oklch(from var(--color) 75% calc(0.13 * (c / .2)) h); --color-80: oklch(from var(--color) 83.5% calc(0.085 * (c / .2)) h); --color-90: oklch(from var(--color) 92% calc(0.04 * (c / .2)) h); --color-95: oklch(from var(--color) 96% calc(0.02 * (c / .2)) h); } ``` 这是调整色度后的调色板。(https://codepen.io/cferdinandi/pen/ogYNpaV) 注意调色板变得更为柔和，尤其是在最亮和最暗的色调上。 ## 手动覆盖色度 有时，所选取颜色的色度要么过于柔和，要么过于鲜艳，效果不佳。我希望有一种方法可以手动上下调整，而无需寻找更好的十六进制值。 为了支持这一点，我更新了色度的 `calc()` 函数，使用 `--chroma` 变量作为起点。 CSS 变量允许你传入后备值。我使用 `c / .2` 作为默认值，如果定义了 `--chroma`，则使用它。 我使用的蓝色 `#007ab7`，其 `c / .2` 值约为 `0.65`。这里，我将 `--chroma` 设置为 `0.95`，使其明显更亮或更鲜艳。 ```css :root { --color: #007ab7; --chroma: 0.95; --color-05: oklch(from var(--color) 18.5% calc(0.08 * var(--chroma, c / .2)) h); --color-10: oklch(from var(--color) 24% calc(0.1 * var(--chroma, c / .2)) h); --color-20: oklch(from var(--color) 32.5% calc(0.135 * var(--chroma, c / .2)) h); --color-30: oklch(from var(--color) 40% calc(0.16 * var(--chroma, c / .2)) h); --color-40: oklch(from var(--color) 45% calc(0.185 * var(--chroma, c / .2)) h); --color-50: oklch(from var(--color) 57% calc(0.2 * var(--chroma, c / .2)) h); --color-60: oklch(from var(--color) 67% calc(0.175 * var(--chroma, c / .2)) h); --color-70: oklch(from var(--color) 75% calc(0.13 * var(--chroma, c / .2)) h); --color-80: oklch(from var(--color) 83.5% calc(0.085 * var(--chroma, c / .2)) h); --color-90: oklch(from var(--color) 92% calc(0.04 * var(--chroma, c / .2)) h); --color-95: oklch(from var(--color) 96% calc(0.02 * var(--chroma, c / .2)) h); } ``` 这是带手动 `--chroma` 覆盖的调色板。(https://codepen.io/cferdinandi/pen/zxoYpeL) 请随意尝试 `--chroma` 的值，甚至完全移除它，看看调色板如何响应变化。 ## CSS 就是编程语言 我希望这篇文章能清楚地说明 CSS 确实是一种编程语言，而且可以完成许多以前需要 JS 或手动编码才能完成的酷事情。 这一更新让处理颜色变得容易得多，我迫不及待地想要将其带入 Kelp (https://kelpui.com/) 中。