#FFFFFF -> #000000
纯白会反转成纯黑，这是检查文本与背景极端对比关系时最快的一组基准值。
常见用途
快速判断某个看似中性的 token 是否已经处在对比度光谱的最边缘。
为什么重要
很多团队会先用这组颜色验证基础可读性假设，再继续细调更柔和的中性色。
反转 HEX 颜色
粘贴 HEX 代码或直接挑色，即可生成它的数学反色，并按你的工作流复制所需格式。
HEX 输入
支持 #RGB、#RGBA、#RRGGBB 与 #RRGGBBAA，也可以省略 #。
常用示例
这个工具实际在计算什么
数学意义上的反色
每个 RGB 通道都按 255 - 当前值 进行翻转，因此得到的是源色的精确负片。
它不等于互补色
互补色来自色轮上的色相关系，而反色是直接的数值相反，这两者不是一回事。
更适合真实 UI 工作
你可以把结果直接用于暗黑模式实验、token 巡检、截图批注或 QA 沟通。
可直接复制的结果
在同一视图中同时查看原色和反色，便于修改 token、主题或 QA 备注。
源色
原始颜色
#0EA5E9
反色
反转颜色
#F15A16
原始颜色
HEX
#0EA5E9RGB
rgb(14, 165, 233)HSL
hsl(199, 89%, 48%)反转颜色
HEX
#F15A16RGB
rgb(241, 90, 22)HSL
hsl(19, 89%, 52%)对比度与可读性快照
集中查看团队在发版、验收或暗黑模式调试时最常检查的几组对比关系。
原色背景上的反色文字
#F15A16 / #0EA5E9
对比度: 1.22:1
AA 正文: 未通过AA 大字: 未通过AAA 正文: 未通过
原色背景上的黑字
#000000 / #0EA5E9
对比度: 7.58:1
AA 正文: 通过AA 大字: 通过AAA 正文: 通过
原色背景上的白字
#FFFFFF / #0EA5E9
对比度: 2.77:1
AA 正文: 未通过AA 大字: 未通过AAA 正文: 未通过
透明色对比说明
透明颜色会保留 alpha 通道。对比度预览会先将透明度铺到白底上，以便得到稳定的 WCAG 估算值。
集中查看团队在发版、验收或暗黑模式调试时最常检查的几组对比关系。
支持 #RGB、#RGBA、#RRGGBB 与 #RRGGBBAA，也可以省略 #。
为什么这类 HEX 反色工具在生产工作中有价值
页面刻意保持克制：更快得到反色、更清楚复制结果，并直接看到无障碍信号，而不是堆成一整套调色平台。
多格式即时输出
无需切到第二个工具，就能复制原色与反色的 HEX、RGB、HSL。
适合暗黑模式与 QA
在改动代码前，先判断原背景更适合搭配黑字、白字还是反色文字。
状态可分享
每个有效颜色都会写入 URL，方便团队成员打开同一个 swatch 和同一组对比场景。
使用方式
如何使用 HEX 颜色反转工具
核心流程保持很短：
示例
真实的 HEX 反色示例
下面这些示例不仅展示工具输出结果，也说明这些反色在界面工作里通常怎么用。
#0EA5E9 -> #F15A16
明亮的青蓝色 UI 强调色会翻成暖橙色，这很适合用来观察数学反色在暗黑模式实验里会不会显得过于激进。
常见用途
在快速主题原型里，先判断产品强调色经过直接反转后是否仍然可用。
为什么重要
它能提醒团队：数值上正确的反色，并不一定就是适合直接上线的设计结果。
#111827 -> #EEE7D8
深色石板背景会反转成浅暖中性色，适合帮助团队比较暗色表面与可读文本回退色之间的关系。
常见用途
在后台、控制台或数据面板场景里，对深色 token 做快速反向参考。
为什么重要
这类示例很适合写进 QA 说明，帮助判断原始 token 是否需要更亮的文字或边框处理。
#FFCC00 -> #0033FF
高饱和黄色会反转成鲜艳蓝色，这对于复核告警色、徽标色或需要强提示的强调色非常直观。
常见用途
当你需要为截图批注或 QA 备注生成一个快速反色参照时，这类颜色非常典型。
为什么重要
品牌色和状态色常常会反转成视觉张力很强的颜色，这有助于提前管理团队预期。
适用场景
这个页面主要服务谁
它更偏向实际界面工作，而不是泛用型配色浏览。
前端工程师
先反转产品 token，再决定这个反色是否值得进入设计系统或临时调试方案。
主题 token 检查
快速判断某个背景色或强调色在暗黑模式下是否需要更强的反向搭配。
开发交接更快
直接把 RGB 或 HSL 复制进 CSS、Tailwind 配置或组件故事文件。
设计师
当你只需要一个可靠的反色和可读性提示时，不必再切入更重的调色工具。
Figma token 复核
从组件库里贴入 HEX，先看反色是否符合语义层级，再决定是否继续调整。
演示材料准备
快速生成清晰的前后对比色块，用于规范文档、评审或汇报页面。
QA 与无障碍团队
利用对比度快照说明某组颜色为什么通过或不通过，减少口头解释成本。
缺陷单证据
把分享链接附进工单，工程师可以直接打开同一个颜色上下文。
聚焦 WCAG 的排查
在调查阶段快速确认黑字、白字或反色文字哪一个更像合适的回退方案。
反色和互补色的区别
很多用户会把这两个概念一起搜索，但它们解决的问题并不相同。这个页面只专注在反色，因为它更可预测、更适合代码与 QA 场景，也更容易在界面评审中解释。
反色是数值计算
HEX 反色直接翻转 RGB 通道，因此结果稳定、可复现，适合工程与 QA 工作流。
互补色是关系型概念
互补色依赖色轮上的 hue 关系，视觉上可能更和谐，但它并不是某个 HEX 的数学相反值。
针对目标选择工具
如果你要的是精确反色，请用这个页面；如果你要的是更大的配色构思，请换用专门的色彩和谐工具。
FAQ
HEX 颜色反转常见问题
在把反色用于真实项目之前，用户通常会先确认这些点。
1
反色等于互补色吗？
不等于。反色是每个 RGB 通道的数学相反值；互补色则来自色轮上的色相关系。
2
可以粘贴简写或带 alpha 的 HEX 吗？
可以。工具支持 #RGB、#RGBA、#RRGGBB 与 #RRGGBBAA，并会统一规范化为大写输出。
3
它适合直接拿来做暗黑模式吗？
更适合作为快速诊断，而不是自动设计规则。页面里的对比度卡片会告诉你黑字、白字或反色文字在原背景上是否真的可读。
4
透明颜色是怎么处理的？
反转结果会保留 alpha 通道。为了得到稳定、可复核的可读性估算，透明颜色在对比度计算时会先铺到白底上。