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

Web開発では、ランダムな色を生成したい場面がよくあります。例えば、デモアプリケーションの配色や、データの可視化における自動的な色の割り当てなどが挙げられます。

本記事では、ランダムなHEX形式(16進数)のカラーコードを返す関数をJavaScriptで実装する方法を解説します。

ランダムカラーコード生成の仕組み

HEXカラーコードは、「#」に続けて0〜9およびA〜Fの16種類の文字を6つ並べた形式で表されます。つまり、この6文字をランダムに組み合わせることで、約1,677万色(16の6乗 = 16,777,216色)の中から任意の色を生成することが可能です。

コード例

const generateRandomColor = () => {
   const keys = '0123456789ABCDEF';
   let color = '';
   while(color.length < 6){
      const random = Math.floor(Math.random() * 16);
      color += keys[random];
   };
   return `#${color}`;
};
console.log(generateRandomColor());
console.log(generateRandomColor());
console.log(generateRandomColor());
console.log(generateRandomColor());

コードの解説

• 定数keysには、16進数で使用される文字「0123456789ABCDEF」が格納されています。
• whileループ内では、Math.random()に16を掛けた値をMath.floor()で切り捨てることにより、0から15までのランダムな整数を生成しています。
• その整数をインデックスとしてkeysから1文字取り出し、変数colorに連結します。この処理を6回繰り返すことで、6桁の16進数が完成します。
• 最後に先頭に「#」を付けて返すことで、有効なHEXカラーコードとして利用できます。

実行結果

コンソールには以下のように出力されます。なお、ランダム生成のため、実行するたびに異なる値が表示されます。

#C83343
#D9AAF3
#9D55CC
#28AE22

まとめ

Math.random()を活用したシンプルなロジックにより、ランダムなHEXカラーコードを簡単に生成できます。用途に応じて、明るさや色相の範囲を制限するなどのカスタマイズも可能なので、ぜひ応用してみてください。