JavaScript에서 RGB를 HEX로 변환

이 튜토리얼에서는 JavaScript의 toString() 함수를 사용하여 RGB를 HEX로 변환하는 방법에 대해 설명합니다.

JavaScript의 toString() 함수를 사용하여 RGB를 HEX로 변환

JavaScript에는 서로 다른 색 공간 간에 변환할 수 있는 미리 정의된 함수가 없기 때문에 JavaScript에서 서로 다른 색 공간 간의 변환이 어렵습니다.

따라서 하나의 색 공간을 다른 색 공간으로 변환하는 자체 변환 함수를 만들어야 합니다. 변환 함수를 만들려면 두 색 공간의 차이를 알아야 합니다.

예를 들어 RGB와 HEX 색상 공간의 차이점은 RGB는 10진수 형식이고 HEX는 16진수 형식이라는 것입니다. RGB에서 HEX로 변환하려면 각 색상의 10진수를 RGB에서 16진수로 변환한 다음 연결하여 동등한 16진수 색상 공간을 생성하기만 하면 됩니다.

값을 10진수에서 16진수로 변경하려면 toString(16) 함수를 사용할 수 있습니다. 변환된 숫자의 길이가 1이면 앞에 0을 추가해야 합니다. 아래 코드를 참조하십시오.

function ColorToHex(color) {
  var hexadecimal = color.toString(16);
  return hexadecimal.length == 1 ? '0' + hexadecimal : hexadecimal;
}

function ConvertRGBtoHex(red, green, blue) {
  return '#' + ColorToHex(red) + ColorToHex(green) + ColorToHex(blue);
}
console.log(ConvertRGBtoHex(255, 100, 200));

출력:

#ff64c8

parseInt() 함수를 사용하여 HEX에서 RGB로 변환할 수도 있습니다. HEX 색상 공간은 첫 번째 숫자를 제외하고 6자리를 포함합니다. 처음 2자리를 가져와서 빨간색이 될 parseInt() 함수를 사용하여 십진법 형식으로 변환해야 합니다. 유사하게, 다음 두 자리는 우리에게 녹색을 줄 것이고, 나머지는 우리에게 파란색을 줄 것입니다.

예를 들어 parseInt() 함수를 사용하여 HEX 색상을 RGB로 변환해 보겠습니다. 아래 코드를 참조하십시오.

var hex = '#ff64c8';
var red = parseInt(hex[1] + hex[2], 16);
var green = parseInt(hex[3] + hex[4], 16);
var blue = parseInt(hex[5] + hex[6], 16);
console.log(red, green, blue);

출력:

255 100 200

위의 코드를 사용하여 함수를 만들 수도 있으므로 코드를 다시 작성할 필요가 없습니다. 마찬가지로 색상 공간을 다른 색상 공간으로 변환할 수 있습니다. 다른 색상 공간의 차이점을 이해하면 됩니다.