JavaScript で RGB を HEX に変換する

このチュートリアルでは、JavaScript の toString() 関数を使用して RGB を HEX に変換する方法について説明します。

JavaScript の toString() 関数を使用して RGB を HEX に変換する

JavaScript には、異なる色空間間で変換できる定義済みの関数が存在しないため、異なる色空間間の変換は困難です。

したがって、ある色空間を別の色空間に変換するには、独自の変換関数を作成する必要があります。変換関数を作成するには、2つの色空間の違いを知る必要があります。

たとえば、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() 関数を使用してそれらを 10 進形式に変換する必要があります。これは、赤色になります。同様に、次の 2 桁は緑色になり、残りは青色になります。

たとえば、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

上記のコードを使用して関数を作成することもできるため、コードを再度記述する必要はありません。同様に、任意の色空間を別の色空間に変換できます。異なる色空間の違いを理解する必要があります。