十六进制颜色码是什么？深入剖析#RRGGBB格式的奥秘

十六进制颜色码是一种用十六进制数值表示颜色的方式，在网页开发、平面设计、UI设计等多个领域都有广泛应用，其中#RRGGBB是最基础也最常用的标准格式。它通过六个十六进制字符的组合，精确定义了红、绿、蓝三种颜色通道的强度，最终混合出人眼可见的各种颜色。

十六进制颜色码的基础原理

要理解#RRGGBB格式，首先需要了解RGB颜色模型。RGB模型是通过红（Red）、绿（Green）、蓝（Blue）三种基础色光的不同强度混合，产生各种可见颜色，这也是屏幕显示颜色的核心原理。十六进制颜色码就是将这三种通道的强度值用十六进制数表示出来。

十六进制是逢16进1的计数系统，使用的字符包括0-9和A-F，其中A代表10，B代表11，以此类推，F代表15。每一位十六进制数可以表示0到15共16种状态，两位十六进制数则可以表示00到FF共256种状态，对应颜色通道0到255的强度范围。

#RRGGBB格式的具体拆解

#RRGGBB格式的字符串由7个字符组成，第一个字符是固定的#号，后面6个字符分为三组，每组两个字符，分别对应红、绿、蓝三个通道：

• RR：前两位字符，代表红色通道的强度，取值范围是00到FF
• GG：中间两位字符，代表绿色通道的强度，取值范围是00到FF
• BB：最后两位字符，代表蓝色通道的强度，取值范围是00到FF

当三个通道的数值都为00时，混合出的颜色是纯黑色，对应的十六进制颜色码是#000000；当三个通道的数值都为FF时，混合出的颜色是纯白色，对应的十六进制颜色码是#FFFFFF。如果只有红色通道为FF，另外两个通道为00，得到的就是纯红色#FF0000。

常见十六进制颜色码示例

以下是一些常用颜色的十六进制表示和对应的通道值：

开发中的实际使用

在网页开发中，十六进制颜色码可以直接用在CSS样式里，设置元素的文字颜色、背景颜色等属性。下面是几个简单的使用示例：

/* 设置段落文字为纯红色 */
p {
    color: #FF0000;
}

/* 设置div背景为浅蓝色 */
div {
    background-color: #ADD8E6;
}

/* 设置边框为深绿色 */
.border-green {
    border: 1px solid #006400;
}

除了完整的#RRGGBB格式，还有一种简写的#RGB格式，当每组的两个字符相同时可以使用，比如#FF0000可以简写为#F00，#00FF00可以简写为#0F0，这种简写方式可以减少代码长度，但是能表示的颜色数量更少。

十六进制与十进制RGB的转换

很多时候我们需要将十六进制颜色码和十进制RGB值互相转换，转换规则很简单：每两位十六进制字符转换为对应的十进制数值即可。比如#1A2B3C，转换过程如下：

• 红色通道1A转换为十进制：1*16 + 10 = 26
• 绿色通道2B转换为十进制：2*16 + 11 = 43
• 蓝色通道3C转换为十进制：3*16 + 12 = 60

对应的RGB十进制值就是rgb(26, 43, 60)。下面是JavaScript实现的转换函数示例：

// 十六进制颜色码转十进制RGB数组
function hexToRgb(hex) {
    // 去掉开头的#号
    const hexStr = hex.replace('#', '');
    // 解析每组两个字符的十六进制值
    const r = parseInt(hexStr.substring(0, 2), 16);
    const g = parseInt(hexStr.substring(2, 4), 16);
    const b = parseInt(hexStr.substring(4, 6), 16);
    return [r, g, b];
}

// 十进制RGB值转十六进制颜色码
function rgbToHex(r, g, b) {
    // 将十进制转为两位十六进制，不足两位补0
    const toHex = (num) => {
        const hex = num.toString(16);
        return hex.length === 1 ? '0' + hex : hex;
    };
    return '#' + toHex(r) + toHex(g) + toHex(b);
}

// 测试示例
console.log(hexToRgb('#1A2B3C')); // 输出 [26, 43, 60]
console.log(rgbToHex(26, 43, 60)); // 输出 #1a2b3c

注意事项

在使用十六进制颜色码时，需要注意字符必须是0-9和A-F（不区分大小写，#ff0000和#FF0000是同一个颜色），如果输入了超出范围的字符，浏览器会无法识别该颜色值，会使用默认颜色替代。另外，有些场景下也会用到8位的十六进制颜色码#RRGGBBAA，最后两位AA代表透明度通道，不过这属于扩展格式，基础场景中使用更多的是6位的#RRGGBB格式。

十六进制颜色码RGB颜色模型颜色格式#RRGGBB前端颜色设置修改时间：2026-06-27 05:39:25