为何JavaScript中十六进制转RGB的移位代码能正常工作？

首先看你给出的JavaScript代码：

let hexInt = parseInt(hex, 16);

let r = (hexInt >> 16) & 255;
let g = (hexInt >> 8) & 255;
let b = hexInt & 255;

你已经明确这些基础逻辑：

• 1个十六进制数位对应4位二进制，6位十六进制对应24位二进制，RGB三个颜色分量各占8位
• 示例：

F0是11110000
0F是00001111

F0的十进制值是240
0F的十进制值是15

你的疑问是：parseInt(hex,16)把十六进制字符串转为十进制数后，十进制数的二进制位数不固定，为什么用固定的16位、8位右移还能正确分离颜色分量？

核心原因：数值的表示形式不影响二进制本质 #

十进制只是数值的字符串表示方式，内存中存储的永远是二进制位。不管你用十进制还是十六进制描述一个数，它的二进制位结构是完全固定的，和原十六进制的二进制完全等价。

比如输入6位十六进制#FF00CC，转成十进制是16711884，它的二进制就是11111111 00000000 11001100——和原十六进制对应的24位二进制完全一致。

位运算（右移>>、按位与&）直接操作的是数值的二进制位，和它是十进制还是十六进制表示无关：

• 红色分量(hexInt >> 16) & 255：把24位二进制整体右移16位，原来的高8位（红色分量）会移动到低8位的位置，再和255（二进制11111111）按位与，确保只保留低8位（避免输入不足6位十六进制时的高位干扰）。
• 绿色分量(hexInt >> 8) & 255：右移8位后，原来的中间8位（绿色分量）落到低8位，按位与255提取出这部分。
• 蓝色分量hexInt & 255：直接和255按位与，提取出最低8位的蓝色分量。

举个实际例子：
输入十六进制F00F0F，转十进制是15733519，对应的二进制是11110000 00001111 00001111：

• 右移16位后得到二进制11110000（十进制240），&255后还是240，对应R分量；
• 右移8位后得到二进制1111000000001111，&255后取低8位00001111（十进制15），对应G分量；
• 直接&255取低8位00001111（十进制15），对应B分量。

你忽略的关键点就是：数值的外在表示形式（十进制/十六进制）不影响它的二进制位结构，位运算操作的是数值的二进制本质，而非它的书写形式。只要输入是标准6位十六进制，转成的十进制数的二进制必然是24位，固定移位就能准确拆分分量。

内容的提问来源于stack exchange，提问作者Real Noob