Yasin

Yasin

什么是OKlch

OKLCH 是什么

OKLCH 是一种现代 CSS 颜色格式，属于 CSS Color Level 4 标准，是 OKLab 色彩空间的圆柱坐标表示法。

OKLCH 的组成

oklch(L C H / A)
参数 全称 范围 含义
L Lightness 0-1 或 0%-100% 亮度（0=黑，1=白）
C Chroma 0-0.4 色度/饱和度（0=灰色）
H Hue 0-360 色相角度（0/360=红）
A Alpha 0-1 或 0%-100% 透明度（可选）

语法示例

/* 基础用法 */
color: oklch(0.6 0.2 180); /* 青色 */
color: oklch(60% 0.2 180); /* 同上 */

/* 带透明度 */
color: oklch(0.6 0.2 180 / 0.5); /* 半透明青色 */
color: oklch(60% 0.2 180 / 50%); /* 同上 */

/* 低饱和度（接近灰色） */
color: oklch(0.5 0.05 250); /* 淡紫灰 */

/* 高亮度高饱和度 */
color: oklch(0.8 0.3 30); /* 明亮橙色 */

色相环（Hue）

0° / 360°  → 红色
30°        → 橙色
60°        → 黄色
120°       → 绿色
180°       → 青色
240°       → 蓝色
300°       → 洋红/紫色

与其他颜色格式对比

RGB/HEX（传统）

/* 传统格式 */
#3b82f6
rgb(59, 130, 246)

/* 问题：不符合人眼感知，同样的数值变化视觉差异不一致 */

HSL（常用但有缺陷）

hsl(217, 91%, 60%)

/* 问题：
   - 不同色相的 50% 亮度，视觉亮度不一致
   - hsl(60, 100%, 50%) 黄色比 hsl(240, 100%, 50%) 蓝色看起来更亮
*/

OKLCH（现代推荐）

oklch(0.6 0.25 217)

/* 优势：
   - ✅ 符合人眼感知
   - ✅ 相同 L 值，视觉亮度一致
   - ✅ 更宽广的色域（支持 P3、Rec2020）
   - ✅ 更平滑的渐变
*/

实际对比示例

生成调色板

/* HSL：不同色相，50% 亮度视觉不一致 */
.hsl-red {
  background: hsl(0, 100%, 50%);
} /* 看起来较暗 */
.hsl-yellow {
  background: hsl(60, 100%, 50%);
} /* 看起来很亮 ⚠️ */
.hsl-blue {
  background: hsl(240, 100%, 50%);
} /* 看起来很暗 ⚠️ */

/* OKLCH：相同 L 值，视觉亮度一致 */
.oklch-red {
  background: oklch(0.6 0.3 0);
} /* 视觉一致 ✅ */
.oklch-yellow {
  background: oklch(0.6 0.3 60);
} /* 视觉一致 ✅ */
.oklch-blue {
  background: oklch(0.6 0.3 240);
} /* 视觉一致 ✅ */

在 Tailwind 中使用

1. 任意值语法

<!-- 直接使用 OKLCH -->
<div class="bg-[oklch(0.6_0.2_180)]">青色背景</div>

<!-- 带透明度 -->
<div class="bg-[oklch(0.6_0.2_180_/_0.5)]">半透明青色</div>

2. 配置自定义颜色

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: "oklch(0.6 0.25 217)",
        accent: "oklch(0.7 0.3 30)",
        surface: "oklch(0.95 0.01 250)",
      },
    },
  },
};

<div class="bg-brand text-accent">使用 OKLCH 颜色</div>

3. 使用 CSS 变量

:root {
  --color-primary: oklch(0.6 0.25 217);
  --color-surface: oklch(0.95 0.01 250);
}

<div class="bg-[var(--color-primary)]">使用变量</div>

OKLCH 的优势

1. 感知均匀性

/* 亮度从 0.3 → 0.7，视觉变化均匀 */
oklch(0.3 0.2 180)
oklch(0.5 0.2 180)
oklch(0.7 0.2 180)

2. 更好的渐变

/* OKLCH 渐变更平滑，无灰色中间带 */
background: linear-gradient(to right, oklch(0.6 0.3 0), oklch(0.6 0.3 180));

/* HSL 渐变可能出现灰色 */
background: linear-gradient(to right, hsl(0, 100%, 50%), hsl(180, 100%, 50%));

3. 更宽色域

/* 支持 P3 显示器的鲜艳颜色 */
color: oklch(0.7 0.4 120); /* 超出 sRGB 的鲜绿色 */

4. 易于生成调色板

/* 保持色相和饱和度，只改变亮度 */
--color-50: oklch(0.95 0.1 217); /* 最浅 */
--color-100: oklch(0.9 0.1 217);
--color-500: oklch(0.6 0.25 217); /* 基准色 */
--color-900: oklch(0.3 0.2 217); /* 最深 */

浏览器支持

浏览器 版本
Chrome 111+ (2023年3月)
Safari 15.4+ (2022年3月)
Firefox 113+ (2023年5月)
Edge 111+ (2023年3月)

兼容性处理

/* 降级方案 */
.button {
  background: #3b82f6; /* 降级到 HEX */
  background: oklch(0.6 0.25 217); /* 支持的浏览器使用 */
}

实用工具

1. 在线转换器

2. 颜色选择器

3. 调色板生成

完整示例

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      :root {
        --primary: oklch(0.6 0.25 217);
        --surface: oklch(0.95 0.01 250);
        --text: oklch(0.2 0.01 250);
      }
    </style>
  </head>
  <body class="bg-[var(--surface)] text-[var(--text)]">
    <div class="p-8">
      <!-- 直接使用 OKLCH -->
      <button class="bg-[oklch(0.6_0.25_217)] text-white px-6 py-3 rounded-lg">
        OKLCH 按钮
      </button>

      <!-- 使用 CSS 变量 -->
      <div class="bg-[var(--primary)] text-white p-4 mt-4 rounded">
        使用变量的容器
      </div>

      <!-- 渐变 -->
      <div
        class="h-20 bg-gradient-to-r from-[oklch(0.6_0.3_0)] to-[oklch(0.6_0.3_180)]"
      >
        OKLCH 渐变
      </div>
    </div>
  </body>
</html>

总结

  • OKLCH = 现代、感知均匀的颜色格式
  • L (亮度) + C (饱和度) + H (色相) + A (透明度)
  • 优势：视觉一致、渐变平滑、色域更广
  • 适合需要精确颜色控制和易维护调色板的项目

推荐在新项目中使用 OKLCH 替代 HSL/RGB！

← 返回首页