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

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


当前回答

我建议使用一个经过良好测试和维护的库:Colors.js(可用于node.js和浏览器),而不是复制和粘贴到处都能找到的代码片段。它只有7 KB(压缩后更少)。

其他回答

ECMAScript 6版本的Tim Down的答案

将RGB转换为十六进制

const rgbToHex = (r, g, b) => '#' + [r, g, b]。映射(x => { const十六进制= x.toString(16) 返回十六进制。长度=== 1 ?'0' + hex: hex }) . join () console.log(rgbToHex(0,51,255));/ / # 0033 ff的

将十六进制转换为RGB

返回一个数组[r, g, b]。工作也与速记十六进制三胞胎,如“#03F”。

const hexToRgb = hex => hex.replace (/ ^ # ? (\ d] [a - f) (\ d] [a - f) (\ d] [a - f) $ /我 ,(m, r, g, b) => '#' + r + r + g + g + b + b) .substring (1) .match (/ {2} / g)。 .map(x => parseInt(x, 16)) console.log(hexToRgb("#0033ff")) // [0,51,255] console.log(hexToRgb("#03f")) // [0,51,255]

附加:RGB到十六进制使用padStart()方法

const rgbToHex = (r, g, b) => '#' + [r, g, b] .map(x => x. tostring(16)。padStart (2, ' 0 ')) . join () console.log(rgbToHex(0,51,255));/ / # 0033 ff的

注意,这个答案使用了最新的ECMAScript特性,旧的浏览器不支持这些特性。如果希望此代码在所有环境中都能工作,则应该使用Babel来编译代码。

一个简单的答案,将RGB转换为十六进制。这里颜色通道的值被限定在0到255之间。

function RGBToHex(r = 0, g = 0, b = 0) {
    // clamp and convert to hex
    let hr = Math.max(0, Math.min(255, Math.round(r))).toString(16);
    let hg = Math.max(0, Math.min(255, Math.round(g))).toString(16);
    let hb = Math.max(0, Math.min(255, Math.round(b))).toString(16);
    return "#" +
        (hr.length<2?"0":"") + hr +
        (hg.length<2?"0":"") + hg +
        (hb.length<2?"0":"") + hb;
}

下面是将HEX颜色值分别更改为红色,绿色,蓝色的Javascript代码。

R = hexToR("#FFFFFF");
G = hexToG("#FFFFFF");
B = hexToB("#FFFFFF");

function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}

以下是我的看法:

function rgbToHex(red, green, blue) {
  const rgb = (red << 16) | (green << 8) | (blue << 0);
  return '#' + (0x1000000 + rgb).toString(16).slice(1);
}

function hexToRgb(hex) {
  const normal = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
  if (normal) return normal.slice(1).map(e => parseInt(e, 16));

  const shorthand = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i);
  if (shorthand) return shorthand.slice(1).map(e => 0x11 * parseInt(e, 16));

  return null;
}

十六进制到RGB

Const hex2rgb = (hex) => { const r = parseInt(十六进制。切片(1,3),16) const g = parseInt(十六进制。切片(3,5),16) const b = parseInt(十六进制。切片(5,7),16) //返回{r, g, b} //返回一个对象 返回[r, g, b] } console.log (hex2rgb (" # 0080 c0 "))

RGB转十六进制

rgb2hex = (r, g, b) => { Var RGB = (r << 16) | (g << 8) | b //返回'#' + rgb.toString(16) // #80c0 //返回'#' + (0x1000000 + rgb).toString(16).slice(1) // #0080c0 //或使用[padStart](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart) 返回'#' + rgb.toString(16)。padStart (0) } Console.log (rgb2hex(0, 128, 192))

此外,如果有人需要在线工具,我已经建立了海克斯到RGB,反之亦然。