免费OKLCH颜色选择器

颜色调节

sRGB

L 亮度 0.70

C 色度 0.15

H 色相 180°

α 透明度 1.00

HEX

OKLCHoklch(0.7 0.15 180)

OKLABoklab(0.7 -0.1 0.05)

LCHlch(70 20 180)

RGBrgb(43, 181, 160)

HSLhsl(172, 62%, 44%)

CSSoklch(0.7 0.15 180)

色相变化

亮度变化

色度变化

常见问题

什么是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实时调节：通过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编写CSS，实现感知均匀的颜色系统和更平滑的渐变效果。OKLCH的相对颜色语法(oklch(from var(--base) l c calc(h + 60)))让配色方案生成更简洁。

UI设计师：利用OKLCH的感知均匀特性创建无障碍配色方案，确保不同色相的相同亮度在视觉上一致，满足WCAG对比度要求。

广色域内容创作者：在支持P3色域的显示器上，OKLCH可以表示比sRGB更鲜艳的颜色，充分发挥硬件显示能力。

扩展知识

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()函数。

🎨 OKLCH颜色选择器