JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

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

JavaScriptを使えば、ランダムな16進数のカラーコード(HEXコード)を簡単に生成できます。この記事では、ボタンをクリックするたびにランダムな色が表示されるシンプルなサンプルを紹介します。

実装例

以下のコードでは、「GENERATE」ボタンをクリックするとランダムなHEXカラーコードが生成され、その色がボックスの背景に適用されると同時に、コード自体も画面に表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        box-sizing: border-box;
        font-size: 18px;
        font-weight: 500;
        color: white;
        width: 150px;
        height: 150px;
        text-align: center;
        padding-top: 4%;
    }
</style>
</head>
<body>
<h1>ランダムなカラーコードを生成</h1>
<button class="Btn">GENERATE</button>
<div class="result"></div>
<h3>上のボタンをクリックすると、ランダムなHEXカラーコードが生成されます</h3>
<script>
    let resultEle = document.querySelector(".result");
    let hexCode = "0123456789ABCDEF";
    let Color = "#";
    document.querySelector(".Btn").addEventListener("click", () => {
        for (let i = 0; i < 6; i++)
            Color += hexCode[Math.floor(Math.random() * 16)];
        resultEle.style.backgroundColor = Color;
        resultEle.innerHTML = Color;
    });
</script>
</body>
</html>

コードの解説

  • 変数hexCodeには、16進数で使われる「0〜9」と「A〜F」の16文字を格納しています。
  • Math.random() * 16で0以上16未満の乱数を生成し、Math.floor()で整数に丸めることで、ランダムな文字を1つ取り出します。
  • この処理を6回繰り返し、「#」の後ろに6文字を連結することで、#RRGGBB形式のカラーコードを完成させています。
  • 生成されたコードはstyle.backgroundColorでボックスの背景色として適用され、同時にinnerHTMLでテキストとしても表示されます。

実行結果

ページを開くと、次のように表示されます。

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

「GENERATE」ボタンをクリックすると、ランダムなHEXカラーコードが生成され、ボックスの色が変化します。

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

このように、Math.random()を活用するだけで、数行のコードでランダムなカラーコードを生成できます。カラーピッカーやデザインツールなど、さまざまな場面で応用できるテクニックなので、ぜひ試してみてください。

  1. JavaScriptの列挙型（Enum）とは？オブジェクトを使った実装方法をわかりやすく解説

    JavaScriptには列挙型が組み込まれていない JavaScriptは、TypeScriptやJavaなどの言語と異なり、列挙型（Enum）を標準機能としてサポートしていません。そのため、JavaScriptで列挙型のようなものを実現するには、オブジェクトを使って自前で実装する必要があります。 本記事では、オブジェクトを利用してJavaScriptで列挙型を再現する方法を、実際のコード例とともにわかりやすく解説します。 オブジェクトで列挙型を実現する基本の考え方 JavaScriptで列挙型を作る最もシンプルな方法は、キー（名前）と値をペアにしたオブジェクトを定義することです。以下の例で

  2. Tkinterのデフォルトウィンドウカラー設定方法と16進カラーコードの使い方

    Tkinterウィンドウの色をカスタマイズする方法Tkinterのウィンドウは、背景色・前景色・幅・高さなどのプロパティや属性を追加することで、自由にカスタマイズできます。config()メソッドのcolor属性を指定することで、メインウィンドウのデフォルトカラーを定義できます。ウィンドウの色は、16進数カラーコード(例:「#000」は黒)または色名のいずれかで指定可能です。Tkinterがサポートしているカラーチャートは、公式ドキュメントなどで確認できます。サンプルコード# 必要なライブラリをインポート from tkinter import * # Tkinterフレームのインスタンスを