首页·颜色工具·色阶生成器

色阶生成器

给它一个品牌色,它就做出十档,往浅(tint)和往深(shade)各走一段。输出直接是 50 · 100 · … · 900 的写法,Tailwind 和大多数设计系统拿去就能用。

🎨 全部在你的浏览器里运行。不用装,也不用注册。

用在哪里

  • · 50~200 背景、淡强调、禁用状态
  • · 400~600 按钮、链接 —— 品牌色的主体
  • · 700~900 按下状态、深色背景上的文字
  • 每一行右边的提示,说的是拿那个颜色当背景时,白字或黑字有没有过无障碍标准(4.5:1)。

这个工具能做什么

  • 从 50 到 900 共十档
  • 每一档的 HEX 和 HSL
  • 标出白字还是黑字读得动
  • 整套复制成 CSS 变量

其他颜色工具

颜色会因屏幕和色彩配置文件而略有差别。