JavaScriptでランダムなHEXカラーコードを生成する方法

JavaScriptで、関数を呼び出すたびにランダムに生成された16進数（HEX）形式のカラーコードを返す関数 randomColor を作成してみましょう。本記事では、Math.random() を活用したシンプルで実用的な実装例と、その仕組みについて詳しく解説します。

コード例

以下がその実装コードです。

const randomColor = () => {
    let color = '#';
    for (let i = 0; i < 6; i++){
        const random = Math.random();
        const bit = (random * 16) | 0;
        color += (bit).toString(16);
    };
    return color;
};
console.log(randomColor());
console.log(randomColor());
console.log(randomColor());
console.log(randomColor());
console.log(randomColor());
console.log(randomColor());
console.log(randomColor());

コードの仕組み

この関数がどのようにランダムな色を生成しているのか、処理の流れを順番に見ていきましょう。

• 先頭の「#」： HEXカラーコードは必ずシャープ記号（#）から始まるため、初期値として設定しています。
• Math.random()： 0以上1未満のランダムな小数を返します。
• (random * 16) | 0： ランダム値に16を掛けることで0〜15の範囲に収め、ビット演算子 | 0 によって小数点以下を切り捨てて整数にしています。
• toString(16)： 整数を16進数表記の文字列（0〜9、a〜f）に変換します。
• 6回のループ： R・G・Bそれぞれ2桁ずつ、合計6文字の16進数を連結し、「#RRGGBB」形式の完全なカラーコードを完成させています。

出力結果

コンソールには以下のようなランダムなカラーコードが出力されます。実行するたびに結果は変わります。

#762b46
#cfa0bf
#a20ee1
#c2f7e0
#5d5822
#380f30
#805408

応用：生成した色を画面に反映する

生成したカラーコードは、そのまま要素のスタイルに適用できます。たとえばページの背景色をランダムに変更したい場合は、次のように書きます。

document.body.style.backgroundColor = randomColor();

ボタンのクリックイベントと組み合わせれば、「クリックするたびに背景色が変わる」といったインタラクティブな演出も簡単に実装できます。ぜひ実際のプロジェクトで活用してみてください。