🎨
← 返回教程列表

现代 CSS 颜色函数：rgba()、hsl()、oklch() 等

· 标签: css, color-functions, oklch, modern-css, web-development, rgba, hsl

现代 CSS 颜色函数：rgba()、hsl()、oklch() 等

CSS 颜色函数已经发生了巨大的演变。曾经在 hex、rgb() 和 hsl() 之间做选择，现在变成了一个丰富的色彩空间和操作函数生态系统，为开发者提供了前所未有的颜色表示、插值和无障碍控制能力。

本指南涵盖 2026 年可用的每一个主要 CSS 颜色函数，从熟悉的到前沿的。

RGB 和 RGBA：主力军

rgb() 函数使用红-绿-蓝加色模型定义颜色。它自 CSS1 起就成为 CSS 的一部分，并且被有史以来制造的每个浏览器支持。

/* 旧版逗号分隔语法 */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);

/* 现代空格分隔语法（CSS Color Level 4） */
color: rgb(255 0 0);
color: rgb(255 0 0 / 0.5);

/* 百分比值 */
color: rgb(100% 0% 0%);

现代 RGB 的关键变化

CSS Color Level 4 引入了两项重要改进：

  1. 空格分隔取代逗号分隔 — rgb() 函数现在接受以空格或斜杠分隔的值
  2. 统一的 alpha 语法 — rgba() 别名已被弃用（但仍受支持）。rgb() 现在原生接受 alpha 通道

这种现代语法受到 2020 年以来发布的所有浏览器的支持。对于新项目，请使用现代语法并完全跳过 rgba() 别名。

RGB 通道

每个 RGB 通道接受：

  • 0 到 255 的整数
  • 0% 到 100% 的百分比
  • 用于缺失通道的 none 关键字（CSS Color Level 4）

none 关键字在颜色插值时很有用——它告诉浏览器不要插值该特定通道。

HSL 和 HSLA：直观的颜色控制

HSL 代表色相（Hue）、饱和度（Saturation）、明度（Lightness）。它使用圆柱坐标系，自然映射了人类对颜色的思考方式。

/* H 是色相角（0-360），S 是饱和度（0-100%），L 是明度（0-100%） */
color: hsl(0 100% 50%);        /* 纯红色 */
color: hsl(0 100% 50% / 0.5);  /* 50% 不透明度的红色 */

/* 带单位的色相角 */
color: hsl(0deg 100% 50%);
color: hsl(0rad 100% 50%);
color: hsl(0grad 100% 50%);
color: hsl(0turn 100% 50%);

色相角参考

| 色相 | 颜色 | Hex | |-----|---------|----------| | 0 | 红 | #FF0000 | | 30 | 橙 | #FF8000 | | 60 | 黄 | #FFFF00 | | 120 | 绿 | #00FF00 | | 180 | 青 | #00FFFF | | 240 | 蓝 | #0000FF | | 300 | 品红 | #FF00FF |

HSL 是程序化生成调色板的最佳选择，因为只改变明度或饱和度通道就能创建一致的视觉变体。

HWB：与白色和黑色混合

HWB（色相、白度、黑度）是比 HSL 更直观的替代方案。你选择一个色相，然后添加白度和黑度来创建浅色和深色变体。

color: hwb(0 0% 0%);    /* 纯红色 */
color: hwb(0 40% 0%);   /* 浅红（添加了白色） */
color: hwb(0 0% 40%);   /* 深红（添加了黑色） */
color: hwb(0 20% 20%);  /* 灰色调（白色 + 黑色） */

HWB 在一种特定场景下比 HSL 更简单：创建品牌色的浅色和深色变体。你永远不需要考虑饱和度曲线——只需添加白色或黑色。

浏览器支持： 所有现代浏览器都支持 HWB（Chrome 101+、Firefox 96+、Safari 15+）。

LAB 和 LCH：感知均匀的色彩空间

LAB（明度、A 轴、B 轴）和 LCH（明度、彩度、色相）是感知均匀的色彩空间。这意味着两个颜色值之间的欧氏距离对应于人眼感知到的视觉差异——这是 RGB 和 HSL 做不到的。

color: lab(50% 50 0);        /* 中红色 */
color: lch(50% 50 0);        /* 圆柱形式的相同颜色 */

为什么感知均匀性很重要：

  • 渐变 — 在 LAB 或 LCH 中插值会产生平滑、自然的过渡，不会出现 RGB 渐变那昏暗的"浑浊区"
  • 色差测量 — Delta E（感知差异度量）在 LAB 空间中才有意义
  • 无障碍性 — 感知均匀性有助于预测色觉缺陷用户将如何感知颜色

局限性： LAB 和 LCH 可以产生超出 sRGB 色域的颜色。这些颜色在 sRGB 屏幕上显示时会被裁剪，但在更宽的色域显示器（DCI-P3、Rec. 2020）上可以访问。

浏览器支持： Chrome 111+、Firefox 113+、Safari 15+ 支持。不支持 IE 或旧版 Edge。

OKLAB 和 OKLCH：现代感知标准

OKLCH 是 Bjorn Ottosson 开发的 LCH 改进版。它修复了 LCH 中的感知不均匀性，尤其是对蓝色色相。OKLCH 已成为 2025-2026 年新 CSS 项目的推荐默认色彩空间。

color: oklch(60% 0.2 30);
/* 明度：0-100%，彩度：0-约 0.4，色相：0-360 */

为什么 OKLCH 是 CSS 的最佳色彩空间

  1. 最佳的感知均匀性 — 相等的数值变化在所有色相中产生相等的视觉变化
  2. 可预测的明度 — 相同明度值的颜色看起来确实一样亮
  3. 没有浑浊的渐变 — 插值在整个色相范围内保持干净
  4. 默认 sRGB 安全 — 大多数 OKLCH 值产生色域内的 sRGB 颜色
  5. 直观的通道 — 像 HSL 一样，但具有真实的感知准确性

OKLCH 实践

/* 使用 OKLCH 创建平衡的颜色梯度 */
--blue-100: oklch(95% 0.02 250);
--blue-300: oklch(75% 0.08 250);
--blue-500: oklch(55% 0.15 250);
--blue-700: oklch(35% 0.10 250);
--blue-900: oklch(15% 0.04 250);

注意每一步都变化大致相同的明度值（20 个百分点）。由于 OKLCH 是感知均匀的，这些步骤在人眼中看起来是均匀分布的——这是用 HSL 很难做到的。

浏览器支持： OKLCH 受 Chrome 111+、Firefox 113+、Safari 15.4+ 支持。它已迅速成为最受推荐的现代色彩空间。

Color-Mix：在 CSS 中混合颜色

color-mix() 函数在指定的色彩空间中混合两种颜色：

/* 在 sRGB 中等量混合红色和蓝色 */
color: color-mix(in srgb, red, blue);

/* 30% 主色，70% 白色——一种浅色调 */
color: color-mix(in oklch, var(--primary) 30%, white);

/* 使用感知色彩空间混合以获得平滑结果 */
background: color-mix(in oklch, var(--accent) 20%, var(--surface));

in <color-space> 参数让你控制插值空间。在大多数情况下，in oklch 产生最佳的视觉结果。

使用场景：

  • 无需预处理器函数即可创建浅色和深色变体
  • 从单一颜色 token 构建组件变体
  • 动态生成悬停和激活状态
  • 在单个函数中创建类似渐变的效果

相对颜色语法：修改现有颜色

CSS Color Level 4 允许你通过修改单个通道从现有颜色派生出新颜色：

--primary: #3366cc;

/* 使用 OKLCH 通道 */
--primary-lighter: oklch(from var(--primary) l c calc(h + 30));
--primary-darker: oklch(from var(--primary) calc(l * 0.8) c h);

/* 使用 HSL 通道 */
--primary-light: hsl(from var(--primary) h s calc(l + 15%));
--primary-dark: hsl(from var(--primary) h s calc(l - 15%));

from <color> 关键字将源颜色的通道解包到目标函数的通道中，然后你可以用算术进行调整。

各色彩空间的通道关键字

每个色彩空间都暴露特定的通道关键字：

| 色彩空间 | 关键字 | |-------------|----------------------------------| | rgb() | r、g、b、alpha | | hsl() | h、s、l、alpha | | hwb() | h、w、b、alpha | | lch() | l、c、h、alpha | | oklch() | l、c、h、alpha | | lab() | l、a、b、alpha | | oklab() | l、a、b、alpha |

浏览器支持概览（2026）

| 函数 | Chrome | Firefox | Safari | Edge | |----------|--------|---------|--------|------| | rgb() / hsl() | 全部 | 全部 | 全部 | 全部 | | hwb() | 101+ | 96+ | 15+ | 101+ | | lab() / lch() | 111+ | 113+ | 15+ | 111+ | | oklch() / oklab() | 111+ | 113+ | 15.4+ | 111+ | | color-mix() | 111+ | 113+ | 16.2+ | 111+ | | 相对颜色语法 | 111+ | 113+ | 16.2+ | 111+ |

在 2026 年，所有现代颜色函数对于不需要支持 Internet Explorer 的项目都是安全的。为了更广泛的兼容性，请使用一个将现代语法转换为 hex 或旧版 rgb() 的构建步骤。

实用建议

  • 对于现有项目 — HSL 仍然是可读性和能力的最佳平衡
  • 对于新项目 — 使用 OKLCH 作为你的主要色彩空间，因其感知准确性
  • 对于渐变 — 始终在 OKLCH 中插值，以避免浑浊的过渡
  • 对于设计系统 — 以 OKLCH 存储基础颜色，使用 color-mix() 或相对语法生成变体
  • 对于 canvas/WebGL — 坚持使用 RGB，它是渲染管线原生的

结论

现代 CSS 颜色函数已经彻底改变了你在 Web 上使用颜色的能力。OKLCH 提供了使颜色系统设计可预测的感知均匀性。color-mix() 和相对颜色语法消除了对预处理器颜色函数的需求。这些工具共同赋予了 Web 开发者与设计工具多年来自动提供的同等颜色能力——现在直接就在浏览器中。

使用我们的免费在线颜色转换器在包括 OKLCH、LAB、HWB 以及经典 HEX/RGB/HSL 在内的所有现代 CSS 颜色格式之间转换。