颜色工具

色轮工具在线配色器

基于主色生成互补色、邻近色、三角色、分裂互补和四角色方案，实时输出 HEX、HSL 和 CSS 变量，适合网页设计、品牌配色和设计系统扩展。

实时配色

通过色轮关系快速找到更有结构的配色组合，再把结果色继续带到混色、透明度和对比度工具中落地到真实页面。

主色选择HEX 颜色值

支持 3 位和 6 位 HEX。主色变化后会立即重算色轮位置和配色方案。

H 控制色轮角度，S 控制饱和度，L 控制明度。调节这三个值后，互补色、邻近色和三角色会同步刷新。

#FF6347互补色

当前方案

互补色

基于主色生成 2 个配色节点

两种颜色在色轮上相隔 180°，对比最强，适合强调和按钮高亮。

如果你在做 UI 主题扩展，建议先用色轮确定关系，再把结果色交给混色、对比度和透明度工具继续细化。

主色#FF63479, 100%, 64%

互补色#47E3FF189, 100%, 64%

主色 HEX: #FF6347
主色 RGB: 255, 99, 71
主色 HSL: 9, 100%, 64%
当前方案: 互补色
配色 HEX 列表: #FF6347, #47E3FF

CSS 变量预览

--color-wheel-main: #FF6347;
--color-wheel-complement: #47E3FF;

色轮适合解决什么问题

当你拿到一个品牌主色，却不知道如何扩展次级色、强调色和辅助色时，色轮工具是最直接的起点。

互补色适合按钮高亮、重点提示和视觉焦点建立。
邻近色更适合活动页头图、插画背景和氛围型配色。
三角色和四角色更适合多模块页面、内容频道和设计系统扩展色。

为什么要看 HSL 关系

同样的色轮关系，如果饱和度和明度控制不好，最终页面依然会显得刺眼或层级混乱。

通过调节 `H` 可以在色轮上移动，通过 `S / L` 可以统一色彩强度和明暗层级。
做设计系统时，建议先确定主色关系，再统一收敛饱和度和明度规则。
最终上线前，还应配合对比度检测工具验证正文、按钮和背景的可读性。

常见色轮搭配参考

下面这组静态参考可以帮助你更快理解不同色轮方案在网页配色中的常见用途。

名称主色方案派生配色适合场景

品牌蓝互补#1E88E5互补色#E57B1F适合 CTA、重点提示和高对比视觉入口。

番茄红邻近#FF6347邻近色#FF4788 / #FFBF47适合活动页、暖色海报和内容封面过渡色。

森林绿三角#2E7D32三角色#332F7F / #7F332F适合多栏目专题页、信息模块和品牌扩展配色。

墨夜蓝分裂互补#1F2937分裂互补#37211F / #35371F适合深色背景下的强调块、标签和状态层级。

使用建议

如果你正在正式做一个站点或设计系统，不要停留在“看起来好看”，还要保证可落地、可复用和可维护。

先用色轮工具找到关系正确的一组颜色，再通过混色工具做更柔和的中间层级。
如果要做蒙层、标签底色或悬浮态，可以继续配合透明度颜色转换器补半透明版本。
最终沉淀到项目时，建议把这组颜色以 CSS 变量或设计 token 的形式统一管理。

示例输入输出

通过典型色轮方案，帮助用户快速理解不同配色结构的输出方式。

纯红互补色

适合快速查看高对比强调色组合。

输入

主色

#FF0000

方案

complementary

输出

配色结果

主色: #FF0000
互补色: #00FFFF

品牌蓝三角色

适合为栏目、专题或营销活动扩一组多色方案。

输入

主色

#1E88E5

方案

triadic

输出

配色结果

主色: #1F89E5
三角 +120°: #E51F89
三角 +240°: #89E51F

常见问题

色轮工具 FAQ 重点解释互补色、邻近色和三角色的实际用途。

互补色、邻近色和三角色有什么区别？

互补色对比最强，适合强调；邻近色过渡更自然，适合品牌延展；三角色更平衡，适合做更丰富的配色组合。

色轮生成的配色能直接上线吗？

可以先作为起点，但正式上线前仍然建议再做对比度校验、品牌适配和背景层级微调。

什么时候优先选邻近色方案？

内容站、SaaS 后台、信息密度高的页面更适合邻近色，因为它们更稳定，不容易让页面显得太跳。