[JavaScript]16진수를 RGB로 변환하는 방법

16진수를 RGB로 변환하는 방법

웹 브라우저에 표현되는 16진수의 RGB(Red, Green, Blue)를 16진수가 아닌 기존 RGB 값으로 변환해야 하는 경우가 존재할 수 있습니다.

 

예를 들어, "ff640a"라는 16진수로 표현된 RGB는 첫 번째 두 자리 쌍이 빨간색(Red), 그다음 두 자리 쌍이 녹색(Green), 마지막 쌍이 파란색(Blue)을 나타냅니다.

 

즉, "ff640a"는 빨간색을 표현하는 "ff", 녹색을 표현하는 "64", 파란색을 표현하는 "0a"로 분할됩니다. "ff"를 10진수로 255, "64"는 10진수로 100, "0a"는 10진수로 10이므로 JavaScript에서 16진수로 표현된 RGB를 다음과 같이 배열로 변환할 수 있습니다.

// "ff640a"
[255, 100, 10]

 

하지만, JavaScipt는 16진수로 표현된 RGB를 기존 RGB 값으로 변환하는 기능을 제공하지 않습니다. 따라서, 개발자가 직접 해당 기능을 가진 함수를 구현해야 합니다.

 

이번 포스팅은 16진수로 표현된 RGB를 기존 RGB 값으로 변환하는 함수를 구현합니다.

---

순서 1. 유효성 체크하는 함수 구현

먼저, 16진수로 표현된 RGB를 체크합니다. 16진수로 표현된 RGB가 "ff640a"이거나 "#ff640a"일 수도 있으므로 문자열 맨 앞에 "#"가 존재하는지 그리고 문자열의 길이가 유효한지 체크할 필요가 있습니다.

 

다음 소스 코드는 매개변수로 전달받은 16진수로 표현된 RGB를 문자열로 변환 후 문자열 맨 앞에 "#"가 존재하면, 해당 문자열을 제거하고 문자열의 길이가 6이 아닌 경우 예외를 전달합니다.

const rgbValidate = function(val) {
  var rgb = String(val);
    
  if(rgb.startsWith('#')) {
    rgb = rgb.slice(1);
  }

  if(rgb.length !== 6) {
    throw '16진수로 표현된 RGB의 값이 올바르지 않습니다.';
  }

  return rgb;
}

---

순서 2. 16진수로 표현된 RGB를 기존 RGB로 변환하는 함수 구현

첫 번째 순서에서 16진수로 표현된 RGB의 유효성을 체크하는 함수를 구현하였습니다. 이제, 16진수로 표현된 RGB를 기존 RGB로 변환하는 함수가 필요합니다.

 

먼저, 매개변수로 전달받은 16진수로 표현된 RGB의 유효성을 체크하기 위해 첫 번째 순서에서 구현한 rgbValidate() 메서드를 호출합니다.

 

그다음 match() 메서드와 정규표현식을 사용하여 빨간색, 녹색, 파란색으로 분할 후 parseInt() 메서드를 사용하여 16진수를 10진수로 변환합니다.

const hexToRgb = function(hex) {
  var rgb = rgbValidate(hex).match(/.{1,2}/g);
  var result = [
    parseInt(rgb[0], 16),
    parseInt(rgb[1], 16),
    parseInt(rgb[2], 16)
  ];

  return result;
}

 

다음 예제는 첫 번째 순서와 두 번째 순서에서 자체적으로 구현한 rgbValidate(), hexToRgb() 메서드를 호출하여 16진수로 표현된 RGB를 기존 RGB로 변환합니다.

const rgbValidate = function(val) {
  var rgb = String(val);
    
  if(rgb.startsWith('#')) {
    rgb = rgb.slice(1);
  }

  if(rgb.length !== 6) {
    throw '16진수로 표현된 RGB의 값이 올바르지 않습니다.';
  }

  return rgb;
}

const hexToRgb = function(hex) {
  var rgb = rgbValidate(hex).match(/.{1,2}/g);
  var result = [
    parseInt(rgb[0], 16),
    parseInt(rgb[1], 16),
    parseInt(rgb[2], 16)
  ];

  return result;
}

console.log(hexToRgb('#ff640a')); // [255, 100, 10]
console.log(hexToRgb('00c864'));  // [0, 200, 100]