最近很火的 OKLCH 开发配色方案

和朋友聊天，其最近找到了新工作，在一家 ToB 公司，聊到用 Figma Token 做配色方案，给我提到了 OKLCH配色之前参考wcag，和apca，于是去和G老师请教，补充相关知识并总结如下：

oklch 是一个新一代的颜色表示法，在设计和前端开发里很有潜力，它是为了解决传统颜色模式（比如 rgb、hsl）不够好用、不够直观的问题。

推荐看这个网站，会有完全不同的理解：
OKLCH in CSS: why we moved from RGB and HSL—Martian Chronicles, Evil Martians’ team blog

OKLCH 是一种相对先进且更符合人类感知的颜色空间，由这几个维度组成：

• O：OK — 来源于“OKLab”，一种新型感知均匀的颜色模型
• L：Lightness（亮度）
• C：Chroma（色度/鲜艳程度）
• H：Hue（色相）

📦 写法示例：

color: oklch(75% 0.2 240);

这行代码的意思是：

• 亮度 75%
• 色彩强度 0.2（越大越鲜艳）
• 色相角度 240°（大概是蓝色）

比如，在 rgb 模式里加 10 的红，颜色变化肉眼感知不一定线性；但在 oklch 里改变数值，变化更直观，非常适合调节主题色、设计系统等。

调节亮度（L）就能实现色调保持一致的前提下切暗或提亮，太方便了！

在 现代浏览器 中（如 Chrome 111+、Safari、Firefox），已开始支持，未来可能是主流。

你可能想要一个主色调，配出：

• 更亮的 hover 色
• 更暗的边框色
• 更低饱和度的背景色

用 oklch 调整 L 和 C 非常直观，不像 hsl 那样一改就颜色失真。

• Tailwind CSS：目前通过插件支持 oklch
• CSS 变量：你可以在 CSS 自定义属性里使用
• 设计工具：像 Color.js、OKLCH Picker 是配色神器

OKLCH 是为「设计师 + 前端」打造的新一代色彩表示法，精准好调，未来可期。

• WCAG（可访问性对比比率）：
  • 基于传统亮度对比（≥ 4.5:1 等）。
  • 判断文本对比，但对视觉感知不如 APCA 灵敏。
• APCA（新一代对比算法）：
  • 更接近人眼实际感受。
  • 推荐用于暗/亮主题评估，适合 Bottom of blog readability。
• OKLCH（色彩空间）：
  • 不直接是“对比标准”，但调色之后可自然满足 WCAG 或 APCA 用于页面对比判断。
  • 更适合做“设计基础”，“打色语言”，而 WCAG/APCA 是“验收标准”。

👉 简单来说：OKLCH 用来调色，APCA/WCAG 用来检测结果。

推荐工具：

• Adobe Color：创建色板时可切换至 Lab 模式，间接推导 OKLCH 参数。
• ColorSpace - Color Palettes Generator and Color Gradient Tool 生成配色方案，提供多种颜色模式转换
• Create a Palette - Coolors 支持 OKLCH 模式，可实时预览颜色
• OKLCH Color Picker & Converter 在线取色和转换

• 博客主题色、设计系统、暗黑切换，可以考虑慢慢过渡使用

用 oklch 格式写，清新自然，还带点「请我吃西瓜」的趣味性：

:root {
  --color-primary: oklch(0.65 0.25 20); /* 主西瓜红 */
  --color-accent: oklch(0.62 0.18 150); /* 西瓜皮绿 */
  --color-bg: oklch(0.95 0.05 20);       /* 背景淡红 */
  --color-hover: oklch(0.65 0.20 160);   /* hover 色 */
  --color-text: oklch(0.2 0.01 280);     /* 瓜籽黑 */
  --color-white: oklch(0.98 0.01 20);    /* 白西瓜冰 */
}

• 想变亮 ➜ 提高 L
• 想更鲜艳 ➜ 提高 C
• 想换颜色 ➜ 调整 H 角度（0 是红、120 是绿、240 是蓝）

我还可以：

• 把这些色放进 Tailwind 的 tailwind.config.js 里
• 或做一页「主题演示页」，直观看到变化

我现在用的黑橙+宇宙感中性色，是一种很有辨识度的风格，将来考虑结合 oklch 色彩模型会更容易做到：

WCAG 和 APCA 不如 OKLCH 吗？

这是三者在色彩系统和可访问性方面的对比——各有用处，不是“谁更高级”，而是看用在什么场景。

• 色彩亮度（L）控制非常直观，想“更亮”就是调高 L
• 对比配色只要差距够大（如 L 差 > 40%），通常就能通过可访问性
• 对于中性黑橙风格，OKLCH 可以更自由玩转「暗夜宇宙 + 点燃能量感」

• 主色和文字色的 L 值差距 >= 40（OKLCH 自然就满足可读性）
• 用 OKLCH 调色生成器配好基础系统，再用 Tailwind 拓展颜色名
• 可以用 Color Contrast Checker (OKLCH) 来确认颜色组合是否符合 WCAG 或 APCA

未来考虑把这套宇宙黑橙配色用 OKLCH 完整搭出来，写进 Tailwind 配置⚙️

更进阶一点的话，再做一个主题切换按钮，从西瓜主题 ➡️ 宇宙主题 随意搭配🍉🚀