JavaScriptで16進数カラーコードをRGB値に変換する関数の実装方法

Web開発において、16進数（HEX）形式のカラーコードをRGB形式へ変換したいケースは頻繁に発生します。本記事では、16進数のカラーコードを引数として受け取り、赤（Red）・緑（Green）・青（Blue）それぞれの数値を含むオブジェクトを返すJavaScript関数の作成方法を解説します。

関数の仕様

今回実装する関数「hexToRGB」は、以下の要件を満たす必要があります。

• 16進数のカラーコード（文字列）を引数として受け取る
• red・green・blue の3つのプロパティを持つオブジェクトを返す
• 3桁表記（例：#0AC）と6桁表記（例：#0080C0）の両方に対応する

たとえば、次のように呼び出した場合の期待される結果です。

hexToRgb('#0080C0') → red: 0, green: 128, blue: 192

実際のコード

const hex = '#0080C0';

const hexToRGB = hex => {
  let r = 0, g = 0, b = 0;

  // 3桁の16進数（例：#0AC）への対応
  if (hex.length == 4) {
    r = "0x" + hex[1] + hex[1];
    g = "0x" + hex[2] + hex[2];
    b = "0x" + hex[3] + hex[3];
  // 6桁の16進数（例：#0080C0）への対応
  } else if (hex.length == 7) {
    r = "0x" + hex[1] + hex[2];
    g = "0x" + hex[3] + hex[4];
    b = "0x" + hex[5] + hex[6];
  }

  return {
    red: +r,
    green: +g,
    blue: +b
  };
};

console.log(hexToRGB(hex));

コンソールの出力結果

{ red: 0, green: 128, blue: 192 }

コードの解説

1. 文字列長による分岐処理

引数として渡された文字列の長さを確認することで、3桁表記（#を含めて4文字）か6桁表記（#を含めて7文字）かを判別しています。これにより、CSSで使われる両方のHEX表記に柔軟に対応できます。

2. 各桁の抽出と数値への変換

文字列の先頭に「0x」を付けて連結すると、JavaScriptはその文字列を16進数の数値リテラルとして扱います。さらに、戻り値では単項プラス演算子（+）を使って文字列を数値型に明示的に変換しています。

3. 3桁表記の仕組み

CSSのカラーコードにおける3桁表記は、各桁を2回繰り返したものと同じ色を意味します。たとえば「#0AC」は「#00AACC」と同等です。そのため、同じ文字を2つ連結することで、6桁相当の値を正しく生成しています。

まとめ

このように、文字列操作と単項プラス演算子を組み合わせるだけで、外部ライブラリに頼らずに16進数からRGBへの変換を実現できます。実務で利用する場合は、不正な入力値に対するバリデーションを追加したり、「rgb(0, 128, 192)」のような形式の文字列として返すよう拡張すると、より使いやすい関数になります。