颜色灰色调生成器
将颜色按固定步长与中性灰混合，生成色调，降低饱和度，同时保持色相。输入任意 CSS 格式的颜色，选择 2 到 20 个步长和混合空间，即可获得表格，其中列出从原始颜色开始的每种色调的 HEX、RGB、HSL 和 OKLCH 值。适用于低饱和度调色板、禁用状态、柔和表面和更沉稳的品牌配色。
常见问题
什么是色调？
色调是与灰色混合后的颜色。它保留色相，颜色变得更柔和；而淡色是与白色混合，暗色则是与黑色混合。
使用哪种灰色？
使用 sRGB 中灰 #808080、rgb(128 128 128)。因此，浅色会略微变暗，深色会略微变亮，逐渐接近中灰；如需与其他灰色混合，请使用颜色混合器并输入你自己的灰色。
各步骤如何分布？
设置 N 个步长时，第 k 行会将颜色与 (k - 1) / N 比例的灰色混合，因此 10 个步长对应 0%、10%、20% 等，最高到 90%。第一行始终是原始颜色，列表中不会包含纯灰色。
色调与降低 HSL 饱和度有什么区别？
降低 HSL 饱和度会保留 HSL 亮度，而与灰色混合也会将亮度拉向中间值。因此，色调看起来像是隔着灰色滤镜看到的颜色，适合低饱和度背景和禁用状态。
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 亮度和色度最多保留四位小数。
透明色和广色域颜色会怎样处理？
每种色调都会保留输入颜色的 alpha 值，因此十六进制代码会有 8 位数字。超出色域的步长会在 HEX、RGB 和 HSL 列中使用 CSS Color 4 算法映射到 sRGB，而 OKLCH 列保留未经映射的值。
如何在 CSS 中重现色调？
复制十六进制或 oklch() 值；也可以让浏览器使用 color-mix(in oklab, var(--brand) 70%, #808080) 混合，以重现 OKLab 设置下 30% 的色调。所有当前主流浏览器都支持 color-mix()。