此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
oklch()
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2023年5月.
* Some parts of this feature may have varying levels of support.
函数记号oklch() 在 Oklch 颜色空间中表示指定颜色。此函数记号与oklab() 有相同的 L 轴，但使用极坐标 C（色度）和 H（色相）。
语法
oklch(40.1% 0.123 21.57)oklch(59.69% 0.156 49.77)oklch(59.69% 0.156 49.77 / .5)取值
- 函数记号：
oklch(L C H [/ A])L为介于0和1之间的<number>或介于0%和100%之间的<percentage>，此处数值0对应0%（黑），数值1对应100%（白）。L指定了感知明度。C为<number>或<percentage>，此处0%对应0，100%对应数值0.4。此值衡量了色度（大概表示“颜色的量”），其有用的最小值为0，最大值无理论上限（但实际不超过0.5）。H为<number>或<angle>，指定了沿正半 a 轴（紫红方向）的色相角。90deg指向正半 b 轴（芥末黄方向），180deg指向负半 a 轴（蓝绿方向），270deg指向负半 b 轴（天蓝方向）。A（alpha）可为介于0和1之间的<number>或介于0%和100%之间的<percentage>，此处数值1对应100%（完全不透明）。
形式语法
<oklch()> =
oklch([from<color>]?[<percentage>|<number>|none][<percentage>|<number>|none][<hue>|none][ /[<alpha-value>|none]]?)
<hue> =
<number>|
<angle>
<alpha-value> =
<number>|
<percentage>
示例
调整颜色的明度、色度和色相
下列示例展示了改变颜色函数oklch() 的L（明度）、C（色度）和H（色相）值的效果。
HTML
<div data-color="blue"></div><div data-color="blue-light"></div><div data-color="red"></div><div data-color="red-chroma"></div><div data-color="green"></div><div data-color="green-hue"></div>CSS
div { width: 50px; height: 50px; padding: 5px; margin: 5px; display: inline-block; border: 1px solid black;}[data-color="blue"] { background-color: oklch(60% 0.4 240);}[data-color="blue-light"] { background-color: oklch(90% 0.4 240);}[data-color="red"] { background-color: oklch(100% 0.4 30);}[data-color="red-chroma"] { background-color: oklch(100% 0.3 40);}[data-color="green"] { background-color: oklch(60% 0.57 161);}[data-color="green-hue"] { background-color: oklch(60% 0.57 181);}结果
调整颜色的 alpha 值
下列示例展示了改变颜色函数oklch() 的A（alpha）值的效果。为演示不透明度的效果，red 和red-alpha 元素与#background-div 元素重叠。0.4 的A 值使颜色有 40% 的不透明度。
HTML
<div> <div data-color="red"></div> <div data-color="red-alpha"></div></div>CSS
div { width: 50px; height: 50px; padding: 5px; margin: 5px; display: inline-block; border: 1px solid black;}#background-div { background-color: oklch(100% 0.57 217); width: 150px; height: 40px;}[data-color="red"] { background-color: oklch(50% 130 20);}[data-color="red-alpha"] { background-color: oklch(50% 130 20 / 0.4);}结果
规范
| Specification |
|---|
| CSS Color Module Level 5 # relative-Oklch |
| CSS Color Module Level 4 # ok-lab |
浏览器兼容性
参见
<color>数据类型所列的所有颜色记号- 一个用于图像处理的感知颜色空间
- CSS 中的 OKLCH
- Safari 技术预览 137 发布记录：含
oklch()andoklab()颜色