[ 자바스크립트 ] HslaToRgba() & RgbaToHsla()

최종 수정일 : 2016. 3. 4.

"HSL" 방식으로 지정한 색상의 경우, 브라우저마다 약간씩 다른 색으로 보여주는 듯 하다.
따라서, 아래 내용은 파이어폭스를 기준으로 작성하였다.

1. HSL/HSLa 방식을 RGB/RGBa 방식으로 바꿔주기.
2. RGB/RGBa 방식을 HSL/HSLa 방식으로 바꿔주기.

---

1. HSL 방식은 RGB 방식으로, HSLa 방식은 RGBa 방식으로 바꿔주기.

출처 : 4.2.4. HSL color values ─ CSS Color Module Level 3 [ W3C ]

<script type="text/javascript">

// 출처 : https://tonks.tistory.com/132 
// 에러가 나온다면, 여기에 댓글을 남겨주세요. 

function HslaToRgba ( hslaType ){ 

        var hsla = hslaType.replace( /[hsla\(\)]| /gi, "" ); 

        hsla = hsla.split( "," ); 

        var H = parseFloat( hsla[ 0 ] ); 
        var S = parseFloat( hsla[ 1 ] ); 
        var L = parseFloat( hsla[ 2 ] ); 

        if ( hsla.length == 4 ) var A = parseFloat( hsla[ 3 ] ); 


        var hueToRgb = function( m1, m2, h ){ 

              var h = ( h < 0 ) ? h + 1 : ( h > 1 ) ? h - 1 : h; 

              if ( h * 6 < 1 ) return m1 + ( m2 - m1 ) * h * 6; 
              if ( h * 2 < 1 ) return m2; 
              if ( h * 3 < 2 ) return m1 + ( m2 - m1 ) * ( 2 / 3 - h ) * 6; 

              return m1; 
        } 


        H = H / 360; 
        S = S / 100; 
        L = L / 100; 

        var m2 = ( L <= 0.5 ) ? L * ( S + 1 ) : L + S - L * S; 
        var m1 = L * 2 - m2; 

        var R = hueToRgb( m1, m2, H + 1 / 3 ); 
        var G = hueToRgb( m1, m2, H ); 
        var B = hueToRgb( m1, m2, H - 1 / 3 ); 

        R = parseInt( R * 255 , 10 ); 
        G = parseInt( G * 255 , 10 ); 
        B = parseInt( B * 255 , 10 ); 


       var rgbaType = ( isNaN(A) ) ? "rgb(" : "rgba("; 
             rgbaType += R + ", " + G + ", " + B; 
             rgbaType += ( isNaN(A) ) ? ")" : ", " + A + ")"; 

       return rgbaType; 
} 
</script>
 

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

<p id="RGBa">  </p>
<p id="RGB">  </p>


<script type="text/javascript">

function testing (){ 

        var HSLa = "hsla(120, 100%, 25%, 0.2)"; 
        var HSL = "hsl( 120, 100%, 25% )"; 

        document.getElementById( "RGBa" ).innerHTML = HslaToRgba( HSLa ); 
        document.getElementById( "RGB" ).innerHTML = HslaToRgba( HSL ); 
} 
</script>
 

---

2. RGB 방식은 HSL 방식으로, RGBa 방식은 HSLa 방식으로 바꿔주기.

출처 : RGB to HSL color conversion [ RapidTables ]

 
<script type="text/javascript">

// 출처 : https://tonks.tistory.com/132
// 에러가 나온다면, 여기에 댓글을 남겨주세요. 

function RgbaToHsla( rgbaType ){ 

        var rgba = rgbaType.replace( /[rgba\(\)]| /gi, "" ).split( "," ); 

        if ( rgbaType.indexOf( "%" ) > -1 ){ 

                for ( var x = 0; x < 3; x++ ) rgba[ x ] = Math.round( parseFloat( rgba[ x ] ) * 2.55 ); 
        } 

        var R = parseInt( rgba[0] , 10 ); 
        var G = parseInt( rgba[1] , 10 ); 
        var B = parseInt( rgba[2] , 10 ); 

        if ( rgba.length == 4 ) var A = parseFloat( rgba[ 3 ] ); 

        R = ( R + 1 ) / 256; 
        G = ( G + 1 ) / 256; 
        B = ( B + 1 ) / 256; 


        var min = Math.min( R , G , B ); 
        var max = Math.max( R , G , B ); 
        var chroma = max - min; 


        var L = ( max + min ) / 2; 

        if ( chroma == 0 ){ 
                var S = 0; 
                var H = 0; 
        } 

        else { 
                var S = 1 - Math.abs(2 * L - 1); 
                     S = chroma / S; 

                switch ( max ){ 
                        case R: 
                                var H = ( (G - B) / chroma ) % 6; 
                                break; 
                        case G: 
                                var H = ( B - R ) / chroma + 2; 
                                break; 
                        case B: 
                                var H = ( R - G ) / chroma + 4; 
                                break; 
                } 

                H = H * 60; 
                if ( H < 0 ) H += 360; 
        } 


        S = S * 100; 
        L = L * 100; 

        // 소수점 이하 둘째자리까지 구하기. 
        H = parseFloat( H.toFixed( 2 ) ); 
        S = parseFloat( S.toFixed( 2 ) ); 
        L = parseFloat( L.toFixed( 2 ) ); 

        var hslaType = ( isNaN(A) ) ? "hsl(" : "hsla("; 
             hslaType += H + ", " + S + "%, " + L + "%"; 
             hslaType += ( isNaN(A) ) ? ")" : ", " + A + ")"; 

       return hslaType; 
} 
</script>
 

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

<p id="HSLa">  </p>
<p id="HSL">  </p>


<script type="text/javascript">

function testing (){ 

        var RGBa = "rgba( 70%, 53%, 29%, 0.6 )"; 
        var RGB = "rgb(179, 135, 74)"; 

        document.getElementById( "HSLa" ).innerHTML = RgbaToHsla( RGBa ); 
        document.getElementById( "HSL" ).innerHTML = RgbaToHsla( RGB ); 
} 

</script>
 

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

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

이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요. *^^*