16 進数から RGB への変換

はじめに

この実験では、JavaScript を使って 16 進数の色コードをrgb()またはrgba()文字列に変換する方法を探ります。16 進数コードから RGB 値を抽出するためにビット演算子とマスキングをどのように使うかを学びます。また、3 桁と 6 桁の 16 進数コードを扱う方法と、結果の文字列にアルファ値を組み込む方法についても説明します。

16 進数の色コード（#接頭辞付きまたはなし）を RGB 文字列に変換するには、次の手順に従います。

ターミナル/SSH を開き、コーディングを練習するためにnodeと入力します。
ビット右シフト演算子を使用し、&（論理積）演算子でビットをマスクします。
色コードが 3 桁の場合、まず 6 桁のバージョンに変換します。
6 桁の 16 進数にアルファ値が付けられている場合、rgba()文字列を返します。

以下は変換用の JavaScript コードです。

const hexToRGB = (hex) => {
  let alpha = false,
    h = hex.slice(hex.startsWith("#") ? 1 : 0);
  if (h.length === 3) h = [...h].map((x) => x + x).join("");
  else if (h.length === 8) alpha = true;
  h = parseInt(h, 16);
  return (
    "rgb" +
    (alpha ? "a" : "") +
    "(" +
    (h >>> (alpha ? 24 : 16)) +
    ", " +
    ((h & (alpha ? 0x00ff0000 : 0x00ff00)) >>> (alpha ? 16 : 8)) +
    ", " +
    ((h & (alpha ? 0x0000ff00 : 0x0000ff)) >>> (alpha ? 8 : 0)) +
    (alpha ? `, ${h & 0x000000ff}` : "") +
    ")"
  );
};

次の例でhexToRGB関数を使用できます。

hexToRGB("#27ae60ff"); // 'rgba(39, 174, 96, 255)'
hexToRGB("27ae60"); // 'rgb(39, 174, 96)'
hexToRGB("#fff"); // 'rgb(255, 255, 255)'

まとめ

おめでとうございます！あなたは 16 進数から RGB の実験を完了しました。あなたの技術を向上させるために、LabEx でさらに実験を練習することができます。

16 進数を RGB 文字列に変換する

はじめに

16 進数から RGB への変換

まとめ