颜色浅色调生成器
通过分步将颜色与白色混合，生成更浅的色调。输入一种任意 CSS 格式的颜色，选择 2 到 20 个步骤和一种混合空间，即可获得包含每种浅色调 HEX、RGB、HSL 和 OKLCH 值的表格，首行从原始颜色开始。sRGB 混合与经典浅色调工具和 Sass 的结果一致，而 OKLab 可生成感知上均匀的渐变步骤。适用于背景、悬停状态和色阶。
常见问题
什么是浅色调？
浅色调是与白色混合得到的颜色。它保留色相，变得更亮、更淡；与之不同，阴影色是与黑色混合，灰色调则是与灰色混合。
各步骤如何分布？
有 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-100 和 --brand-200 等自定义属性中。若要改为在浏览器中混合，color-mix(in oklab, var(--brand) 80%, white) 会生成与 OKLab 设置相同的 20% 浅色调。
可以在浅色调上使用白色文字吗？
通常不行，因为浅色调与白色的对比度很低。浅色调上使用深色文字，并用对比度检查器检查每组搭配；普通文字的 WCAG AA 对比度至少需要达到 4.5:1。