JavaScriptでRGBカラーを16進数カラーコード（HEX）に変換する方法

RGBカラーを16進数に変換するには

JavaScriptでは、RGB形式の色情報を受け取り、それを16進数カラーコード（HEXコード）に変換する関数を作成できます。この関数は、赤・緑・青それぞれの数値を含むオブジェクトを引数として受け取ります。

期待される動作

例えば、次のような入力に対して：

rgbToHex(0, 128, 192) // 結果: '#0080C0'

実装コード

const rgbColor = {
  red: 0,
  green: 51,
  blue: 155
};

function rgbToHex({ red: r, green: g, blue: b }) {
  const prefix = '#';
  const hex = prefix + ((1 << 24) + (r << 16) + (g << 8) + b)
    .toString(16)
    .slice(1);
  return hex;
}

console.log(rgbToHex(rgbColor));

コンソール出力

#00339b

仕組みの解説

この関数はビット演算を活用することで、簡潔にHEXコードを生成しています。各行の役割は以下の通りです。

• (1 << 24): 基準値として24ビット左シフトした値を加えることで、先頭が「0」になるケースでも桁落ちを防ぎます。
• (r << 16)、(g << 8): 赤と緑の値をそれぞれ対応するビット位置へ移動させ、1つの数値として結合します。
• toString(16): 数値を16進数の文字列に変換します。
• slice(1): 基準値として加えた先頭の「1」の分だけ最初の1文字を取り除き、正しい6桁のHEXコードを取得します。

代替方法：padStartを使った実装

ビット演算を使わず、より直感的に記述する方法もあります。各チャンネルの値を個別に16進数へ変換し、padStart()で2桁になるようゼロ埋めするアプローチです。

function rgbToHex(r, g, b) {
  const toHex = (n) => n.toString(16).padStart(2, '0');
  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}

console.log(rgbToHex(0, 51, 155)); // #00339b

この方法はコードの意図が明確で読みやすいため、チーム開発や学習用途にも適しています。どちらの方法でも結果は同じなので、プロジェクトのスタイルに合わせて選択しましょう。