OKLCH 中的梯度插值
通过在感知空间中进行插值来避免混乱的中点。
Formula
在 OKLCH(而不是 RGB)中插入 L、C、H 以获得更平滑的混合。
Variables
- 红、绿、蓝
- sRGB 通道(0–255 或 0–1 标准化)
- 高、小、长
- HSL 中的色相(度)、饱和度和亮度 (0–1)
- L
- HSL/OKLCH 中的相对亮度 (WCAG) 或亮度
FAQ
- OKLCH 中的梯度插值对于打印工作流程是否准确?
- 屏幕 RGB 和打印 CMYK 使用不同的色域。将转换视为近似证明;使用 ICC 配置文件进行商业印刷校准。
- 我可以在 CSS 中使用这个公式吗?
- 现代 CSS 支持 color-mix()、oklch() 和 lab() 的许多操作。对于复杂的管道,请使用 JavaScript 进行计算并导出 CSS 变量。
- Color DevByte 会上传我的颜色吗?
- 不会。公式参考页是静态文档;交互式工具在浏览器中 100% 客户端运行。
概述
通过在感知空间中进行插值来避免混乱的中点。
Color DevByte 为需要可重复颜色数学且无需将数据发送到服务器的开发人员、设计人员和可访问性审核人员记录了此公式。
使用链接的颜色工具通过实时预览和多格式导出以交互方式应用此公式。
何时使用此公式
在构建设计标记、验证 WCAG 对比度或在 CSS、Tailwind 或设计系统 JSON 中自动化颜色管道时,在 oklch 中应用渐变插值。
对于生产 UI,始终使用对比度检查器或视觉预览来验证结果 - 伽玛校正和色域映射中的边缘情况可能会改变结果。
实施说明
基于浏览器的工具应在亮度或 ΔE 计算之前对 sRGB 进行线性化。
优先选择 OKLCH 或 LAB 插值进行渐变和主题,以避免 RGB 混合中常见的灰色中点。