[javascript] RGB 값 대신 16 진수 색상 값을 얻는 방법은 무엇입니까?

다음 jQuery를 사용하면 요소 배경색의 RGB 값을 얻을 수 있습니다.

$('#selector').css('backgroundColor');

RGB 대신 16 진수 값을 얻는 방법이 있습니까?

답변

var hexDigits = new Array
        ("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");

//Function to convert rgb color to hex format
function rgb2hex(rgb) {
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

function hex(x) {
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
 }

( 소스 )

답변

@Matt 제안을 기반으로 작성한 클리너 솔루션은 다음과 같습니다.

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

일부 브라우저는 이미 Internet Explorer 8 이하에서 16 진수로 색상을 반환합니다. 이러한 경우를 처리 해야하는 경우 @gfrobenius가 제안한 것처럼 함수 내부에 조건을 추가하십시오.

function rgb2hex(rgb) {
    if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;

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

jQuery를 사용하고 더 완벽한 접근 방식을 원한다면 이 질문에 대답했을 때 보여준 jQuery 1.4.3부터 사용 가능한 CSS 후크를 사용할 수 있습니다. jQuery.css ( “backgroundColor”)를 16 진수 형식으로 반환 할 수 있습니까?

답변

대부분의 브라우저는 다음을 사용할 때 RGB 값을 반환하는 것 같습니다.

$('#selector').css('backgroundColor');

IE (지금까지 6 개만 테스트 됨) 만 16 진수 값을 반환합니다.

IE에서 오류 메시지를 피하기 위해 함수를 if 문으로 묶을 수 있습니다.

function rgb2hex(rgb) {
     if (  rgb.search("rgb") == -1 ) {
          return rgb;
     } else {
          rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
          function hex(x) {
               return ("0" + parseInt(x).toString(16)).slice(-2);
          }
          return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
     }
}

답변

rgba 호환성을 위해 @ErickPetru가 업데이트되었습니다.

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

정의 된 경우 알파 값과 일치하도록 정규식을 업데이트했지만 사용하지 않았습니다.

답변

jQuery를 사용하지 않는 ES6 one liner는 다음과 같습니다.

var rgb = document.querySelector('#selector').style['background-color'];
return '#' + rgb.substr(4, rgb.indexOf(')') - 4).split(',').map((color) => parseInt(color).toString(16)).join('');

답변

여기 투명도를 확인하는 버전이 있습니다. 객체가 16 진수 색상의 투명 버전이 실제로 “투명”이라는 스타일 속성에 결과를 삽입했기 때문에 필요했습니다.

function rgb2hex(rgb) {
     if (  rgb.search("rgb") == -1 ) {
          return rgb;
     }
     else if ( rgb == 'rgba(0, 0, 0, 0)' ) {
         return 'transparent';
     }
     else {
          rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
          function hex(x) {
               return ("0" + parseInt(x).toString(16)).slice(-2);
          }
          return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
     }
}

답변

요소의 배경색을 16 진수로 반환하는 함수입니다.

function getBgColorHex(elem){
    var color = elem.css('background-color')
    var hex;
    if(color.indexOf('#')>-1){
        //for IE
        hex = color;
    } else {
        var rgb = color.match(/\d+/g);
        hex = '#'+ ('0' + parseInt(rgb[0], 10).toString(16)).slice(-2) + ('0' + parseInt(rgb[1], 10).toString(16)).slice(-2) + ('0' + parseInt(rgb[2], 10).toString(16)).slice(-2);
    }
    return hex;
}

사용 예 :

$('#div1').click(function(){
   alert(getBgColorHex($(this));
}

jsfiddle