JavaScriptでランダムな色を作る方法｜HSL・HEXの実装例

JavaScriptでランダムな色を作るなら、Math.random()で色相やRGB値を生成し、CSSカスタムプロパティに反映します。ただし、ランダム背景は文字とのコントラストを保証しません。学習用デモでは乱数生成を使い、実サイトではコントラストを確認済みの色一覧から選ぶ方法が安全です。

この記事は、ボタンを押すたびに色を変える小さなプログラムを作ります。イベントへ値を渡す方法はaddEventListenerで引数を渡す方法、class操作はclassListとstyleの使い分けを参照してください。

0以上max未満のランダム整数を作る方法

Math.random()は0以上1未満の疑似乱数を返します。範囲を掛け、Math.floor()で切り捨てると、0以上max未満の整数にできます。

function randomInt(max) {
  return Math.floor(Math.random() * max);
}

console.log(randomInt(256)); // 0〜255のいずれか

Math.round()を使うと端の値だけ選ばれる範囲が狭くなり、分布が均等になりません。整数範囲にはMath.floor()を使います。

HSLでランダムな色を作る方法

HSLなら、色相だけを0〜359度で変え、彩度と明度を固定できます。RGBを3成分すべてランダムにするより、色の鮮やかさを一定に保ちやすい方法です。

function createRandomHslColor() {
  const hue = Math.floor(Math.random() * 360);
  return `hsl(${hue} 70% 45%)`;
}

console.log(createRandomHslColor());

この関数は視覚デモ用です。同じ入力から同じ色を再現する必要がある場合や、ブランド配色を守る必要がある場合は、乱数ではなく固定の対応表を使います。

ボタンで背景色を変えるプログラム

HTMLには操作用のdata-*属性を置き、JavaScriptはその属性で要素を取得します。色はCSSカスタムプロパティに渡します。

<section class="color-demo" data-color-preview>
  <p class="color-demo__value" data-color-value>色を生成してください</p>
  <button class="color-demo__button" type="button" data-color-button>
    色を変える
  </button>
</section>

.color-demo {
  --generated-color: hsl(210 70% 45%);
  background-color: var(--generated-color);
  color: white;
  padding: 2rem;
}

.color-demo__button {
  font: inherit;
}

const preview = document.querySelector("[data-color-preview]");
const button = document.querySelector("[data-color-button]");
const value = document.querySelector("[data-color-value]");

function createRandomHslColor() {
  const hue = Math.floor(Math.random() * 360);
  return `hsl(${hue} 70% 45%)`;
}

button.addEventListener("click", () => {
  const color = createRandomHslColor();
  preview.style.setProperty("--generated-color", color);
  value.textContent = color;
});

フックをdata-color-buttonに分けることで、見た目のclass名を変更してもJavaScriptの取得処理に影響しにくくなります。クリック以外のイベントで色を変えたい場合や、リスナーの解除が必要な場合は、addEventListenerの基本とさまざまな使い方を参照してください。

16進数カラーを作る方法

0〜16777215（0xffffff）の整数を16進数に変換し、padStart()で6桁に揃えます。

function createRandomHexColor() {
  const value = Math.floor(Math.random() * 0x1000000);
  return `#${value.toString(16).padStart(6, "0")}`;
}

console.log(createRandomHexColor());

0x1000000を上限として掛けることで、0x000000から0xffffffまでの整数を作れます。padStart()がないと、先頭の0が省かれて3桁や5桁になる場合があります。

読みやすい文字色をどう確保するか

ランダム生成だけでは、背景と文字のコントラストを常に満たせません。公開UIでは、アクセシビリティ基準に照らして確認済みの組み合わせを配列へ用意し、ペア単位で選びます。

const verifiedThemes = [
  { background: "#1f2937", foreground: "#ffffff" },
  { background: "#ffffff", foreground: "#111827" },
  { background: "#0f766e", foreground: "#ffffff" },
];

function pickRandomItem(items) {
  return items[Math.floor(Math.random() * items.length)];
}

const theme = pickRandomItem(verifiedThemes);

上の値は実装例です。実際のフォントサイズ、太さ、状態色を含めてプロジェクト側で検証してください。「暗そうだから白文字」という見た目だけの判定では不十分です。

Math.randomを使わない方がよい用途

Math.random()は暗号学的に安全な乱数ではありません。色、簡単な演出、学習用抽選には使えますが、トークン、パスワード、セキュリティ境界、金銭や公平性を保証する抽選には使いません。セキュリティ用途ではWeb Crypto APIなど、目的に合う仕組みを選びます。

動かないときの確認手順

1. querySelector()の結果がnullでないか確認する。
2. scriptがDOM構築後に実行されているか確認する。
3. イベントへ関数を渡し、作成時に実行していないか確認する。
4. 生成色をconsoleに出し、CSSに渡す前後を分けて確認する。
5. 文字の可読性が必要なら、ランダム生成をやめて検証済みペアに戻す。

学習用ならHSLの色相だけを変える方法から始め、公開UIでは検証済み配色から選ぶ構成へ進めてください。イベント処理を再利用する場合は、addEventListenerへ引数を渡す方法で関数参照の扱いを確認できます。