相反颜色计算器

功能说明

「相反颜色」在日常语境里其实对应两个不同的概念，做设计时容易混淆：一个是反相色（RGB 每通道取 255 − 原值），常用于暗色模式、图片反色和高对比强调；另一个是互补色（色相旋转 180°，保持饱和度和明度），在色相环上正对面，视觉冲击强，适合做点缀与CTA按钮。

本工具同时给出这两个颜色，外加等亮度灰与文字配色建议，一次把配色需要的信息都算清楚。

使用步骤

1. 用取色器选择颜色，或直接在「HEX 输入」里粘贴色值（支持 #abc 与 #aabbcc 两种写法）。

2. 结果区给出反相色、互补色、等亮度灰的具体色值，并实时预览三块色板。

3. 下方的对比度建议会告诉你这个底色上应配黑字还是白字，符合无障碍标准（WCAG AA 要求 4.5:1 以上）。

常见问题

Q：为什么反相后的颜色看起来有点「脏」？
A：因为 RGB 反相是逐通道取补，色相会发生不确定的偏移，得到的结果往往不是色相环上的正对面颜色。想要更协调的对比效果，请用「互补色」。

Q：暗色模式该用反相色吗？
A：不建议直接反相。整站反相会让图片、图表也一起变色，观感奇怪。暗色模式应重新设计一套变量（背景 #121212 系、文字 #e0e0e0 系），而不是简单取补色。

Q：互补色可以直接做正文配色吗？
A：不建议大面积使用。互补色对比强烈，大面积相邻容易造成视觉疲劳，更适合做按钮、图标、数据高亮等小面积点缀。

你可能还想问

反色和补色是一回事吗？

常被混用：RGB 通道取反得到「反色」（类似负片），色轮上正对的「补色」保持明度与饱和度、只反向色相；设计上做对比配色应看补色。

反色有什么实用价值？

快速生成暗色主题（深浅互换）、做视觉测试（反色下更易发现对比度不足）、做负片效果；但反色后的品牌色通常不可用于正式物料。

反色后文字看不清怎么办？

整体反色会打乱原有的明暗层次；正确做法是按语义分别映射（背景转深色、文字转浅色、强调色保留），而不是全图一键取反。

相关工具

相关内容