什么是互补色查找器？
互补色查找器可为任意输入颜色计算色轮上的对立色。还能展示类似色、三角色和分裂互补色方案，方便你搭建协调的配色。
工具底层用 chroma-js 的 HSL 计算,把色相轮按固定角度旋转,得到六种配色方案:互补色(180°)、邻近色(±30°)、三等分色(120° 和 240°)、分裂互补色(150° 和 210°)、四色矩形/正方(90°、180°、270°),以及单色调(基础色的明暗变化)。每个色块都同时显示 HEX、RGB、HSL 三种值,任一格式点一下就能复制,直接粘到 Figma、Tailwind 配置或 CSS 规则里都行。
使用方法
- 第一步——以 HEX(#FF6600)或 RGB(255 102 0)格式输入基础颜色,或使用取色器选取。
- 第二步——即时查看互补色（色轮上 180° 对立色）及其颜色代码。
- 第三步——探索其他色彩和谐方案（类似色、三角色、分裂互补色），并可复制任意色块的值。
何时使用
- 围绕一个已有的主色,快速搭出品牌色板,不用打开 Adobe Color。
- 挑一个在页面背景上能跳出来的强调按钮颜色。
- 为图表选几组数据色,保证相邻颜色不互相干扰。
结果
一位品牌设计师输入主色橙 #FF8C00，获得互补蓝 #0073FF，以及类似暖色调 #FF4400 和 #FFB800，构建出统一协调的配色方案。
常见问题
- 互补色和分裂互补色有什么区别?
- 互补色就是色轮上正对面那一种(180°)。分裂互补色取的是正对面两侧的两种颜色(150° 和 210°)。分裂版本看起来没那么冲突,做整个界面更容易协调。
- 对很暗或很浅的底色,还能算出有用的配色吗?
- 基于色相的配色(互补、邻近、三色组、分裂互补、四色矩形)只旋转色相,饱和度和亮度都保持不变,所以浅底色得到浅色搭档,深底色得到深色搭档。单色调则刻意围绕你的色相调整亮度。如果基于色相的搭档看起来太淡,把底色的饱和度调高再生成。
- 用的是美术轮(RYB)还是屏幕轮(RGB)?
- 屏幕轮。这里红色(#FF0000)的互补色是青色(#00FFFF),不是颜料理论里的绿色。数字设计选这个模型才对;真要混颜料的话会觉得有点不对劲。
- 为什么有的底色生成出来的互补色看起来差别不大?
- 纯灰色的色相是未定义的,旋转没有支点,结果就是返回同样的灰。给底色加上哪怕 5% 的饱和度,互补色就能正常拉开。
- 能一次把整个色板导出来吗?
- 可以，有四种方式。「下载调色板」把每个色块和它的 HEX 值存成纯文本文件;「下载 CSS」把调色板导出为现成的 CSS 自定义属性(例如 --color-complementary-1: #0099FF;);「Tailwind 配置」生成可直接粘进 tailwind.config.js 的颜色对象;「PNG 图片」则把整份调色板存成带标注的图片,方便在设计评审中分享。