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

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

대부분의 사진을 편집하는 프로그램은 0에서 255까지의 RGB(Red, Green, Blud) 모델을 사용하여 색상을 나타냅니다. 특정 색상을 웹 브라우저에 표현하고 싶다면, 이 RGB 값을 16진수로 가져와야 합니다.

 

JavaScript는 숫자를 16진수로 변환하는 toString() 메서드를 제공하지만, RGB 값을 16진수로 변환하는 기능은 제공하지 않습니다. 따라서, RGB 값을 16진수로 변환하기 위해서는 toString() 메서드를 사용하여 개발자가 직접 해당 기능을 가진 함수를 구현해야 합니다.

 

이번 포스팅은 toString() 메서드를 사용하여 RGB 값을 16진수로 변환하는 함수를 구현합니다.

---

순서 1. 정수를 16진수로 변환하는 함수 구현

먼저, 0에서 255까지의 정수를 16진수로 변환하는 기능을 가진 함수를 toString() 메서드를 사용하여 구현합니다.

 

매개변수로 전달받은 값이 숫자가 아닐 수 있으므로 Number() 함수를 호출하여 숫자로 변환 후 toString() 메서드의 매개변수로 16을 전달하여 숫자로 변환된 값을 16진수 문자열로 변환합니다.

 

16진수로 변환된 값이 2자리가 아닐 수 있으므로 문자열 길이가 1인 경우 문자열 "0"을 추가합니다.

const valueToHex = function(val) { 
  var hex = Number(val).toString(16);
  return hex.length === 1 ? '0' + hex : hex;
};

---

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

첫 번째 순서에서 단일 값을 16진수로 변환하는 기능을 가진 함수를 구현하였습니다. 이제, 전체 RGB 색상을 16진수로 변환하는 함수가 필요합니다.

 

세 개의 매개변수를 가지며, 첫 번째 순서에서 구현한 valueToHex() 메서드를 호출하여 전체 RGB 색상을 16진수로 변환 후 문자열로 연결합니다.

const rgbToHex = function(r, g, b) {
  return (valueToHex(r) + valueToHex(g) + valueToHex(b));
}

 

다음 예제는 첫 번째 순서와 두 번째 순서에서 자체적으로 구현한 valueToHex(), rgbToHex() 메서드를 호출하여 전체 RGB 색상을 16진수로 변환합니다.

const valueToHex = function(val) { 
  var hex = Number(val).toString(16);
  return hex.length === 1 ? '0' + hex : hex;
};

const rgbToHex = function(r, g, b) {
  return (valueToHex(r) + valueToHex(g) + valueToHex(b));
}

console.log(rgbToHex(0, 255, 100));  // 00ff64
console.log(rgbToHex(0, 200, 100));  // 00c864
console.log(rgbToHex(255, 100, 10)); // ff640a