颜色阴影生成器
通过分步将颜色与黑色混合，生成更深的色调。输入一种任意 CSS 格式的颜色，选择 2 到 20 个步骤和一种混合空间，即可获得包含每种色调 HEX、RGB、HSL 和 OKLCH 值的表格，首行从原始颜色开始。sRGB 混合与经典阴影工具和 Sass 的结果一致，而 OKLab 可生成感知上均匀的渐变步骤。适用于构建 UI 色阶。
常见问题
什么是阴影色？
阴影色是与黑色混合得到的颜色。它保留色相并变暗；与之不同，浅色调是与白色混合，灰色调则是与灰色混合。
各步骤如何分布？
有 N 个步骤时，第 k 行将颜色与 (k - 1) / N 的黑色混合，因此 10 个步骤会依次得到 0%、10%、20%，一直到 90%。第一行始终是原始颜色，列表中不会包含纯黑色。
sRGB 混合与 OKLab 混合有什么区别？
sRGB 混合会对经过伽马编码的通道值取平均，这也是 Sass mix() 与大多数经典阴影生成器将颜色和黑色混合的方式。OKLab 混合则在感知空间中进行，因此各步骤的明度看起来更均匀，深色调也能保留更多色彩。
可以使用哪些输入格式？
带或不带 # 的十六进制代码、CSS 颜色名称、rgb()、hsl()、hwb()、lab()、lch()、oklab()、oklch()、color() 和 cmyk()。每次运行输入一种颜色。
可以生成多少种色调？
每次运行可生成 2 到 20 种，默认为 10 种。数量包含第一行的原始颜色。
表格会显示哪些值？
每个步骤都会显示黑色占比、十六进制代码、rgb()、hsl() 和使用现代 CSS 语法的 oklch()。RGB 通道为整数，HSL 百分比最多保留两位小数，OKLCH 明度和色度最多保留四位小数。
透明颜色会怎样处理？
每种色调都会保留输入颜色的透明度，因为混入的黑色使用相同的透明度。十六进制代码因此会有 8 位，CSS 函数则会在斜杠后附上透明度。
sRGB 以外的颜色会怎样处理？
混合时会使用完整颜色，但 HEX、RGB 和 HSL 只能显示 sRGB，因此超出色域的步骤会在这些列中使用 CSS Color 4 算法映射到 sRGB。OKLCH 列会保留未映射的值。
如何在 CSS 中使用这些色调？
将十六进制或 oklch() 值复制到 --brand-600 和 --brand-700 等自定义属性中。若要改为在浏览器中混合，color-mix(in oklab, var(--brand) 80%, black) 会生成与 OKLab 设置相同的 20% 阴影色。
更深的色调自动满足无障碍要求吗？
不满足。使用对比度检查器检查文字与每种色调的对比度，因为看起来较深的色调，与另一种深色或彩色文字搭配时，对比度仍可能低于 4.5:1。