JavaScript | HEXカラーコードをランダム生成する

2021-01-282021-02-08JavaScript DOM操作,JavaScript

JavaScriptを使ってランダムなHEXカラーコードを生成する方法の紹介です。

See the Pen JavaScript | Randomly generate HEX color code by yochans (@yochans) on CodePen.

HEXカラーコードをランダム生成

HEXカラーコードをランダム生成するサンプルコードです。

let color = '#'+Math.floor(Math.random()*16777215).toString(16);

以下は上記動作サンプルのHTML、JavaScriptコードになります。

<p id="output"></p>

サンプルでは、ループ処理で複数のランダムカラーコードを生成しながら<div>要素をHTMLに追加しています。

for (let i = 0; i < 198; i++) {

	let color = '#'+Math.floor(Math.random()*16777215).toString(16);
	
	output.innerHTML += `<div class="colors" style="background-color:` + color + `">` + color + `</div>`;

}

カラーコードランダム生成の実行結果の画像