互补色查找器

示例

显示的 HEX、RGB 和 HSL 值描述的是同一个 sRGB 颜色。可复制结果并用于 CSS 或其他设计工具。

HSL 补体与 RYB 补体

• HSL（屏幕）：红色↔青色、绿色↔品红色、蓝色↔黄色。这是 CSS 所用、由 sRGB 推导出的 HSL 色相角几何关系，并非对光线混合的模拟。
• RYB（艺术家）：红色↔绿色、蓝色↔橙色、黄色↔紫色。这是传统教学约定，并不能预测具体颜料的混合结果。

本工具只使用数字 HSL 模型，不提供颜料 RYB 色轮转换，因为颜料的互补效果取决于材料和混合方式。

互补色适合用在哪里

• 品牌背景上的 CTA 按钮：将主色与其互补色搭配，让按钮更加醒目。
• 数据可视化的双系列图表（盈利与亏损、之前与之后）。
• 插画阴影：橙色南瓜的阴影用蓝色画比用更深的橙色画更有说服力。
• 体育品牌设计：许多球队采用互补色或分裂互补色配色（蓝/橙、红/绿、黄/紫）。

互补色不适合用在哪里

• 背景上的正文文字：直接互补色（绿底红字、橙底蓝字）读起来不舒服，强烈的色差会引起视觉疲劳。
• 整面使用：一块 50% 红、50% 绿的屏幕令人疲惫。互补色应作点缀（占面积的 5%-10%），而不是主色。
• 品牌一致性：互补色容易显得杂乱。大多数现代品牌采用单色系或类似色 + 一个强调色，而不是成对的双互补色。

分裂互补色

分裂互补色（基准 + 150° + 210°）往往是更实用的选择：

• 与互补色区域保持高对比度。
• 避免直接互补色带来的视觉抖动。
• 为分层设计提供两个强调色。

示例：基准 = 蓝色 → 互补色 = 橙色（生硬）→ 分裂互补色 = 红橙色 + 黄橙色（更有层次）。

降低互补色的饱和度

纯互补色在满饱和度下很少好看。把其中一种或两种颜色的饱和度降低 20%-40%，可以得到更柔和的配色：

• 红色（S=100%）+ 青色（S=100%）= 视觉抖动。
• 红色（S=60%）+ 青色（S=60%）= 经典海报配色。
• 品牌砖红（S=45%）+ 暗调青色（S=30%）= 现代且实用。

使用前的检查

• 配色的对比度：查找器会给出该数值。低于 4.5:1 时，文字无法满足 AA 级标准。
• 在中性背景上测试：互补色在白色、灰色、黑色背景下看起来各不相同。
• 如果最终用于印刷，请做印刷测试，相比 RGB，CMYK 可能会改变饱和度以及互补色之间的关系。