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

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


当前回答

您可以尝试下面这段简单的代码。

用于十六进制到RGB

list($r, $g, $b) = sscanf(#7bde84, "#%02x%02x%02x");
echo $r . "," . $g . "," . $b;

这将返回123,222,132

用于RGB到HEX

$rgb = (123,222,132),
$rgbarr = explode(",",$rgb,3);
echo sprintf("#%02x%02x%02x", $rgbarr[0], $rgbarr[1], $rgbarr[2]);

这将返回#7bde84

其他回答

我遇到了这个问题,因为我想要解析任何颜色字符串值,并能够指定不透明度,所以我写了这个使用canvas API的函数。

var toRGBA = function () {
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');

  canvas.width = 1;
  canvas.height = 1;

  return function (color) {
    context.fillStyle = color;
    context.fillRect(0, 0, 1, 1);

    var data = context.getImageData(0, 0, 1, 1).data;

    return {
      r: data[0],
      g: data[1],
      b: data[2],
      a: data[3]
    };
  };
}();

关于context.fillStyle注意:

如果解析值导致失败,则必须忽略该值,属性必须保留其先前的值。

下面是一个你可以用来测试输入的Stack Snippet演示:

var toRGBA = function () { var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); canvas.width = 1; canvas.height = 1; return function (color) { context.fillStyle = color; context.fillRect(0, 0, 1, 1); var data = context.getImageData(0, 0, 1, 1).data; return { r: data[0], g: data[1], b: data[2], a: data[3] }; }; }(); var inputs = document.getElementsByTagName('input'); function setColor() { inputs[1].value = JSON.stringify(toRGBA(inputs[0].value)); document.body.style.backgroundColor = inputs[0].value; } inputs[0].addEventListener('input', setColor); setColor(); input { width: 200px; margin: 0.5rem; } <input value="cyan" /> <input readonly="readonly" />

我需要一个函数,接受无效值太像

Rgb (- 255,255,255) Rgb (510, 255, 255)

这是@cwolves answer的衍生

function rgb(r, g, b) {
  this.c = this.c || function (n) {
    return Math.max(Math.min(n, 255), 0)
  };

  return ((1 << 24) + (this.c(r) << 16) + (this.c(g) << 8) + this.c(b)).toString(16).slice(1).toUpperCase();
}

对于直接从jQuery转换,您可以尝试:

  function rgbToHex(color) {
    var bg = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
      return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return     "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
  }

  rgbToHex($('.col-tab-bar .col-tab span').css('color'))

下面是将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}

不可变和人类可理解的版本,没有任何位魔法:

循环数组 使用Math.min()和Math.max()对值< 0或值> 255进行归一化 使用String.toString()将数字转换为十六进制符号 将前导零和修饰值附加到两个字符 将映射值连接到字符串

function rgbToHex(r, g, b) {
  return [r, g, b]
    .map(color => {
      const normalizedColor = Math.max(0, Math.min(255, color));
      const hexColor = normalizedColor.toString(16);

      return `0${hexColor}`.slice(-2);
    })
    .join("");
}

是的,它不会像位操作符那样性能好,但更可读和不可变,所以它不会修改任何输入