渐变

在哪个空间里插值

CSS Images 4 的规矩：不写 in … 的时候，hex、rgb、hsl 这类老式颜色之间在 sRGB 里直线插值。 sRGB 的三个通道跟人眼感知的「色相、明度、色度」没有对应关系， 两个色相差得远的颜色，中点常常是灰的。蓝到黄的正中间是 ，Oklab 里的色度比两端掉了 。

写上 in oklch，插值就在 OKLCH 里做：明度和色度各自直线走，色相沿短弧转。 蓝到黄的中点变成 ，色度还在。 浏览器从 2023 年前后开始认这个写法（Chrome 111、Safari 16.2、Firefox 127）， 不认的会跳过那条声明，所以两条都写，老的在前新的在后。

动手

两条渐变用同一对颜色，上面 sRGB 插值，下面 OKLCH 插值。每条底下的色带是采样出来的 65 个点， 「最差点」就是字在这条上最难读的位置。预览不靠浏览器自己画 in oklch， 是把采样点铺出来的，所以老浏览器看到的也是同一份数。

字压渐变的判法

沿着渐变采样，每一点都跟字色算一次对比度，取最小的那个。最差点过线，整条才算过。 过不了有三条路：整段压深（或提亮）；把字挪到渐变里达标的那一段上； 给字加一层实色底，让字不直接压在渐变上。第三条最稳，但等于没用渐变。

渐变上压字，要过的不是「平均」，是「最差的一点」。

深色下

深色主题的渐变分两种用途，不能共用一条：填充用的（按钮、横幅）要压得住白字， 每一点都得比白字暗够；文字用的（background-clip: text 那种）自己就是字， 每一点都得对深底读得出来。配色工作台导出的 --grad-brand 和 --grad-text 就是这么分开算的，深色那套两条各是各的。