跳到主要内容
Color Codes

色彩和谐

互补色查询 - 对比色、反色与配色方案

查询任意 HEX 或 RGB 颜色的互补色(对比色),并获得 OKLCH 感知互补色、反色以及分裂互补和三角配色方案。

配对预览
Aa1.95:1
Aa1.95:1
在色轮中打开

互补色

将 HSL 色相旋转 180°,即传统色轮上的对面颜色。

rgb(246, 175, 60)

感知互补色(OKLCH)

保持 OKLCH 明度和彩度,两种颜色看起来一样亮。

rgb(176, 124, 0)

反色

用 255 减去每个 RGB 通道,类似照片底片。

rgb(196, 125, 9)

分裂互补色

三角色

类似色

如何使用

互补色在色轮上彼此相对,形成最强烈的色相对比。输入一个颜色,即可得到传统的 HSL 互补色、保持相同明度的感知互补色、RGB 反色,以及基于它的其他配色方案。

  1. 1 输入基础色。
  2. 2 对比传统互补色、感知互补色和反色。
  3. 3 复制颜色,或在色轮中打开这组配色。

常见问题

什么是互补色?

色轮上正对面的颜色,色相相差 180°。例如蓝色 #3B82F6 的互补色是一种橙色。

互补色和反色有什么区别?

互补色只旋转色相,保持饱和度和亮度;反色是用 255 减去每个 RGB 通道,明暗也会翻转,所以深蓝会变成浅黄。

为什么还提供感知互补色?

HSL 色相对人眼来说分布并不均匀。OKLCH 互补色保持相同的感知明度和彩度,通常能得到更平衡的一对颜色。

界面设计中如何使用互补色?

一种作为主色,另一种少量用于强调和行动按钮。记得检查文字对比度,因为相对的色相也可能明度相近。