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

Web開発では、ランダムな色を動的に生成したい場面がよくあります。例えば、デモアプリの配色やプレースホルダー、デザインのプロトタイプなどです。本記事では、呼び出されるたびにランダムな16進（HEX）カラーコードを返すJavaScript関数 randomColor の実装方法を解説します。

実装コード

16進カラーコードは「#」に続けて6桁の16進数（0〜9、a〜f）で構成されます。そこで、0から15までのランダムな整数を6回生成し、それぞれを16進文字列に変換して連結するアプローチを採用します。

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());

コードの仕組み

処理の流れを順番に見ていきましょう。

• Math.random()：0以上1未満のランダムな小数を返します。
• (random * 16) | 0：乱数に16を掛けることで0以上16未満の値になり、ビット演算子 | を使うことで小数点以下が切り捨てられ、0〜15の整数が得られます。Math.floor() の代わりとして機能します。
• .toString(16)：数値を16進表記の文字列に変換します。10〜15は自動的に a〜f になります。
• これらを6回繰り返して「#」の後ろに連結することで、完全な16進カラーコードが完成します。

実行結果

コンソールに出力される結果の一例は次のとおりです。実行するたびに異なる値が表示されます。

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

より簡潔な代替案

ループを使わずに書きたい場合は、Math.floor() と padStart() を組み合わせる方法もあります。

const randomColor = () => 
  '#' + Math.floor(Math.random() * 0xFFFFFF)
       .toString(16)
       .padStart(6, '0');

この方法では、0から16777215（0xFFFFFF）までのランダムな整数を一度に生成し、桁数が6桁に満たない場合は先頭を0で埋めるため、常に正しい形式のカラーコードが得られます。

まとめ

Math.random() と toString(16) を組み合わせれば、シンプルなループ処理だけでランダムな16進カラーコードを簡単に生成できます。用途に応じて、ループ方式と一括生成方式を使い分けるとよいでしょう。