🎨 CSS 颜色转换（OKLCH、Lab、Display P3）CSS Color Converter (OKLCH, Lab, Display P3)

使用说明与常见问题How-to & FAQ

「CSS 颜色转换（OKLCH、Lab、Display P3）」是什么？What is the CSS Color Converter (OKLCH, Lab, Display P3) tool?

按 CSS Color 4 标准解析和转换颜色：输入颜色名、#hex、rgb()、hsl()、hwb()、lab()、lch()、oklab()、oklch() 或 color(display-p3 …) 等任意写法，一次得到 HEX、RGB、HSL、HWB、Lab、LCH、OKLab、OKLCH 和 Display P3 的 CSS 写法；超出 sRGB 色域时按 CSS 标准的色域映射给出最接近的可显示颜色。可一次转换多行颜色，本地处理。Parse and convert colours the CSS Color 4 way: enter a colour name, #hex, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() or color(display-p3 …) and get the CSS for HEX, RGB, HSL, HWB, Lab, LCH, OKLab, OKLCH and Display P3 at once. Colours outside sRGB are mapped to the nearest displayable colour with the CSS gamut-mapping algorithm. Convert many lines at once; processed locally.

如何使用「CSS 颜色转换（OKLCH、Lab、Display P3）」？How do I use the CSS Color Converter (OKLCH, Lab, Display P3) tool?

在「CSS 颜色转换（OKLCH、Lab、Display P3）」中，把内容粘贴或输入到上方输入框，结果会实时显示在下方，点击「复制结果」即可复制。In the CSS Color Converter (OKLCH, Lab, Display P3): Paste or type into the input box; the result appears below instantly — click "Copy result" to copy it.

OKLCH 和 HSL 有什么区别？How is OKLCH different from HSL?

HSL 的“亮度”和人眼感受相差很大：hsl(60 100% 50%)（黄）看起来远比 hsl(240 100% 50%)（蓝）亮。OKLCH 基于感知均匀的 OKLab 色彩空间，L 相同的颜色看起来亮度也接近，调整 C（彩度）和 H（色相）时亮度不会乱跳，所以很适合做配色和设计系统。现代浏览器都支持 oklch()。HSL lightness is far from what eyes perceive: hsl(60 100% 50%) (yellow) looks much brighter than hsl(240 100% 50%) (blue). OKLCH is built on the perceptually uniform OKLab space, so colours with the same L look about equally light, and changing C (chroma) or H (hue) doesn't make lightness jump — ideal for palettes and design systems. All modern browsers support oklch().

结果后面的 * 和“超出 sRGB 色域”是什么意思？What do the * and "outside the sRGB gamut" mean?

Lab、OKLCH、Display P3 能表示普通屏幕（sRGB）显示不出来的鲜艳颜色。这种颜色没有对应的 HEX/RGB，工具按 CSS Color 4 规定的色域映射算法，在 OKLCH 中保持亮度和色相、逐步降低彩度，找到最接近的可显示颜色，并用 * 标出。Lab、LCH、OKLab、OKLCH 一栏始终是原色的准确值。Lab, OKLCH and Display P3 can describe vivid colours an ordinary (sRGB) screen can't show. Such colours have no exact HEX/RGB, so the tool uses the CSS Color 4 gamut-mapping algorithm — keeping lightness and hue in OKLCH while reducing chroma — to find the nearest displayable colour, marked *. The Lab, LCH, OKLab and OKLCH lines always show the exact original colour.

支持哪些写法？Which syntaxes are supported?

支持 148 个 CSS 颜色名和 transparent；#rgb、#rgba、#rrggbb、#rrggbbaa；rgb()/rgba() 和 hsl()/hsla() 的逗号旧写法与空格新写法；hwb()、lab()、lch()、oklab()、oklch()；color() 中的 srgb、srgb-linear、display-p3、a98-rgb、prophoto-rgb、rec2020、xyz、xyz-d50、xyz-d65。角度可写 deg、rad、grad、turn，透明度写在 “/” 后面，也支持 none。rgb()、hsl()、hwb() 中超出范围的数值按 CSS 规则截取（如 rgb(300 0 0) 就是 rgb(255 0 0)），不算超出色域。每行一个颜色，可一次转换最多 200 个，超出的会提示没有处理。All 148 CSS colour names plus transparent; #rgb, #rgba, #rrggbb and #rrggbbaa; legacy comma and modern space syntax for rgb()/rgba() and hsl()/hsla(); hwb(), lab(), lch(), oklab() and oklch(); and color() with srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50 and xyz-d65. Angles can use deg, rad, grad or turn, alpha goes after "/", and none is accepted. Out-of-range values in rgb(), hsl() and hwb() are clamped as CSS does (rgb(300 0 0) is rgb(255 0 0)) and do not count as out of gamut. One colour per line, up to 200 at a time; any beyond that are reported as not converted.

换算准确吗？How accurate are the conversions?

使用 CSS Color 4 规范给出的转换矩阵和传递函数（Lab/LCH 使用 D50 白点，与浏览器一致），并与规范作者维护的 colorjs.io 逐项比对：3,000 个随机颜色在各色彩空间的差异都小于 0.00001，色域映射结果一致。显示时按常用精度四舍五入。It uses the conversion matrices and transfer functions from the CSS Color 4 specification (Lab/LCH use the D50 white point, as browsers do) and was checked against colorjs.io, maintained by the spec's editors: across 3,000 random colours every colour space agrees to within 0.00001, and gamut mapping matches. Values are rounded to the usual precision for display.

数据会上传吗？Is my data uploaded?

不会，全部在浏览器本地处理。No — everything is processed locally in your browser.

「CSS 颜色转换（OKLCH、Lab、Display P3）」免费吗？需要注册吗？Is the CSS Color Converter (OKLCH, Lab, Display P3) free? Do I need an account?

「CSS 颜色转换（OKLCH、Lab、Display P3）」完全免费，无需注册或安装，打开网页即可使用，手机和电脑都能用；输入的内容只在你的浏览器本地处理。The CSS Color Converter (OKLCH, Lab, Display P3) is completely free with no sign-up or install and works on phones and desktops; what you enter is processed only in your browser.