IT/javascript JQUERY

javascript rgb를 hex코드로 변환

하루콩콩 2020. 3. 29. 18:21
반응형

RGB코드란?

RGB코드란 빛의 삼원색인 빨간색(Red), 초록색(Green), 파란색(Blue)을 이용해 색을 표기하는 방식이라고 한다.

그래서 빛의 삼원색의 스펠링 앞글자를 따서 RGB코드라고 표현한다.

 

HEX코드란?

2진수로(0,1) 표현되는 바이너리코드와 함께 컴퓨터에서 자주 쓰이는 코드로 HEX코드는 16진수로 표현된다.

0부터 F까지 표현할수 있다.(0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F)

 

예를 들어 빨간색을 색상코드를 표현한다고 했을때 RGB코드인 경우 R(Red)의 컬러만 들어가있기 때문에 R:255,G:0,B:0

으로 표현되는 반면 HEX코드의 경우 #FF0000으로 표현된다.

 

각 색상의 코드표를 보고 싶다면 네이버 색상코드표에서 손쉽게 RGB및 HEX코드에 해당하는 색상을 확인해볼 수 있다.

https://search.naver.com/search.naver?sm=tab_hty.top&where=nexearch&query=%EC%83%89%EC%83%81%EC%BD%94%EB%93%9C%ED%91%9C&oquery=Hex%EC%BD%94%EB%93%9C&tqi=U0ZNTwp0YiRssU6GwQKsssssshR-255905

 

색상코드표 : 네이버 통합검색

'색상코드표'의 네이버 통합검색 결과입니다.

search.naver.com

 

다음은 자바스크립트에서 RGB의 각 코드를 HEX코드로 변환해 HEX코드를 최종적으로 만드는 방법이다.

RGBtoHex 함수를 통해서 r,g,b의 코드를 각각 파라미터로 받아 toHEX의  함수의 인자로 넘겨 HEX코드로 변환해 리턴값을 받는다(이 리턴값이 HEX코드가 된다.) 

 

function RGBtoHex(R,G,B){ //각각 R,G,B코드 입력

   var hex_code = ToHex(R)+ToHex(G)+ToHex(B);

   console.log(hex_code);

}

 

 

function ToHex(N){ //Hex코드로 변환

   if(N==null) return "00";

   N=parseInt(N);

   if(N==0 || isNan(N)) return "00"

   N=Math.max(0,N);

   N=Math.min(N,255);

   N=Math.round(N);

   return "0123456789ABCDEF".charAt((N-N%16)/16)

            +""0123456789ABCDEF".charAt(N%16);

}

 

 

 

 

반응형