RGB 与十六进制颜色格式转换指南：轻松实现颜色的跨格式转换

2024-03-04 19:46:31

## RGB 与十六进制颜色转换指南

在网页设计和图像处理中，我们经常需要在不同的颜色格式之间进行转换，例如 RGB 和十六进制。了解如何轻松地在这些格式之间转换至关重要。

### RGB 颜色格式

RGB（红绿蓝）颜色格式使用三个基本颜色（红色、绿色、蓝色）的组合来表示颜色。每个颜色分量使用 0 到 255 之间的数字表示，其中 0 表示没有该颜色分量，而 255 表示该颜色分量完全存在。RGB 格式通常以 (r, g, b) 的形式表示，其中 r 是红色分量，g 是绿色分量，b 是蓝色分量。

### 十六进制颜色格式

十六进制颜色格式使用十六进制数字（0 到 F）来表示颜色。十六进制颜色格式通常以 #rrggbb 的形式表示，其中 rr 表示红色分量，gg 表示绿色分量，bb 表示蓝色分量。每个分量由两个十六进制数字表示，其中 00 表示没有该颜色分量，而 FF 表示该颜色分量完全存在。

### RGB 到十六进制的转换

要将 RGB 颜色转换为十六进制，可以按照以下公式：

十六进制 = #rrggbb

其中：

rr = (r * 255 / 256).toString(16)
gg = (g * 255 / 256).toString(16)
bb = (b * 255 / 256).toString(16)

### 十六进制到 RGB 的转换

要将十六进制颜色转换为 RGB，可以按照以下公式：

r = parseInt(rr, 16)
g = parseInt(gg, 16)
b = parseInt(bb, 16)

其中：

rr 是红色分量
gg 是绿色分量
bb 是蓝色分量

### 代码示例

以下代码示例演示了如何将 RGB 颜色 (0, 128, 192) 转换为十六进制，以及如何将十六进制颜色 #0080C0 转换为 RGB：

// 将 RGB 颜色转换为十六进制
function rgbToHex(r, g, b) {
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

// 将十六进制颜色转换为 RGB
function hexToRgb(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

// 测试函数
console.log(rgbToHex(0, 128, 192)); // #0080C0
console.log(hexToRgb("#0080C0")); // { r: 0, g: 128, b: 192 }