CSS 渐变生成
CSS Gradient Builder
拖动色标做出线性、径向和锥形渐变，并按 sRGB 或 OKLCH 输出 CSS。
构建线性、径向或锥形渐变并输出 CSS，包括决定色标之间发生什么的 `in oklch` 插值子句。同样的色标总会在下面用 sRGB 再画一遍，因为主张在感知空间里插值的论据是视觉上的，四厘米渐变比一段文字更快说服人。
同样的断点在 sRGB 里插值，作对比。如果这条带子中间比上面那条显得发灰，那正是插值空间在起作用——穿过 sRGB 色立方体的直线，在两个相对的色相之间会从中性轴附近经过。
沿着色相环走，所以中间点也保住了彩度。默认值，也是 CSS 长出这套语法的原因。
断点
- 0%
- 100%
预设
CSS
background-image: linear-gradient(135deg in oklch, #5b6cff 0%, #22d3ee 100%);in oklch 这一段需要 2023 年以后的浏览器。更老的引擎不会退回上一条，而是把整条声明丢掉，所以要照顾它们，就在前面再写一条普通的 sRGB 渐变。
怎么用
选类型，再选角度
线性沿直线行进，径向从一点扩散，锥形绕一点扫过。角度适用于线性和锥形；径向改为接受形状和中心。
放置色标
每个色标有一个颜色和一个 0 到 100% 的位置。至少两个；增加一个会均匀重新分配位置，之后你可以移动它们。预设是看三四个色标如何表现的快捷办法。
选插值空间——这才是真正的决定
OKLCH 在中段保持彩度，这是阻止蓝到黄在半路变灰的东西。OKLab 走最短的感知路径，两个色标色相接近时是对的。sRGB 是遗留行为，需要旧浏览器和新浏览器得到同样结果时值得刻意选它。
在极坐标空间里，决定绕环的方向
OKLCH、LCH 和 HSL 是极坐标的，所以任何两个色相之间有两条弧。`shorter` 是默认值，通常也是你要的；`longer` 把两色标渐变变成彩虹，偶尔正是想要的效果。
复制值或整条声明
值放进现有的 `background-image`；声明可以直接单独粘贴。
常见问题
`in oklch` 在每个浏览器里都管用吗？
不管用。它需要 2023 年或之后的引擎，旧引擎会丢掉整条声明，而不是回退到 sRGB——这里没有部分支持。在前面一条声明里放一个普通的 sRGB 渐变，让新引擎覆盖它，这是标准的 CSS 层叠回退，只多一行。
为什么 sRGB 色带中间变灰？
因为在 sRGB 里插值是穿过颜色立方体画一条直线，两个大致相对的色相之间的直线会经过中性轴附近。渐变没有任何问题——它做的正是数字说的事，而这些数字从来就和颜色看起来如何无关。
我的渐变上有肉眼可见的色带。这里能修吗？
不能直接修。色带是 8 位输出对大面积缓慢过渡的量化，没有哪种插值空间的选择能去掉它。通常的答案是一层淡淡的噪点叠加、一个细微的重复纹理，或者让渐变走更短的距离。这个工具只输出 CSS，不做抖动。
能导出为图片吗？
不能。输出是一个 CSS 值，比它的任何一张图片都小，与分辨率无关，而且可以动画。如果你需要位图文件——比如给 CSS 渐变不可靠的邮件模板——给预览截图，或者在背景图案生成器里做，那个工具画到 canvas 上。
可以从这些接进来
CSS 阴影生成
Box Shadow Generator
一边预览一边叠多层盒阴影和文字阴影，并导出对应的 CSS。
背景图案生成
Background Pattern Generator
生成可无缝平铺的 SVG 图案——条纹、圆点、网格、噪点——颜色和疏密都能调。
颜色拾取器
Colour Picker
在 OKLCH 色板上选色，也可以用屏幕吸管或从上传的图片里取色，并按任意表示法复制出来。
颜色格式转换
Colour Format Converter
在 HEX、RGB、HSL、HWB、LAB、LCH 和 OKLCH 之间换算同一个颜色，并给出最接近的已知色名。
接下来
这些工具吃得下当前工具的产出，结果可以直接送过去。
颜色格式转换
Colour Format Converter
在 HEX、RGB、HSL、HWB、LAB、LCH 和 OKLCH 之间换算同一个颜色，并给出最接近的已知色名。
CSS 美化与压缩
CSS Beautifier & Minifier
格式化或压缩 CSS，不重排任何声明，原本的记号序列一个不动。
配色方案生成
Palette Generator
从一个基准色出发，按互补、三分和邻近色规则生成协调的配色。
背景图案生成
Background Pattern Generator
生成可无缝平铺的 SVG 图案——条纹、圆点、网格、噪点——颜色和疏密都能调。
颜色拾取器
Colour Picker
在 OKLCH 色板上选色，也可以用屏幕吸管或从上传的图片里取色，并按任意表示法复制出来。
对比度检测
Contrast Checker
按 WCAG 2 和 APCA 给前景色和背景色这一对打分，并推荐最接近的能通过的颜色。