[ 자바스크립트 ] rgbToHex() & hexToRgb()

최종 수정일 (Last edited on) 2021. 3. 4.

색상값 표시법을 바꾸는 함수를 만들어보았다.

1. RGB 방식을 헥사값 방식으로 바꿔주기.
2. 헥사값 방식을 RGB 방식으로 바꿔주기.

RGBa 방식을 헥사값 방식으로 바꾸는 것은, 복잡할 것 같아서 생략...

색상값이 색 이름으로 되어있는 것도 따로 해결책을 찾아봐야 할 듯 하다.

---

1. RGB 방식을 헥사값 방식으로 바꿔주기.

<script type="text/javascript">
/* 
에러가 나온다면, 아래 블로그에 댓글을 남겨주세요. 
https://tonks.tistory.com/130
*/ 
function rgbToHex ( rgbType ){ 
    /* 
    ** 컬러값과 쉼표만 남기고 삭제하기. 
    ** 쉼표(,)를 기준으로 분리해서, 배열에 담기. 
    */ 
    var rgb = rgbType.replace( /[^%,.\d]/g, "" ).split( "," ); 
    
    rgb.forEach(function (str, x, arr){ 
    
        /* 컬러값이 "%"일 경우, 변환하기. */ 
        if ( str.indexOf( "%" ) > -1 ) str = Math.round( parseFloat(str) * 2.55 ); 
        
        /* 16진수 문자로 변환하기. */ 
        str = parseInt( str, 10 ).toString( 16 ); 
        if ( str.length === 1 ) str = "0" + str; 
        
        arr[ x ] = str; 
    }); 
    
    return "#" + rgb.join( "" ); 
} 
</script>

<button onclick="testing()"> 클릭하세요 </button>

<p id="demo1"> </p>
<p id="demo2"> </p>

<script type="text/javascript">
function testing (){ 
        var decimal = "rgb(255, 64, 0)"; 
        var percent = "rgb( 100%, 25%, 0% )"; 

        document.getElementById( "demo1" ).innerHTML = rgbToHex( decimal ); 
        document.getElementById( "demo2" ).innerHTML = rgbToHex( percent ); 
} 
</script>

---

2. 헥사값 방식을 RGB 방식으로 바꿔주기.

<script type="text/javascript">
/* 
에러가 나온다면, 아래 블로그에 댓글을 남겨주세요. 
https://tonks.tistory.com/130
*/ 
function hexToRgb ( hexType ){ 
    /* 맨 앞의 "#" 기호를 삭제하기. */ 
    var hex = hexType.trim().replace( "#", "" ); 
    
    /* rgb로 각각 분리해서 배열에 담기. */ 
    var rgb = ( 3 === hex.length ) ? 
		hex.match( /[a-f\d]/gi ) : hex.match( /[a-f\d]{2}/gi );     
    
    rgb.forEach(function (str, x, arr){     
        /* rgb 각각의 헥사값이 한자리일 경우, 두자리로 변경하기. */ 
        if ( str.length == 1 ) str = str + str; 
        
        /* 10진수로 변환하기. */ 
        arr[ x ] = parseInt( str, 16 ); 
    }); 
    
    return "rgb(" + rgb.join(", ") + ")"; 
} 
</script>

<button onclick="testing()"> 클릭하세요 </button>

<p id="demo1"> </p>
<p id="demo2"> </p>

<script type="text/javascript">

function testing (){ 
        var short = "#a40"; 
        var whole = "#aa4400"; 

        document.getElementById( "demo1" ).innerHTML = hexToRgb( short ); 
        document.getElementById( "demo2" ).innerHTML = hexToRgb( whole ); 
} 
</script>

---

 <p id="demo" style="background-color: white"> 배경을 흰색으로 설정한 태그. </p>

<button onclick="testing()"> 클릭하세요 </button>

<p id="colorValue"> </p>

<script type="text/javascript">
function testing (){ 
        var tag = document.getElementById( "demo" ); 
        var bgColor = tag.style.backgroundColor; 
        var value = ""; 

        if ( bgColor.search( /rgb[^a]/i ) > -1 ) { // "RGB"이면 "HEX"로. ( 단, "RGBa"는 제외시키기.)  
                value = rgbToHex( bgColor ); 
        } 
        else if ( bgColor.search( "#" ) > -1 ) value = hexToRgb( bgColor ); // "HEX"이면 "RGB"로. 
        else value = bgColor; // "RGB"도, "HEX"도 아니라면. 

        document.getElementById( "colorValue" ).innerHTML = value; 
} 
</script>

<button onclick="testing()"> 클릭하세요 </button>

<p id="original"> </p>
<p id="change"> </p>

<script type="text/javascript">
function testing (){ 
        var tag = document.getElementById( "demo" ); 
        var bgColor = getBgColor( tag ); 

        document.getElementById( "original" ).innerHTML = bgColor; 

        var value = ""; 

        if ( bgColor.search( /rgb/i ) > -1 ) value = rgbToHex( bgColor ); 
        else if ( bgColor.search( "#" ) > -1 ) value = hexToRgb( bgColor ); 
        else value = bgColor; 

        document.getElementById( "change" ).innerHTML = value; 
} 

function getBgColor ( tag ){ 
        var color = ""; 

        if ( window.getComputedStyle ) color = window.getComputedStyle ( tag, "" )[ "backgroundColor" ]; 
        else color = tag.currentStyle[ "backgroundColor" ]; 

        return color; 
} 
</script>

이 블로그에서 함께 볼만한 글

[ CSS ] IE 8 이하에서 RGBa 적용하기.