配色方案生成器
使用免费在线生成器即时创建美丽和谐的配色方案。支持单色、类似色、互补色、三色、分裂互补和四色模式。通过HSL滑块微调颜色，锁定喜欢的颜色，导出为CSS变量、Tailwind配置、JSON或SVG格式。100%浏览器运行，数据永不离开您的设备。
如何生成配色方案？
点击"生成"按钮或按空格键创建新的随机配色。使用和谐模式选择器在单色、类似色、互补色、三色、分裂互补或四色配色方案之间切换。
如何锁定喜欢的颜色？
点击任意色卡上的锁定图标。锁定后的颜色在生成新配色时将保持不变，而未锁定的颜色将被替换。
如何导出配色方案？
点击"导出"按钮，选择CSS变量、Tailwind配置、JSON数组或SVG调色板格式。配色方案将自动复制到剪贴板。
不同的和谐模式有什么区别？
单色模式使用同一色相，变化饱和度和亮度。类似色使用相邻色相（±30°）。互补色使用对面色相（相隔180°）。三色使用3个等距色相（相隔120°）。分裂互补使用基础色相加其补色两侧的色相。四色使用4个等距色相（相隔90°）。
可以围绕我的品牌色来配色吗？
可以。先用基准色选择器选定品牌色，再挑一种和谐模式，其余四个颜色就会围绕它生成。之后还能用 HSL 滑块逐个微调。
支持哪些导出格式？
配色可以导出为 CSS 变量、Tailwind 配置、JSON 数组或 SVG 文件。切换格式时代码预览会立即更新，直接复制粘贴到项目里就能用。
色值能按 HEX、RGB 还是 HSL 查看？
都可以，每个颜色的数值可在 HEX、RGB 和 HSL 之间切换，不用手动换算就能拿到设计工具或代码库需要的格式。
每个颜色角上的小徽标是什么意思？
它表示在当前颜色上，白色还是黑色文字更易读。当对比度达到 4.5:1 时徽标显示通过，符合 WCAG 无障碍建议——选按钮或横幅背景色时特别有用。
我的配色会被上传到服务器吗？
不会。整个工具都在浏览器本地运行，颜色数据不会离开你的设备。页面加载完成后甚至离线也能继续使用。
如何使用配色方案生成器
以单色、邻近色、三角配色等模式生成和谐色板，全部在浏览器本地计算。锁定喜欢的色块、微调后按你的框架格式导出，数据不离开设备。
- 在下拉框中选择配色 Mode：Random、Monochromatic、Analogous、Complementary、Triadic、Split-complementary 或 Tetradic。
- 设定 Base 颜色，让每个生成的色块都源于品牌色相，然后不断重新生成直到满意。
- 对不喜欢的色块点 ✕ 移除后重掷；留下的色块可用 HSL 滑块继续微调。
- 把色块放到浅色和深色稿子上对比，确认文字在每个颜色上都清晰可读。
- 打开 Export Palette，将配色导出为 CSS Variables、Tailwind Config、JSON Array 或 SVG Palette。
在 Random 模式重新生成前先锁定 Base 色块，这样探索的始终是品牌色周围的变化，不会把它弄丢。
相关工具
- 颜色转换器 免费在线颜色转换器。即时转换 HEX、RGB、HSL、HSV 格式，带可视化拾色器。100% 隐私保护，浏览器本地运行。
- 颜色选择器 使用浏览器吸管从屏幕任意位置取色，即时复制HEX、RGB、HSL颜色代码。免费在线取色工具。
- 颜色对比度检查器 检查颜色对比度是否符合 WCAG 2.1 标准。即时验证文本和 UI 元素的 AA 和 AAA 级别。
- 色盲模拟器 免费在线色盲模拟器。检测设计在红色盲、绿色盲、蓝色盲等色觉缺陷下的效果。100%隐私保护，浏览器本地运行。
- GIF拆帧工具 从GIF动画中提取并下载单帧为PNG或精灵图。免费在线工具，支持预览和ZIP导出。
- GIF倒放 在线免费将GIF动画倒序播放。上传、预览并即时下载倒放的GIF文件。
- GIF变速工具 在线更改GIF动画速度。即时加速或减速GIF文件。
- 视频转GIF 在线将视频转换为动画GIF，直接在浏览器中调整质量、帧率和分辨率，无需上传文件。