[javascript] RGB를 16 진수로, 16 진수를 RGB로

JAVASCRIPT / 글쓴이

RGB 형식의 색상을 16 진수 형식으로 변환하거나 그 반대로 변환하는 방법은 무엇입니까?

예를 들어로 변환 '#0080C0'하십시오 (0, 128, 192).

답변

참고 : 두 버전 rgbToHex에 대한 정수 값으로 기대할 r, g그리고 b, 당신은 당신이 정수가 아닌 값이있는 경우 자신의 라운딩을 수행해야하므로.

다음은 RGB에서 16 진수로 변환하고 필요한 제로 패딩을 추가합니다. 

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

스 니펫 확장

마지막으로 @casablanca 의 답변rgbToHex() 에서 논의 되고 @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”와 같은 속기 16 진 삼중 항도 구문 분석 하는 버전입니다 .

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

스 니펫 확장

답변

hexToRgb의 대체 버전 :

function hexToRgb(hex) {
    var bigint = parseInt(hex, 16);
    var r = (bigint >> 16) & 255;
    var g = (bigint >> 8) & 255;
    var b = bigint & 255;

    return r + "," + g + "," + b;
}

편집 : 3/28/2017 여기에 또 다른 접근법이 있습니다 그것은 더 빠른 것 같습니다

function hexToRgbNew(hex) {
  var arrBuff = new ArrayBuffer(4);
  var vw = new DataView(arrBuff);
  vw.setUint32(0,parseInt(hex, 16),false);
  var arrByte = new Uint8Array(arrBuff);

  return arrByte[1] + "," + arrByte[2] + "," + arrByte[3];
}

편집 : 8/11/2017 더 많은 테스트 후 위의 새로운 접근 방식은 더 빠르지 않습니다.

답변

Tim Down의 ECMAScript 6 버전 답변

RGB를 16 진수로 변환

const rgbToHex = (r, g, b) => '#' + [r, g, b].map(x => {
  const hex = x.toString(16)
  return hex.length === 1 ? '0' + hex : hex
}).join('')

console.log(rgbToHex(0, 51, 255)); // '#0033ff'

스 니펫 확장

16 진수를 RGB로 변환

배열을 반환합니다 [r, g, b]. 와 같은 속기 16 진 트리플렛과도 작동합니다 "#03F".

const hexToRgb = hex =>
  hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i
             ,(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]

스 니펫 확장

보너스 : padStart()방법을 사용하여 RGB를 16 진수로

const rgbToHex = (r, g, b) => '#' + [r, g, b]
  .map(x => x.toString(16).padStart(2, '0')).join('')

console.log(rgbToHex(0, 51, 255)); // '#0033ff'

스 니펫 확장

이 답변은 최신 브라우저에서 지원되지 않는 최신 ECMAScript 기능을 사용합니다. 이 코드가 모든 환경에서 작동하게하려면 Babel 을 사용하여 코드를 컴파일해야합니다.

답변

내 버전은 다음과 같습니다.

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

  function hex2rgb(hex) {
        // long version
        r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
        if (r) {
                return r.slice(1,4).map(function(x) { return parseInt(x, 16); });
        }
        // short version
        r = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i);
        if (r) {
                return r.slice(1,4).map(function(x) { return 0x11 * parseInt(x, 16); });
        }
        return null;
  }

답변

나는 당신이 HTML 스타일의 16 진수 표기법을 의미한다고 가정합니다 #rrggbb. 주문이 취소 된 것을 제외하고는 코드가 거의 정확합니다. 그것은해야한다:

var decColor = red * 65536 + green * 256 + blue;

또한 비트 시프트를 사용하면 조금 더 쉽게 읽을 수 있습니다.

var decColor = (red << 16) + (green << 8) + blue;

답변

function hex2rgb(hex) {
  return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}

답변

이 코드는 #fff 및 #ffffff 변형 및 불투명도를 허용합니다.

function hex2rgb(hex, opacity) {
        var h=hex.replace('#', '');
        h =  h.match(new RegExp('(.{'+h.length/3+'})', 'g'));

        for(var i=0; i<h.length; i++)
            h[i] = parseInt(h[i].length==1? h[i]+h[i]:h[i], 16);

        if (typeof opacity != 'undefined')  h.push(opacity);

        return 'rgba('+h.join(',')+')';
}