如何用CSS的oklch(from...)与calc()将指定oklch颜色调亮50%？

我们的设计系统通过CSS自定义属性定义OKLCH格式颜色，示例如下：

:root {
  --color-blue-1: oklch(88.6% 0.023 238);
}

需要通过CSS的oklch(from...)函数结合calc()生成50%更亮的纯色，不能使用opacity或alpha属性（要求该颜色不受背景影响）。

约定的调亮公式为：

l_new = l + ((100% - l) / 2)

期望得到的结果是：

:root {
  --color-blue-1-50: oklch(94.2% 0.023 238);
}

我们尝试了以下写法，但浏览器识别为无效值：

:root {
  --color-blue-1-50: oklch(from var(--color-blue-1) calc(l + calc(100% - l / 2)) c h);
}

请问正确的calc()写法应该是什么？

你的写法问题出在运算优先级和不必要的calc()嵌套上：

1. 原代码中l / 2的优先级高于减法，导致公式变成了l + (100% - (l/2))，和预期公式不符
2. CSS的calc()本身支持多层运算，不需要嵌套第二个calc()

正确的calc()表达式应该严格对应公式，把(100% - l)整体包裹后再除以2：

calc(l + (100% - l) / 2)

对应的完整自定义属性定义如下：

:root {
  --color-blue-1: oklch(88.6% 0.023 238);
  --color-blue-1-50: oklch(from var(--color-blue-1) calc(l + (100% - l) / 2) c h);
}

完整可运行示例 #

CSS代码

:root {
  --color-blue-1: oklch(88.6% 0.023 238);
  --color-blue-1-50: oklch(from var(--color-blue-1) calc(l + (100% - l) / 2) c h);
}

div {
  display: block;
  height: 100px;
  width: 100px;
  margin: 10px 0;
}

.original {
  background-color: var(--color-blue-1);
}

.fifty-percent-lighter {
  background-color: var(--color-blue-1-50);
}

.faked {
  opacity: 0.5;
}

HTML代码

<div class="original">原始颜色</div>
<div class="fifty-percent-lighter">50% 提亮（纯色，不受背景影响）</div>
<div class="original faked">用opacity模拟的提亮（受背景影响）</div>

内容的提问来源于stack exchange，提问作者connexo