配色生成器

配色生成器的使用场景

• 做 PPT / 海报 / 网页时想快速拿到一套协调的配色
• 已有品牌主色，需要配套的深浅色阶和辅助色
• 写代码时不确定某个按钮用哪种 hover 色更自然

配色生成器怎么用

1. 在色板输入框填入一个 HEX 主色（如 #2563eb），或点击「随机生成」
2. 查看自动生成的同色系色阶（浅→深）、互补色与三元色色块
3. 点击任意色块复制其 HEX 值，或直接复制渐变 CSS
4. 微调主色可实时刷新整套方案

常见问题

色阶是怎么生成的？

以主色为基准，在 HSL 空间固定色相与饱和度、线性改变亮度，得到从浅到深一组均匀过渡的色阶，适合作为背景、边框、文字的不同层级。

互补色、三元色有什么用？

互补色在色环上相差 180°，用于强调与对比；三元色取 120° 间隔，适合做三色平衡的视觉方案。两者都基于 HSL 色相旋转计算。

生成的颜色可以直接用在代码里吗？

可以。色块以 HEX 显示，渐变以 CSS linear-gradient 显示，复制即可粘贴进 CSS、Figma 或设计稿。

数据会被上传吗？

不会。所有颜色计算都在浏览器本地完成，输入与结果不离开你的设备。

随机生成会不会出现很丑的搭配？

随机仅改变色相，色阶与对比度按固定算法保证可读性；如果某次不满意，再点一次随机即可。

支持导出整套配色吗？

当前支持逐个复制或复制渐变 CSS；如需导出 JSON 主题，可在浏览器控制台按需拼接，后续版本可增加导出按钮。