配色方案生成器
从任意基础颜色生成互补色、类比色、三角配色和四方配色方案。输入 HEX 或使用拾色器，即时预览四种和谐配色。点击色块复制 HEX，或一键复制方案全部颜色。纯浏览器运行，无需注册。
使用方法
- 在输入框中填写 HEX 值（如
#3b82f6），或使用拾色器选择基础颜色。 - 四种配色方案即时更新：互补色、类比色、三角配色、四方配色。
- 点击任意色块，复制其 HEX 值。
- 点击方案卡右上角的复制全部，一次性复制该方案所有 HEX 值。
四种色彩和谐方案详解
互补色（Complementary）
色环上相差 180° 的两种颜色。对比强烈、视觉冲击力大。适合需要突出重点的按钮、标题和高对比设计。
类比色（Analogous）
基色左右各 ±30° 的三种相邻颜色。过渡自然、和谐柔和。常见于自然风格设计和注重视觉舒适度的界面。
三角配色（Triadic）
色环上均匀分布、相距 120° 的三种颜色。既有变化又保持平衡，适合活泼、多元的品牌设计。
四方配色（Tetradic）
色环上均匀分布、相距 90° 的四种颜色。色彩最为丰富，通常以一种颜色为主色，其余作为点缀。
HSL 颜色模型
- 色相（H）：色环上的角度（0–360°）。红 = 0°，绿 = 120°，蓝 = 240°。
- 饱和度（S）：颜色纯度。0% 为灰色，100% 为纯色。
- 亮度（L）：0% 为黑色，50% 为纯色，100% 为白色。
相关工具
FAQ
这个工具可以生成哪些配色方案？
工具基于 HSL 色环生成四种经典色彩和谐方案：互补色（基色 + 180°）、类比色（±30° 相邻）、三角配色（三色均匀 120° 分布）、四方配色（四色均匀 90° 分布）。所有颜色与基础颜色保持相同的饱和度和亮度，确保方案视觉统一。
支持哪些颜色格式输入？
输入框接受 6 位 HEX 值（如 #ff5500），也可使用内置拾色器可视化选色。输入即时响应，无需按 Enter。
如何复制颜色？
点击任意色块即可复制其 HEX 值到剪贴板。每个方案卡右上角还有「复制全部」按钮，一键复制该方案所有 HEX 值（空格分隔，如 #ff5500 #0055ff）。
为什么所有配色的亮度相同？
工具固定饱和度（S）和亮度（L），仅旋转色相（H），这是色彩和谐生成的标准做法，可确保各颜色视觉平衡。如需同一颜色的明暗变体，请使用颜色色阶生成器。
工具是纯客户端运行的吗？
是的。所有颜色计算均在浏览器中通过 JavaScript 完成，不向任何服务器发送数据。