RGB 转 Hex 颜色转换

问题

实现一个函数，将 RGB 颜色值转换为 Hex 十六进制格式。

例如：rgb(255, 165, 0) 转换为 #ffa500

解答

基础实现

function rgbToHex(r, g, b) {
  // 将单个颜色值转为两位十六进制
  const toHex = (n) => {
    // 确保值在 0-255 范围内
    const hex = Math.max(0, Math.min(255, n)).toString(16);
    // 不足两位补 0
    return hex.padStart(2, '0');
  };

  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}

// 测试
console.log(rgbToHex(255, 165, 0));   // #ffa500
console.log(rgbToHex(0, 0, 0));       // #000000
console.log(rgbToHex(255, 255, 255)); // #ffffff

位运算实现

function rgbToHex(r, g, b) {
  // 将 RGB 合并为一个数字，再转为十六进制
  // r 左移 16 位，g 左移 8 位，b 不移动
  const hex = ((r << 16) | (g << 8) | b).toString(16);
  // 补足 6 位
  return '#' + hex.padStart(6, '0');
}

console.log(rgbToHex(255, 165, 0)); // #ffa500

解析 RGB 字符串

function rgbStringToHex(rgbString) {
  // 匹配 rgb(r, g, b) 格式
  const match = rgbString.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
  
  if (!match) {
    throw new Error('Invalid RGB format');
  }

  const [, r, g, b] = match.map(Number);
  return rgbToHex(r, g, b);
}

console.log(rgbStringToHex('rgb(255, 165, 0)')); // #ffa500

支持 RGBA

function rgbaToHex(r, g, b, a = 1) {
  const toHex = (n) => Math.max(0, Math.min(255, n)).toString(16).padStart(2, '0');
  
  // alpha 转为 0-255 范围
  const alphaHex = toHex(Math.round(a * 255));
  
  return `#${toHex(r)}${toHex(g)}${toHex(b)}${alphaHex}`;
}

console.log(rgbaToHex(255, 165, 0, 0.5)); // #ffa50080

关键点

• RGB 每个通道值范围是 0-255，对应十六进制 00-ff
• toString(16) 将数字转为十六进制字符串
• 使用 padStart(2, '0') 确保每个颜色值占两位
• 位运算方式更简洁：(r << 16) | (g << 8) | b
• 处理边界值，确保输入在有效范围内