颜色色调生成器

关于颜色色调生成器

这个颜色色调生成器完全在你的浏览器中运行。选择基础颜色，设置步数，工具会生成一系列色调（与白色混合的较浅变体）和阴影（与黑色混合的较深变体）。每个颜色显示其 hex、RGB 和 HSL 值。点击任意色块复制其 hex 值。整个过程不上传任何数据——所有处理由 JavaScript 在本地完成。

使用方法

1. 使用颜色选择器选择基础颜色，或在文本框中输入 hex 值。
2. 设置步数（3-20）。工具会围绕基础颜色生成等量的色调和阴影。
3. 点击生成调色板创建颜色变体。
4. 点击任意色块复制其 hex 值到剪贴板。
5. 使用复制为 CSS 变量获取可直接使用的 :root 块，或复制所有 hex 值获取纯列表。

色调与阴影的区别

色调是将颜色与白色混合创建的，使其更浅。阴影是将颜色与黑色混合创建的，使其更深。生成器创建从最浅色调到最深阴影的平滑渐变，基础颜色在中间。这对于设计 UI 颜色系统、创建无障碍调色板以及确保元素之间有足够的对比度非常有用。

常见问题

可以使用命名颜色吗？ 工具接受 hex 值（如 #0EA5E9）。对于命名颜色，请先用颜色选择器或转换工具将其转换为 hex。

中间颜色如何计算？ 每个色调通过在基础颜色和白色之间线性插值创建，每个阴影通过在基础颜色和黑色之间插值创建。插值在 RGB 空间中进行，以获得平滑、可预测的结果。

我的数据会上传吗？ 不会。所有操作都在浏览器本地完成。