如何将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的评论中建议的那样:

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相关问答推荐

如何将主 js 文件中的数组用于不同的 js 文件?

我如何在这个动画 blob 中移动与“blob”的“交互”?

在数据表中进行过滤时更新总和

锚标记点击以区分相同的 onClick Javascript 函数

根据光标位置调整 jQuery 自动完成 UI 的大小

我在使用 Route 时收到空白的 react-app 页面

Spread Syntax 创建浅拷贝还是深拷贝?

如何在不重新渲染未删除的项目的情况下从列表中删除项目?

React 审核表单在提交时未提交审核

如何使用 JavaScript 对从 JSON 数据生成的 HTML Div 使用搜索/过滤器?

删除芥末 CDN 存储桶 204 错误未删除

具有 6 个键的对象数组,如何将它们分组为更少的键?

overflow-anchor不适用于水平滚动

运行 setTimeout 并更改时间值

我不能用 useEffect 在 React 中添加类名还是?

调试时如何配置VS Code运行npx vite dev

如何在 React Native 上的 Firebase 中获取特定文档的文档 ID?

未捕获的类型错误:无法读取未定义的属性(读取“url”)

如何根据用户输入和下拉列表查找 html 文件

有没有办法在 JS 中将一个键的值设置为与同一对象中另一个键的值相同?