Web制作

  1. ブログトップ
  2. Web制作
  3. JavaScriptで、16進数のカラーコードをRGBに変換する方法

Web制作

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

仲川 舞

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

16進数カラーコードをRGB（赤(R)、緑(G)、青(B)）に変換する方法を解説します。16進数カラーコードはWebデザインなどでよく使われる色の表現方法で、#FF5733のように6桁の16進数で色を表します。これをRGB形式に変換することで、色の赤・緑・青の成分を個別に確認でき、色調整がしやすくなります。

16進数カラーコードをRGBに変換するツール

16進数カラーコードをRGBに変換するツールを作りました。このツールは、ユーザーが入力した16進数のカラーコードをRGB形式に変換し、その結果を表示します。RGB形式では、赤(R)、緑(G)、青(B)の各成分を0から255の範囲で示します。

CodeSandBoxの画像

実際に操作できるCodeSandBoxのデモです↓

https://4lqzv3.csb.app/

使用方法

  1. ユーザーはテキストフィールドに16進数カラーコードを入力します（例: #FF5733）。
  2. 「変換」ボタンをクリックします。
  3. 結果が表示され、RGB値が背景色やテキストの色に適用されます。
  4. 入力が無効な場合、エラーメッセージが表示されます。

実装方法

実装方法について解説します。

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Sandbox</title>
    <link rel="stylesheet" href="styles.css" />
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    <h1>16進数カラーコードをRGBに変換</h1>
    <input type="text" id="hexInput" placeholder="#000000" maxlength="7" />
    <button id="convertButton">変換</button>

    <div class="result">
      <p class="result-text" id="js-result-text"></p>
      <div class="result-box" id="js-result-box"></div>
    </div>
    <script src="./index.js"></script>
  </body>
</html>

CSS

body {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}
input,
button {
  padding: 10px;
  font-size: 16px;
  margin: 5px;
}
.result {
  text-align: center;
  margin-top: 20px;
  font-size: 18px;
}
.result-box {
  width: 50px;
  height: 50px;
}

JavaScript

document.getElementById("convertButton").addEventListener("click", convertColor);

function convertColor() {
  const hexInput = document.getElementById("hexInput").value;
  const resultText = document.getElementById("js-result-text");
  const resultBox = document.getElementById("js-result-box");

  // コンソールで入力値を確認
  console.log("入力されたカラーコード:", hexInput);

  // 16進数が正しいか確認する正規表現
  const hexRegex = /^#([A-Fa-f0-9]{6})$/;
  if (!hexRegex.test(hexInput)) {
    resultText.textContent =
      "有効な16進数カラーコードを入力してください (例: #1a2b3c)";
    resultText.style.color = "red";
    return;
  }

  // 16進数をRGBに変換
  const hex = hexInput.substring(1); // #を取り除く
  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);

  // コンソールでRGB値を確認
  console.log(`変換結果: RGB(${r}, ${g}, ${b})`);

  // 結果を画面に表示し、色を変更
  resultText.textContent = `RGB(${r}, ${g}, ${b})`;
  resultText.style.color = `rgb(${r}, ${g}, ${b})`; // 結果の文字色も変更
  resultBox.style.backgroundColor = `rgb(${r}, ${g}, ${b})`; // 背景色を変更
}

カラーコードの取得と検証

入力された16進数カラーコードが正しいかをチェックするため、/^#([A-Fa-f0-9]{6})$/という正規表現を使います。この正規表現は、先頭が「#」で始まり、続く6文字が16進数の0-9およびA-F（大文字小文字区別しない）で構成されているかを確認します。

  // 16進数が正しいか確認する正規表現
  const hexRegex = /^#([A-Fa-f0-9]{6})$/;
  if (!hexRegex.test(hexInput)) {
    resultText.textContent =
      "有効な16進数カラーコードを入力してください (例: #1a2b3c)";
    resultText.style.color = "red";
    return;
  }

16進数からRGBへの変換

カラーコードが正しければ、「#」を取り除き、各2文字ずつ分けて、それぞれをparseInt()関数を使って10進数に変換します。たとえば、「#1a2b3c」であれば「1a」は赤(R)成分、「2b」は緑(G)成分、「3c」は青(B)成分に該当します。parseInt("1a", 16)で赤の値を取得し、同様にして緑と青の値も取得できます。

  // 16進数をRGBに変換
  const hex = hexInput.substring(1); // #を取り除く
  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);

RGB形式で表示

変換結果を「RGB(26, 43, 60)」のような形式で表示し、さらにその色をプレビューできるように背景色に適用します。

  // 結果を画面に表示し、色を変更
  resultText.textContent = `RGB(${r}, ${g}, ${b})`;
  resultText.style.color = `rgb(${r}, ${g}, ${b})`; // 結果の文字色も変更
  resultBox.style.backgroundColor = `rgb(${r}, ${g}, ${b})`; // 背景色を変更

終わりに

以上、16進数カラーコードをRGB（赤(R)、緑(G)、青(B)）に変換する方法をご紹介しました。簡単なJavaScriptで変換できるので、ぜひ試して見て下さい。

spoool blog

TOP