一、颜色反转是什么？先看个例子
你肯定见过这种效果：一张正常的彩色照片，突然变成“底片”样子——红色变青色，白色变黑色，黑色变白色。这就是颜色反转，也叫反色、负片效果、色彩反相。
最简单的理解：把每个颜色换成它的“对立面”。白的变黑的，黑的变白的，红的变青的，绿的变紫的。就像拍照时把胶片洗出来的底片，所以也叫“负片效果”。
二、数学原理：就是一道减法题
在计算机里，每个颜色用三个数字表示：R（红）、G（绿）、B（蓝）。每个数字的范围是0-255。0表示没有这个颜色，255表示这个颜色最亮。
颜色反转的公式极其简单：
新R = 255 - 原R
新G = 255 - 原G
新B = 255 - 原B就这么简单。把每个通道的值用255减一下，得到的新颜色就是反转后的结果。
🎨 举个例子
- 纯白色：(255, 255, 255) → 255-255=0 → (0,0,0) → 纯黑色
- 纯黑色：(0, 0, 0) → 255-0=255 → (255,255,255) → 纯白色
- 纯红色：(255, 0, 0) → (0, 255, 255) → 青色（红和青是互补色）
- 纯绿色：(0, 255, 0) → (255, 0, 255) → 品红色（绿和品红互补）
- 纯蓝色：(0, 0, 255) → (255, 255, 0) → 黄色（蓝和黄互补）
如果是灰度图，只有一个通道（0-255），公式就是 新灰度 = 255 - 原灰度。白的变黑，黑的变白，中间的灰色变成它对应的反向灰色。
如果是RGBA（带透明度），一般只反转RGB三个通道，Alpha通道（透明度）保持不变。否则透明的地方也会被反转，效果就乱了。
三、为什么是255？为什么不是100%
你可能想问：为什么减的是255，不是256或者100？
这跟计算机存储颜色的方式有关。8位颜色通道用0到255表示，一共256个亮度级别。255就是最大值。所以“反转”就是“用最大值减去当前值”。
如果用百分比来表示，公式就是：新值 = 100% - 原值。道理一样，只是单位不同。RGB的255对应百分比里的100%。
还有一种表示颜色的方式是HSL（色相、饱和度、明度）。HSL反转稍微复杂一点，通常只反转色相（Hue）：新色相 = (原色相 + 180°) % 360°。饱和度、明度可以保持不变或者也做反转，看你想要什么效果。
四、颜色反转能用来干什么？
别以为颜色反转只是个花哨的滤镜。它有不少实际用途：
🌙 深色模式
手机和电脑的“深色模式”底层原理就是颜色反转。白色背景变成深色，黑色文字变成浅色。不过现代操作系统不是简单反转，而是智能反转——保留图片和视频的颜色不变，只反转UI元素。
📷 修复老照片底片
家里翻出来的胶片底片，用手机翻拍后颜色反转一下，就能得到正常的彩色照片。这是颜色反转最经典的用途——把负片转成正片。
🎨 检查图片对称性
设计师有时候用反转+叠加的方式来检查图片是否对称。把反转后的图和原图叠加，如果完全重合，说明对称性很好。
👁️ 视觉辅助
有些视力障碍的人看正常对比度不舒服，反转颜色后反而更容易看清。Windows和macOS都有这个辅助功能。
🖼️ 额外玩法
- 双重曝光效果：把一张图反转后半透明叠在另一张图上，会有意想不到的艺术效果。
- 制作负片风格的封面：音乐专辑、海报经常用反转色调制造诡异或前卫的感觉。
- 练眼力：盯着反转后的图片看30秒，再看白色墙壁，你会看到原图的“残像”。这叫视觉后像，是视觉神经疲劳导致的。
五、代码实现：几行代码的事
颜色反转的实现极其简单，任何编程语言都能轻松搞定。
JavaScript（Canvas）
// 获取像素数据
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
// 反转RGB，保留Alpha
for (let i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i]; // R
data[i+1] = 255 - data[i+1]; // G
data[i+2] = 255 - data[i+2]; // B
// data[i+3] 是Alpha，不动
}
// 写回Canvas
ctx.putImageData(imageData, 0, 0);Python（PIL/Pillow）
from PIL import Image
img = Image.open('input.jpg')
# 方法1：使用内置invert函数
inverted = Image.eval(img, lambda x: 255 - x)
# 方法2：使用ImageOps
from PIL import ImageOps
inverted = ImageOps.invert(img)
inverted.save('output.jpg')CSS（纯前端效果）
/* 一行CSS搞定整个元素的反转效果 */
img {
filter: invert(100%);
}
/* 部分反转，只反转50% */
img {
filter: invert(50%);
}ImageMagick命令行
# 反转一张图片
magick input.jpg -negate output.jpg
# 批量反转
for file in *.jpg; do
magick "$file" -negate "neg_$file"
done六、几种反转变体：不是所有反转都一样
标准的颜色反转是“255 - 原值”，但实际应用中还有一些变体：
标准反转（全通道反转）
RGB三个通道都做255减。结果是全图变成负片效果。白色变黑，红色变青。最常用。
亮度反转（只反转明度）
先把RGB转成HSL，只反转亮度（L）通道，保持色相和饱和度不变。效果类似“反色”但颜色本身不变，只变明暗。Photoshop里叫“反相”和“颜色反相”的区别。
通道独立反转
只反转红色通道，或者只反转绿色、蓝色。这种效果很魔幻，适合艺术创作。比如只反转红色通道，图片会偏青色调。
伽马校正反转
标准反转是线性的：255 - 原值。但人眼对亮度的感知不是线性的。伽马校正反转会考虑人眼特性，效果更自然。不过一般不需要，标准反转已经够用了。
七、常见问题：为什么反转后颜色不对？
🤔 问题1：反转后图片偏蓝/偏黄？
可能是颜色空间的问题。标准反转假设RGB是线性空间，但实际图片通常是sRGB，有伽马曲线。不过差别很小，一般人看不出来。如果要求精确，可以先把图片转成线性RGB，反转，再转回sRGB。
🤔 问题2：反转后暗部细节全没了？
反转会拉伸暗部区域。原图里接近黑色的区域，反转后变成接近白色。如果原图暗部有噪点，反转后这些噪点会变得非常明显。解决方法：反转前先降噪，或者用曲线工具微调。
🤔 问题3：为什么我的手机深色模式不是简单反转？
因为简单反转会把图片、视频也反转了，看起来很奇怪。现代操作系统的深色模式是智能反转：只反转UI元素（背景、文字、按钮），图片和视频保持原样。这是通过识别内容类型来实现的，比简单反转复杂得多。
八、和色盲模式、高对比度模式有什么区别？
很多人把颜色反转和色盲模式、高对比度模式搞混。其实不一样：
- 颜色反转：把每个颜色变成它的对立色。白变黑，红变青。目的是制造负片效果或深色模式。
- 色盲模式：重新映射颜色，让红绿色盲、蓝黄色盲能区分原本分不清的颜色。比如把红色变成带纹理的红色。不是简单反转。
- 高对比度模式：增强明暗对比，让文字和背景的界限更清晰。通常是让黑更黑、白更白，而不是反转颜色。
Windows、macOS、iOS的辅助功能里这三个选项都有，你可以自己试一下区别。
九、自己动手：用浏览器控制台玩一下
打开任何网页，按F12打开开发者工具，在Console里输入下面这行代码，整个网页的颜色就反转了：
document.body.style.filter = 'invert(100%)';想恢复？输入：
document.body.style.filter = '';你也可以只反转某个图片：
document.querySelector('img').style.filter = 'invert(100%)';就这么简单。下次朋友问你颜色反转是什么原理，你可以直接说：“255减去它自己，完事。”