如何将RGB格式的 colored颜色 转换为十六进制格式,反之亦然?

例如,将'#0080C0'转换为(0, 128, 192).

推荐答案

Note:两个版本的rgbToHex都需要rgb的整数值,因此如果您有非整数值,则需要自己进行舍入.

下面将对rgb到祸不单行的转换执行以下操作,并添加任何所需的零填充:

function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

alert(rgbToHex(0, 51, 255)); // #0033ff

换一种方式:

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;
}

alert(hexToRgb("#0033ff").g); // "51";

最后,rgbToHex()的另一个版本,正如在@casablanca's answer中讨论并在@cwolves的 comments 中建议的那样:

function rgbToHex(r, g, b) {
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

alert(rgbToHex(0, 51, 255)); // #0033ff

2012年12月3日更新

下面是hexToRgb()的一个版本,它还解析一个简写的十六进制三元组,比如"#03F":

function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  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;
}

alert(hexToRgb("#0033ff").g); // "51";
alert(hexToRgb("#03f").g); // "51";

Javascript相关问答推荐

使用JavaScript在ionic Web应用程序中更新.pane和.view的背景 colored颜色

微软Edge Select 间隙鼠标退出问题

react/redux中的formData在expressjs中返回未定义的req.params.id

了解Node.js中的EventEums和浏览器中的addEventEums之间的关系

Angular中计算信号和getter的区别

在这种情况下,如何 for each 元素添加id?

如何从URL获取令牌?

JSDoc创建并从另一个文件导入类型

无法读取未定义错误的属性路径名''

为什么123[';toString';].long返回1?

根据一个条件,如何从处理过的数组中移除一项并将其移动到另一个数组?

无法设置RazorPay订阅API项目价格

如何根据查询结果重新排列日期

JAVASCRIPT SWITCH CASE语句:当表达式为';ALL';

ComponentWillReceiveProps仍在React 18.2.0中工作

脚本语法错误只是一个字符串,而不是一个对象?

更改管线时不渲染组件的react

Firefox的绝对定位没有达到预期效果

在对象的嵌套数组中添加两个属性

如何将缓冲区数组转换回音频