颜色色阶生成器 - 亮色调暗色调灰色调工具

颜色色阶生成器：亮、暗、灰三种色调

颜色色阶生成器能把任意基础色变成一整套更亮、更暗和更柔和的变化。选好一个颜色，它会立刻生成三条色阶——亮色调、暗色调和灰色调——你可以直接复制或导出到项目里。

它专为需要统一颜色梯度的设计师和开发者打造：悬停态、激活态、边框、背景和暗色模式渐变，都从同一个源色出发。先调好要几级以及每级的跨度，再把这些值取为 CSS、SCSS、Tailwind 或 JSON。

隐私优先：每个颜色都在你的浏览器中计算。你的基础色和设置绝不会上传到服务器，你的选择也不会被任何追踪。

点击颜色方块打开取色器，在输入框里输入 HEX 代码（完整的 #3B82F6 或简写 #F00），或者点击随机颜色换一个新的起点。

用级数选择生成多少种变化（5、10、15 或 20），用增量设置每级的跨度（5%、10% 或 20%）。亮色调、暗色调和灰色调会实时更新。

点击任意色块，就能把它的 HEX 代码复制到剪贴板。每个色块还会显示混合百分比，让你清楚它到底有多亮、多暗或多柔和。

打开全部复制菜单，选择 CSS 变量、SCSS 变量、Tailwind 配置或 JSON。整套配色会复制到剪贴板，可直接粘贴进你的代码。

从一个基础色生成亮色调（混合白色得到更亮的值）、暗色调（混合黑色得到更暗的值）和灰色调（混合灰色得到更柔和的值）。

每条色阶可选 5、10、15 或 20 级，并把强度跨度设为 5%、10% 或 20%，让梯度契合你的设计系统。

使用可视化取色器，直接输入 HEX 代码（像 #F00 这样的简写会自动展开），或一键生成随机颜色。

改变基础色、级数或增量时，每条色阶都会立即重绘，让你无需等待就能微调结果。

把整套配色复制为 CSS 自定义属性、SCSS 变量、Tailwind 颜色配置或结构化 JSON，适配任何工作流。

单独点击某个色块即可复制它的 HEX 代码，或用全部复制一次性取走整套生成的配色。

页面链接会随你的颜色、级数和增量一起更新，分享给谁，谁打开的就是完全相同的配色。

所有颜色运算都在你的设备上完成。不上传任何东西，工具即开即用，还能保护你的选择隐私。

亮色调（tint）给颜色加入白色让它变亮，暗色调（shade）加入黑色让它变暗，灰色调（tone）加入灰色让颜色变柔和、而明度变化不大。本工具会同时从你的基础色生成这三条色阶。

用取色器、HEX 代码或随机按钮选一个基础色。暗色调色阶会立即出现在基础色下方，并逐级变暗。调整级数和增量，就能控制生成多少种暗色调以及它们之间的间距。

级数决定生成多少个色块，增量决定它们之间的百分比间隔。10 级配 10% 增量时，你会得到 10%、20%、30%……一直到 100% 的值。由于混合到 100% 就停止，20% 增量会把每条色阶限制为 5 个色块（20%、40%、60%、80%、100%）。

可以。打开全部复制菜单，选择 CSS 变量、SCSS 变量、Tailwind 配置或 JSON。整套配色会复制到剪贴板，可直接粘贴进你的样式表、Sass 文件、Tailwind 主题，或任何数据驱动的设置。

你可以用可视化取色器或输入 HEX 代码来设置基础色。无论是 #3B82F6 这样的完整 6 位代码，还是 #F00 这样的 3 位简写都支持——简写会自动展开（例如 #F00 变成 #FF0000）。生成的色块同样以 HEX 值给出。

从浏览器地址栏复制链接即可。它带有你的基础色、级数和增量，打开后会重现完全相同的一组亮色调、暗色调和灰色调。

不会。所有计算都在你的浏览器中运行，不会向服务器发送任何内容，你的颜色选择也不会被存储或追踪。