颜色调色与色调生成器

颜色色调与阴影生成器

选择一个十六进制或 RGB 颜色，立即获得 10 个色调（向白色混合）和 10 个深色（向黑色混合）的视觉样本。点击任意样本可复制其十六进制代码，或导出完整的 CSS 自定义属性、SCSS 变量、JSON 或纯十六进制列表。

如何使用

1. 使用颜色选择器选择一个基础颜色，或在十六进制字段中粘贴任何十六进制值（3 位或 6 位）。
2. 可选：更改变量名称（用于导出的 CSS/SCSS/JSON 键）。
3. 选择一种混合方法。OKLCH 产生最平滑的渐变，HSL 是经典的网页方法，RGB 是最简单的线性混合。
4. 选择导出格式。每次更改内容，导出都会实时更新。
5. 点击任意样本可复制其十六进制代码，或使用导出代码面板中的复制/下载按钮。

特征

• 10 个色调 + 10 个深色 – 两条样本条，以 10% 递增，从微妙的 10% 混合到几乎纯净的 100% 混合。
• 三种混合方法 – 使用 OKLCH 实现感知均匀的步骤，使用 HSL 实现保持色调的亮度变化，或直接使用 RGB。
• 点击即可复制样本 – 每个单元格显示其十六进制值，并通过单击复制到剪贴板。
• 多种导出格式 – CSS 自定义属性、SCSS 变量、JSON 色彩板或一个可读的纯十六进制列表。
• 实时预览 – 对颜色、名称、方法或格式的任何更改都会立即重新渲染样本和代码。
• 下载导出内容 – 将生成的色彩板保存到带有正确扩展名的文件中。