📝 背景聊天

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

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

🔍 什么是 OKLCH？

推荐看这个网站，会有完全不同的理解： OKLCH in CSS: why we moved from RGB and HSL—Martian Chronicles, Evil Martians’ team blog Figma Token 结合 OKLCH：Update 1: Tokens, variables, and styles – Figma Learn - Help Center

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

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

color: oklch(75% 0.2 240);

这行代码的意思是：

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

🔥 为什么会喜欢 OKLCH？

✅ 更符合人眼感知

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

✅ 更容易做暗色/亮色主题切换

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

✅ CSS 原生支持（渐进中）

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

🎨 举个实际例子（UI 设计）

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

• 更亮的 hover 色
• 更暗的边框色
• 更低饱和度的背景色 用 oklch 调整 L 和 C 非常直观，不像 hsl 那样一改就颜色失真。

🛠️ 如何在项目中使用？

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

🍉 总结一句话：

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

✅ WCAG / APCA vs 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 格式写，清新自然，还带点「请我吃西瓜」的趣味性：

🍉 西瓜主题色板（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 吗？

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

🎨 三者简要比较：

✴️ 为什么选 OKLCH 做主题色：

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

✨ 宇宙黑 + 能量橙（OKLCH）风格参考

🧪 提升体验：

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

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

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

💡 > 欢迎分享文章，或是 来信 与我交流