0Pricing
CSS Academy · 课时

color-mix() 与相对颜色语法

使用现代 CSS 颜色函数混合颜色并创建颜色变体。

color-mix() 与相对颜色语法 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

color-mix() 函数

color-mix() 会在指定的色彩空间中混合两种颜色。无需 Sass 或 JavaScript，它就能根据设计令牌生成颜色变体。

  <button class="button-hover">Hover-mixed button</button>

color-mix() 语法

完整语法：color-mix(in <color-space>, <color-1> [percentage], <color-2> [percentage])。百分比之和必须为 100%。

  <div class="mix-equal">Equal mix</div>
  <div class="mix-weighted">Weighted mix</div>

color-mix() 中的色彩空间

色彩空间会影响混合结果。像 oklch 这样的现代感知色彩空间，比 srgb 产生的视觉结果更加均匀：

  <div class="oklch-mix">OKLCH mix</div>
  <div class="srgb-mix">sRGB mix</div>

使用 color-mix() 生成色彩比例

根据单一品牌色创建一致的调色板：

  <span class="swatch swatch-100"></span>
  <span class="swatch swatch-300"></span>
  <span class="swatch swatch-700"></span>
  <span class="swatch swatch-900"></span>

相对颜色语法

相对颜色允许您通过修改现有颜色的特定通道来派生新颜色。请使用 from 关键字：

  <p class="darker">20% darker text</p>
  <p class="desaturated">Half saturation text</p>

使用相对颜色创建透明变体

无需知道品牌色的 RGB 值，即可创建它的透明版本：

  <div class="overlay">Overlay</div>

调亮与调暗

在 oklch 中增加或减少明度，以创建浅色和深色变体：

  <div class="card demo-active">Card</div>

oklch 色彩空间概览

OKLCH 是一种感知均匀的色彩空间：

  • l — 明度（0 到 1）
  • c — 色度/饱和度（0 到 0.4+）
  • h — 色相角（0 到 360）

调整 l 可以得到视觉上可预测且均匀的浅色和深色变体。

浏览器支持

color-mix() 受到 Chrome 111+、Firefox 113+、Safari 16.2+ 的支持。相对颜色语法（from 关键字）受到 Chrome 119+、Safari 16.4+、Firefox 128+ 的支持。请在 caniuse.com 上查看当前的支持情况。

color-contrast() 未来支持

color-contrast() 是一个提议中的函数，可以从颜色列表中自动选择与指定背景形成最易读对比的颜色。浏览器目前尚未支持它，但它的设计目标是实现以无障碍为导向的主题功能。

快速检查

哪个 color-mix() 色彩空间可以产生视觉上最均匀的混合结果？

回顾

color-mix(in oklch, color1 %, color2 %) 会在指定的色彩空间中混合颜色，非常适合根据单一品牌色创建浅色、深色和透明变体。相对颜色语法（oklch(from var(--brand) calc(l+0.2) c h)）可以通过修改单个通道来派生新颜色。OKLCH 是获得感知均匀结果的最佳色彩空间。

常见问题解答

「color-mix() 与相对颜色语法」课时是免费的吗？

是的 — 「color-mix() 与相对颜色语法」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「color-mix() 与相对颜色语法」这节课中我会学到什么？

使用现代 CSS 颜色函数混合颜色并创建颜色变体。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「color-mix() 与相对颜色语法」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 使用 calc() 进行动态计算
  2. 使用 min()、max() 与 clamp() 实现流式值
  3. Grid 中的 repeat() 与 minmax()
  4. color-mix() 与相对颜色语法
← 返回 CSS Academy