免费在线OKLCH颜色选择器，支持OKLCH/OKLAB/LCH/LAB/RGB/HSL互转，实时预览CSS Color 4新色彩空间，广色域P3支持。无需注册，无需上传。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用CSS Color 4新色彩空间 · OKLCH/OKLAB/LCH/LAB/RGB/HSL互转 · 广色域P3支持
颜色调节
色相变化
亮度变化
色度变化
常见问题
什么是OKLCH颜色空间？
OKLCH是CSS Color 4引入的新色彩空间，基于OKLAB模型。L表示感知亮度(0-1)，C表示色度(饱和度)，H表示色相角度(0-360)。相比HSL，OKLCH的亮度变化更符合人眼感知，色度均匀分布。
OKLCH和HSL有什么区别？
OKLCH的L通道是感知均匀的，HSL的L不是；OKLCH的C(色度)在不同色相下视觉饱和度一致；OKLCH支持广色域(P3/Rec2020)，HSL仅限sRGB；OKLCH渐变更平滑自然。
哪些浏览器支持OKLCH？
Chrome 111+、Firefox 113+、Safari 15.4+、Edge 111+均已支持。2024年起主流浏览器均已支持CSS Color 4规范。
OKLCH如何表示广色域颜色？
OKLCH的色度(C)值超过约0.15时，颜色可能超出sRGB色域进入P3或Rec2020广色域。在支持广色域的显示器上颜色更鲜艳，不支持时浏览器自动映射到最接近的sRGB颜色。
如何在CSS中使用OKLCH？
使用oklch()函数：background: oklch(0.7 0.15 180)。加透明度：oklch(0.7 0.15 180 / 0.5)。推荐相对颜色语法：oklch(from var(--base) l c calc(h + 60))。
OKLCH颜色选择器能做什么？
OKLCH颜色选择器是一款基于CSS Color 4规范的现代颜色工具，支持OKLCH、OKLAB、LCH、LAB、RGB、HSL等多种色彩空间的实时互转。OKLCH是CSS Color 4引入的感知均匀色彩空间，相比传统HSL，其亮度通道更符合人眼感知，色度分布更均匀，渐变效果更自然。
OKLCH颜色选择器的核心功能
- OKLCH实时调节：通过L(亮度)、C(色度)、H(色相)三个滑块直观调节颜色，实时预览效果
- 多色彩空间互转：一键获取OKLCH、OKLAB、LCH、LAB、RGB、HSL、HEX等多种格式
- 广色域支持：自动检测颜色是否超出sRGB色域，标识P3/Rec2020广色域颜色
- 调色板生成：自动生成色相、亮度、色度变化调色板，方便设计配色
- 一键复制CSS：直接复制oklch()CSS代码，用于现代网页开发
使用教程
1. 拖动L/C/H滑块调节颜色，或输入HEX值点击"应用"转换
2. 颜色预览区实时显示当前颜色，色域标识显示颜色所属色域
3. 点击任意颜色值即可复制，或点击"复制CSS"获取oklch()代码
4. 调色板区域展示色相/亮度/色度变化，点击色块可直接选用
OKLCH颜色选择器应用场景
前端开发者：使用OKLCH编写CSS，实现感知均匀的颜色系统和更平滑的渐变效果。OKLCH的相对颜色语法(oklch(from var(--base) l c calc(h + 60)))让配色方案生成更简洁。
UI设计师：利用OKLCH的感知均匀特性创建无障碍配色方案，确保不同色相的相同亮度在视觉上一致，满足WCAG对比度要求。
广色域内容创作者：在支持P3色域的显示器上，OKLCH可以表示比sRGB更鲜艳的颜色，充分发挥硬件显示能力。
关于OKLCH颜色选择器的扩展知识
OKLCH基于Björn Ottosson在2020年提出的OKLAB色彩空间。OKLAB通过改进CIELAB的色相偏移问题，实现了更好的感知均匀性。OKLCH是OKLAB的极坐标形式，L=亮度(0-1)，C=色度(饱和度，0-0.4+)，H=色相(0-360°)。CSS Color 4规范在2022年被W3C正式推荐，所有主流浏览器从2023年起陆续支持oklch()函数。