[JS] HEX, RGB 색상코드 변환하기

흔한 웹사이트에서는 색깔을 지정하는 방법으로 HEX(FFFFFF), RGB(255,255,255) 방식의 색상 코드를 많이 사용합니다. 

 

완성 코드

 

• HEX
  • 영어 16의 줄임말로 10진수를 16진수로 변환시켜 사용하는 색깔 코드입니다.
• RGB (red, green, blue) 
  
  • 각 세 가지의 10진수 색상이(0~255) 조합된 색깔 코드입니다.

 

예시 → 255, 255, 255 = ( FFFFFF )

 

코드

const getHEX = (RGB) => {  
  const colors = RGB.split(",");
  
  return colors
    .map(color => Number(color)
    .toString(16)
    .padStart(2, '0'))
    .join('');
}

const HEX = getHEX('255,255,255');
// ffffff

RGB 값을 넣으면 HEX 색상 코드가 반환되는 함수입니다. 콤마를 기준으로 문자를 나누고 toString() 메서드를 이용해서 16진수로 바꿔줍니다.

 

const getRGB = (HEX) => {
  return HEX.match(/.{2}/g)?.map(replacer => parseInt(replacer, 16) || 0);
}

const RGB = getRGB('FFFFFF');
// [255, 255, 255]

HEX 값을 넣으면 RGB 색생을 담은 배열이 반환되는 함수입니다. 최대 숫자인 255의 16진수(FF)를 탐지하여 parseInt() 메서드를 이용해서 16진수를 10진수로 바꿔줍니다.