深色模式初稿
把浅色背景反转成负色，作为深色配色的起点，再手动微调中间调。反转保留通道之间的差值，原来的色调不会丢。
免费颜色工具
HEX 颜色反转
把任意 HEX 颜色换成它的精确负色。每个 8 位通道都变成 255 减去自身，所以 #1a73e8 会变成 #e58c17。输入色值、对比两个色块，然后复制 HEX 或 rgb() 数值。
3 位与 6 位写法实时双栏预览无需账号
转换
反转一个 HEX 颜色
支持 3 位和 6 位 HEX，带或不带 # 都可以。输入时负色实时计算。
试试预设
原色
#1a73e8
rgb(26, 115, 232)
反转负色
#e58c17
rgb(229, 140, 23)
反转： #1a73e8 → #e58c17
解析和计算全部在当前浏览器标签页完成，色值不会上传。
计算原理
HEX 反转是怎么算的
HEX 里的每一对字符就是一个通道，取值范围 00 到 FF。反转就是用 FF 减去这个通道，和图片编辑器对像素做的事完全一样，只是逐个通道进行。
#RRGGBB → #(FF−RR)(FF−GG)(FF−BB)三步完成
- 1
把 HEX 拆成红、绿、蓝三个通道。
- 2
每个通道用 255（十六进制 FF）去减。
- 3
把三个结果重新写成十六进制。
对照表
常见 HEX 反转结果
这些例子都可以手算验证。中性灰最有意思：128 反转后是 127，所以在 8 位颜色里没有任何灰色能反转到自己。
| 原色 | RGB | 负色 | RGB |
|---|---|---|---|
| #000000 | rgb(0, 0, 0) | #ffffff | rgb(255, 255, 255) |
| #ff0000 | rgb(255, 0, 0) | #00ffff | rgb(0, 255, 255) |
| #1a73e8 | rgb(26, 115, 232) | #e58c17 | rgb(229, 140, 23) |
| #d8ff3e | rgb(216, 255, 62) | #2700c1 | rgb(39, 0, 193) |
| #808080 | rgb(128, 128, 128) | #7f7f7f | rgb(127, 127, 127) |
| #f05a28 | rgb(240, 90, 40) | #0fa5d7 | rgb(15, 165, 215) |
适用场景
反转出来的 HEX 有什么用
四种需要精确负色值、而不是在取色器里目测的场合。
可读性快速自检
A 色文字放在 B 色背景上，与 B 色文字放在 A 色背景上，明度差是一样的。整对反转后仍能读，说明对比度站得住。
负片风格品牌色
印刷、海报、贴纸常常要品牌主色的摄影负色。反转得到的 HEX 就是那个精确值，而不是接近的近似色。
校验 CSS 滤镜
给元素加 filter: invert(1) 得到的负色，和把它背后的 HEX 逐个反转的结果应当一致；两边不一致，说明有一方不是纯反转。
别混淆
HEX 反转、图片反色与 CSS 滤镜的区别
三种操作在截图里看起来一样，对文件做的事却完全不同。
| 方式 | 反转什么 | 保留什么 |
|---|---|---|
| HEX 反转（本页面） | 一个颜色数值：R、G、B 各自变成 255 减去自身。 | 不涉及像素、文件和透明度，纯粹是色值上的算术。 |
| 图片颜色反转 | PNG、JPEG、WebP、BMP 的每一个像素，在浏览器里完成处理。 | 画布尺寸、像素位置，以及透明 PNG 的 Alpha 通道。 |
| CSS filter: invert(1) | 浏览器渲染元素时的呈现效果，包括其中的文字。 | 样式表里的颜色数值，以及原图文件中的像素。 |
HEX 反转常见问题
什么是 HEX 颜色的负色？
红、绿、蓝三个通道分别与原色相加都等于 255 的那个颜色。#000000 反转成 #ffffff，#ff0000 反转成 #00ffff，#1a73e8 反转成 #e58c17。
反转和色环上的补色是一回事吗？
不是。补色是在 HSL 里把色相旋转 180 度，明度和饱和度不变；通道反转在 RGB 上进行，连明度一起翻转，所以深蓝会回到偏亮的暖橙。
为什么灰色反不出自己？
#808080 每个通道是 128，255 − 128 = 127，于是变成 #7f7f7f。能反转到自己的数值必须是 127.5，而 8 位通道只存整数。
能反转透明度或 Alpha 通道吗？
本页不行。HEX 色值本身不带 Alpha 通道，没有可反转的内容。图片反转只处理 RGB，透明 PNG 的 Alpha 会原样保留。
3 位简写的结果一样吗？
一样。#0af 会先展开成 #00aaff 再做减法，结果是 #ff5500。简写和完整写法永远给出同样的负色。
我的色值会传到服务器吗？
不会。解析和反转都在你浏览器的 JavaScript 里完成，不存储也不记录。
相关工具与教程
反转一个色值和反转一张图是两件事 —— 按你手上的文件选。