调色板生成器
生成 Tailwind 风格色阶与和谐配色，导出 CSS、SCSS 与 JSON。
隐私安全：所有处理均在您的浏览器本地完成，数据绝不上传基准色与配色规则
支持 #abc / #aabbcc，输入后立即重新生成未锁定的颜色。
预设示例库
色卡
点击色块编辑，点「锁定」可在重新生成时保持不变
颜色编辑（HSL）
—
—
提示：修改滑块只影响当前选中的色块；「按规则重置」会用当前基准色与规则重算该色。
导出
变量名会把中文等非 ASCII 字符转换为连字符；全中文名称将回退为 palette。
方案管理
0 / 50从 JSON 导入方案
工作原理
- 1内部以 HSL 表示颜色：先把基准色从 HEX 转到 HSL，色相用于色相环运算，饱和度与亮度用于色阶插值。
- 2色阶按 11 个亮度锚点 [97, 93, 87, 80, 71, 62, 53, 45, 38, 30, 15] 生成，饱和度两端收窄到 0.85 倍、中间保持原值，色相允许 ±5° 微调以增强设计感。
- 3和谐配色按色相环偏移取色：互补 H+180°、类似 H±30°、三角 H+120°/H+240°、四分 H+90°/H+180°/H+270°、分裂互补 H+150°/H+210°，单色系则固定色相只改饱和度与亮度。
- 4相邻阶亮度过近（差值 < 6%）时给出提示，避免色卡在视觉上重复；极浅或极深色块自动加边框并选取黑/白文字保证可读。
- 5导出时统一把 HSL 转回 HEX 与 RGB，按所选模板生成 CSS / SCSS / Tailwind / JSON / SVG 文本，全程在浏览器本地完成。
常见问题
生成的 11 阶和 Tailwind 官方色阶一致吗？
亮度趋势基本一致：工具使用与 Tailwind 相同的亮度锚点（50 阶约 97% 亮度，950 阶约 15%），因此整体明度走向接近。但饱和度的处理更简单（两端统一乘 0.85），不会完全等于官方每一阶的数值，属于「同风格」而非「逐位相同」。
锁定颜色有什么用？
锁定后，当你更换基准色、切换和谐规则或点击随机生成时，该位置的颜色会保持不变，其余颜色按新规则重算。适合先定下品牌主色，再反复尝试搭配其他阶。
什么是和谐配色？各自的关系是怎么算的？
和谐配色基于 HSL 色相环偏移：互补 H+180°；类似 H−30°、H、H+30°；三角 H、H+120°、H+240°；四分 H、H+90°、H+180°、H+270°；分裂互补 H、H+150°、H+210°；单色系固定色相只调整饱和度与亮度。这些偏移在色相环上形成经典的平衡关系。
导出的 Tailwind 配置能直接用吗？
可以。Tailwind v3 配置输出的是 theme.extend.colors 片段，键名固定为 50~950（数字开头在对象字面量中合法）；Tailwind v4 输出的是 @theme 块中的 CSS 变量。变量前缀取自你填写的方案名称，非英文名称会回退为 palette。
颜色转换会有精度损失吗？
HEX 与 RGB 本身就是整数，转换无损；HEX ↔ HSL 的往返全程不做舍入，只在界面上显示时才四舍五入到整数，因此往返误差不超过 1/255（通常为 0）。
保存的方案存在哪里？会上传吗？
方案保存在你浏览器的 localStorage（最多 50 套），页面不发起任何网络请求，断开网络也能完整使用。清除浏览器数据后方案会丢失，重要配色请用 JSON 导出自行留存。