🧰Locly

颜色色阶与深浅生成

从 HEX 生成 tint、shade 与 50–950 色阶

工具简介

色阶生成器可从一个 HEX 生成 tint、shade 与 50–950 色阶，并导出 HEX、RGB、CSS 变量或 Tailwind 配置。全程在浏览器本地处理，无需上传。

使用方法

  1. 输入 HEX
  2. 点击生成
  3. 查看 50–950 色阶与 tint/shade
  4. 复制 HEX/RGB/CSS 变量/Tailwind
  5. 改基础色后重新生成

常见使用场景

  • 设计系统：从品牌色铺色板
  • Tailwind：导出颜色对象片段
  • UI：快速取深浅变体
  • 无障碍：配合对比度工具挑选
  • 隐私：离线生成色板

常见问题（FAQ）

Q1: 50–950 色阶是什么？

由基础 HEX 推导的由浅到深色阶，类似设计系统色板。

Q2: 能复制 Tailwind 配置吗？

可以。导出适合放入 Tailwind theme 的颜色对象片段。

Q3: 支持 3 位 HEX 吗？

支持。如 #0af 会先扩展为 6 位再生成色阶。

Q4: 数据会上传吗？

不会。全程在浏览器本地运行，不会上传。

Q5: tint 和 shade 有何区别？

tint 向白色混合变浅，shade 向黑色混合变深。

相关工具

颜色转换图片调色板对比度检测CSS 渐变生成器