色阶生成器
给它一个品牌色,它就做出十档,往浅(tint)和往深(shade)各走一段。输出直接是 50 · 100 · … · 900 的写法,Tailwind 和大多数设计系统拿去就能用。
🎨 全部在你的浏览器里运行。不用装,也不用注册。
用在哪里
- · 50~200 背景、淡强调、禁用状态
- · 400~600 按钮、链接 —— 品牌色的主体
- · 700~900 按下状态、深色背景上的文字
- 每一行右边的提示,说的是拿那个颜色当背景时,白字或黑字有没有过无障碍标准(4.5:1)。
这个工具能做什么
- 从 50 到 900 共十档
- 每一档的 HEX 和 HSL
- 标出白字还是黑字读得动
- 整套复制成 CSS 变量
其他颜色工具
颜色会因屏幕和色彩配置文件而略有差别。