输入一个基色,生成 Tailwind 风格 50–950 明暗色阶:逐档复制 HEX,一键导出 Tailwind / CSS / SCSS / JSON,浏览器本地
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
'50': '#f1f6fe',
'100': '#e3edfd',
'200': '#bbd4fc',
'300': '#8fb8fa',
'400': '#5996f7',
'500': '#3b82f6',
'600': '#0b5ce0',
'700': '#094cb9',
'800': '#073c92',
'900': '#042e72',
'950': '#011e4b',
},
},
},
},
};这个工具能做什么
粘进一个基色,立刻得到完整的 11 档明暗色阶(50、100、200 … 900、950),格式正好是 Tailwind、Radix 以及大多数设计系统 token 文件期待的样子。它和"配色方案生成器"不一样:配色方案 给你的是几个不同色相(互补、三色、邻近)用来配色;这个工具 只保留一个色相,沿亮度轴走:顶部(50–200)是接近白的浅色 调,用作背景和 hover 填充;中间是你的基色对齐到最近一档; 底部(800–950)是深色调,用作正文文字和边框。每一档都标出 自己的 HEX,以及对白底、黑底的 WCAG 2.2 对比度,一眼就能看出 哪几档能安全用作正文文字、哪几档只能做装饰。基色会锚定到最近 的 50–950 档(比如 #3b82f6 这种中间调会落在 500),其余各档 用 HSL 亮度插值生成,并叠了一条感知缓动曲线,浅色端不至于 糊成一片白,深色端也不会两三档就压成纯黑。一键复制单档,一键 把整组色阶导出成 Tailwind 的 colors 块、CSS 自定义属性、SCSS 变量或 JSON。100% 浏览器本地,你的品牌色不会离开浏览器标签页。
工具细节
- 输入
- 文本 + 数值
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 9 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 颜色设计 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
颜色色阶生成器 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
给新设计系统建一套颜色 token
你在起一套设计系统,设计师给了你一个品牌蓝 `#3b82f6`。 Tailwind 要的是 11 档色阶,不是一个孤值。把 HEX 粘进来, 读出 50–950 色阶,把导出标签切到 Tailwind,整块直接复制到 `tailwind.config.js` 的 `colors.brand` 下。现在 `bg-brand-50` 到 `text-brand-950` 全都生效了。每个品牌色(成功绿、危险红) 重复一遍,你的 token 层就用五次"粘+复制"搞定,而不是手调 55 个 hex 值。
生成暗色模式的表面与文字档位
暗色模式要的是同一个色相,但用法反过来:900–950 档变成你的 页面表面,50–200 档变成你的文字。粘进品牌色,看深色端的对比度 徽章,挑 950 档当最深的面板,再确认浅色档(50–200)对*那个 深色档*过 AA,而不是对白底。整条色阶给你一个一致的家族,让明暗 两套主题看起来是同一个品牌,而不是两套不相干的配色。
补全继承来的旧配色里缺的档位
你接手一份样式表,里面只定义了 `--blue-500` 和 `--blue-700`, 三个组件各自凭感觉造中间的蓝。粘进 500 的值,读出生成的 600 以及代码库里缺的 300/400,把这几个精确 HEX 抄回样式表。现在 每个组件都从同一条色阶取色,而不是各拿一个 `#5a93f0` 之类、 慢慢偏离品牌的猜测值。
给彩色背景挑一个能读的文字色
你有一个彩色提示框,需要框上的文字过 WCAG AA。把框的背景色 粘进来,沿色阶往下扫"对白底"和"对黑底"两列对比度。第一个对 你的背景亮度显示 ≥4.5 的深色档(通常是 800 或 900)就是安全 文字色,直接复制。不会再把 `text-blue-400` 放到 `bg-blue-100` 卡片上、对比度不达标还发上线。
把一条完整的、命名好的色阶交给开发
别再往 Slack 里粘一个 HEX 然后说"hover 态调浅点儿"。生成完整 色阶,复制可分享 URL(基色就在 query string 里),把链接发出去。 开发打开的是和你看到的同一条色阶,导出成他们技术栈要的格式 (运行时主题用 CSS 变量、Style Dictionary 用 JSON),"调浅点" 到底指哪一档完全没有歧义,就是 400 档对 500 档。
常见踩坑
把 50 档当成"几乎就是基色"。不是的,50 是最浅的近白色调,用作页面背景;500 才是最接近多数品牌色的中间调。如果你的品牌色和 50 档长得完全不像,这是正常的;看你基色锚定到的那一档(通常是 400–600)。
拿 300 或 400 这种浅档当白底上的正文文字。这些档几乎不可能对白底过 WCAG AA(≥4.5),它们是给填充和边框用的。看"对白底"的对比度徽章,需要可读文字时去拿 700–900。
喂进一个高饱和、极浅或极深的基色,却指望得到一条均衡的 11 档色阶。如果基色本身已接近白(比如
隐私说明
色阶的每一档都由浏览器标签页里运行的纯 JavaScript HSL 运算算出。 基色、推导出的 11 档、WCAG 对比度、四种导出格式,全都不发到 任何服务器,也不记录你生成过哪些颜色。唯一要留意的:基色会写进 可分享 URL 的 query string(`?c=3b82f6`),所以你把含未发布品牌色 的"分享链接"粘到 Slack 或邮件时,对方服务器的访问日志会留下这个 HEX。如果是处于保密期的品牌色,手动复制导出文本,别分享 URL。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。