一个基准色 → 互补、分裂互补、三角、四角、类比、单色六套配色,基于 HSL 色轮,逐色复制 HEX,浏览器本地
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
HSL 189° 94% 43%
互补色
色相 + 180°,色轮正对面,对比最强。
分裂互补
基准色加互补色两侧的两个色相(+150° / +210°)。
三角配色
三个色相在色轮上每隔 120° 均分,鲜明又平衡。
四角配色 / 矩形
两对互补色,位于 +90° / +180° / +270°。
类比色
色轮上的相邻色(-30° / +30°),柔和而协调。
单色配色
同一色相,沿明度展开,含蓄整洁。
这个工具能做什么
免费互补色计算器,也是配色方案生成器。输入或选取一个基准色,工具读出 它的 HSL 色相,再围绕色轮旋转色相,一次生成六套和谐配色:互补色(色相 加 180°,色轮正对面)、分裂互补(+150° 与 +210°)、三角配色(三个色相 每隔 120°)、四角或矩形(+90° / +180° / +270°)、类比色(-30° 与 +30° 的相邻色),以及保持色相、只展开明度的单色色带。每套都给出色块条加精确 的 HEX 值,可按单色、按整组、或一次复制全部颜色。一小块 SVG 色轮标出 三角配色落在哪里,几何关系一眼看清。基准色会写进网址,分享链接能原样 还原同一套配色。全部以纯 JavaScript 在浏览器里运算。100% 浏览器本地, 不上传,不需账号。
工具细节
- 输入
- 数值
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 10 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 颜色设计 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
互补色计算器 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
从单个 logo 色衍生整套品牌配色
你已经定下一个品牌色,比如青色 #06b6d4,需要围绕它做整套配色。把它 作为基准色填进去,类比三色用作背景,互补色用作行动号召的强调色, 单色梯度用作悬停和按下态。一次把全部 HEX 复制进设计令牌,你就有了 源自单一决策的统一配色,而不用对着六个取色器各自琢磨。
给已有主色的界面挑一个强调色
应用主色已定,某个按钮要跳出来又不能打架。把主色粘进去,看分裂互补 的那一对而不是直接互补色,得到的强调色对比够强又留在同一家族里。 基准色旁的 HSL 读数让你微调明度,在正式采用前先让强调色通过文字 对比度检查。
规划插画或海报的配色方案
海报以一个主色开场,你想要一套看起来有意为之的配色。试试三角配色 做大胆的三方平衡,或用类比色做安静的日落式过渡。SVG 色轮清楚标出 三个色相落在哪里,落笔之前就能看清这套和谐的几何关系。
用一个实时色轮讲色彩理论
给学生讲互补、三角和类比时,让他们旋转一个基准色、看着每套配色实时 更新,要直观得多。把含基准色的网址分享出去,所有人打开同一个起始 色轮,再各自往下试,什么都不用安装。
常见踩坑
把互补色误当成"只是更深或更浅的版本"。互补色是色相旋转 180°,不是明暗变化。把红色调暗得到的是暗红,色相仍是红;红色的互补色是青色。想要更亮或更暗用单色色带,想要相反的色相才用互补配色。
大面积满饱和度地用一对互补色。两个饱和的对立色满尺寸并排会发生视觉振颤、看久了累眼。把互补色当成小面积强调,即 60/30/10 里的那 10%,而不是各占半屏。
忘了单独检查文字对比度。和谐的配色讲的是色相关系,不是可读性。两个颜色在色轮上正好对立,做文字与背景时仍可能不达 WCAG 对比标准。任何文字颜色上线前,先把这对颜色放进对比度检查工具跑一遍。
隐私说明
每一步都以纯 JavaScript 在浏览器标签页里运行:HEX 转 HSL、色相旋转、 色块生成全部本地完成,你输入的颜色不会发往服务器,也不被记录。唯一要 知道的是,基准色会编码进页面网址以便分享链接生效,这意味着你粘到聊天 里的链接,会把那一个颜色记进对方服务器的访问日志。如果连基准色都敏感, 请复制 HEX 值带走,而不是分享网址。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。