在线三角色彩方案工具
根据基础颜色生成色轮上间隔120度的三角色彩方案，支持HEX、RGB、HSV和HSL联动编辑,快速生成兼具高对比度与视觉平衡的配色方案，解决多色搭配中的冲突与杂乱问题。…
开始使用
在线三角色彩方案工具说明
三角色彩方案从一个基础颜色出发，在色轮上分别旋转 120° 和 240°，生成间距均等、对比鲜明且相对平衡的三色组合。
使用方法：在线三角色彩方案工具
- 通过二维色板和色相条选择基础颜色，也可以直接填写 HEX、RGB、HSV 或 HSL。
- 点击“生成三角色彩”，工具会显示基础色及另外两种三角色。
- 三个结果面板均支持手工输入颜色参数，HEX、RGB、HSV、HSL 会实时联动。
- 点击“复制全部”复制三种颜色；点击“清空”恢复默认基础颜色并移除结果。
工具作用
- 依据标准色轮关系自动生成三角色彩方案。
- 在保持饱和度和亮度基本一致的同时获得清晰的色相对比。
- 同时输出多种颜色格式，方便设计与前端开发使用。
- 减少凭感觉试色的时间，快速建立协调的三色体系。
计算原理
将基础颜色转换为 HSL。若基础色相为 H，则三角色相为：H、(H + 120°) mod 360°、(H + 240°) mod 360°，三者沿用相同的饱和度 S 与亮度 L。
应用场景
- 网页与应用界面：规划主色、强调色和辅助色。
- 品牌视觉：建立具有辨识度的三色品牌体系。
- 海报与插画：获得对比强烈又相互平衡的创意配色。
- 数据可视化：为三组数据或三类状态配置易区分颜色。
- 信息图表：统一标题、图形和重点信息的色彩关系。
- 室内与产品设计：探索主体、点缀和背景之间的组合。
使用建议
三角色对比通常较强。实际设计中可选择一种颜色作为主色，另外两种用于较小面积的强调元素；也可以适当降低某一颜色的饱和度或调整亮度，以建立更清晰的视觉层级。
隐私说明
所有配色计算都在浏览器本地完成，不会上传颜色数据。
具体示例
假设您选择的基础颜色为 #FF5733（色相约 14°）。点击“生成三角色彩”后，工具将自动计算出色相偏移 120° 和 240° 的另外两种颜色：
- 基础色：#FF5733（H: 14°, S: 100%, L: 60%）
- 第二色：#33FF57（H: 134°, S: 100%, L: 60%）
- 第三色：#5733FF（H: 254°, S: 100%, L: 60%）
这三种颜色在色轮上间隔均匀，形成高对比且平衡的三角配色。您可以直接复制这些色值用于设计项目。
常见问题
为什么生成的三角色看起来对比太强烈？
三角配色本身具有高对比度，适合用于强调或活泼的设计。若觉得过于刺眼，可适当降低其中一种颜色的饱和度或调整亮度，以柔化整体效果。
可以手动调整生成的三角色吗？
可以。每个结果面板都支持直接输入 HEX、RGB、HSV 或 HSL 值，所有格式会实时联动更新，方便您微调。
颜色数据会被上传到服务器吗？
不会。所有计算均在您的浏览器本地完成，颜色数据不会离开您的设备，请放心使用。
此工具无需安装，所有处理均在当前浏览器本地完成，不会上传输入内容或本地文件。