颜色明暗变体生成器
颜色
从一种品牌色出发，设计师通常需要完整色阶：浅 tint 用于悬停态和背景，深 shade 用于文字和激活态。本工具把基础色按均匀间隔向白色（tint）、黑色（shade）、灰色（tone）混合。挑档数（2–20）、输出格式（HEX、RGB、HSL），点任意色块即可复制值。适合搭建 Tailwind 风格的 50-900 色阶、按钮状态和无障碍 UI 调色板。
—
#3B82F6
tint (更亮)
shade (更暗)
点任意色块复制值。tint 适合背景和悬停态，shade 适合文字和激活态。
使用方法
- 选基础色——用拾色器或粘贴 HEX 值。
- 选模式：全部（tint + shade）、仅 tint、仅 shade、tone（含灰）。
- 调档数和输出格式，点任意色块复制其值。
常见问题
- tint、shade、tone 的区别？
- tint 与白混合（更亮）、shade 与黑混合（更暗）、tone 与灰混合（更柔和）。三者都保持色相，但明度/饱和度变化不同。
- 和调 HSL 明度一样吗？
- 不——RGB 里往白色方向混合，与提高 HSL 明度在感知上不同。纯 RGB 混合在变亮时也降低饱和度（更「粉彩」），这通常正是设计师想要的 tint 效果。
- 怎么对应 Tailwind 50–900 色阶？
- 从基础色生成约 9 个 tint 和 9 个 shade。浅端近似 50–400、深端近似 600–900。Tailwind 的精确色阶是为视觉均匀手工调过的，所以这只是起点——再用眼睛微调。
- 最浅的 tint 为何不是纯白？
- 每档只是离白色的一定比例。10 档时第 1 档约 9% 接近白色。要纯白就得无限档——但最后一档通常已足够接近「最浅」背景。