生成ツール

ランダムカラー生成ツール

HEX、RGB、HSL形式のランダムなカラーコードを1個から最大50個まで瞬時に生成するオンラインツールです。

ツールを実行

ランダムなカラーコードを手軽に生成できるオンラインツールです。ウェブデザイン、イラスト制作、UIモックアップの配色検討などで、新しい色合いのアイデアをすばやく探したい場面に適しています。出力形式は、ウェブ制作で標準的な16進数のHEX形式(例: #3a86ff)のほか、RGB形式(例: rgb(58, 134, 255))やHSL形式(例: hsl(217, 100%, 61%))を用途に合わせて指定できます。生成する色の数は1個から最大50個まで設定可能で、複数のカラー候補を一度に確認できます。指定形式が未入力または非対応の場合は、標準のHEX形式で結果が表示されます。

使い方

  1. 必要に応じて、生成する色の個数を1から50の範囲で入力します(初期値は1です)。
  2. 出力したいカラー形式をHEX、RGB、HSLから選択または指定します(初期値はHEXです)。
  3. 生成ボタンを押すと、指定した形式のカラーコード一覧が結果欄に表示されます。
  4. 表示されたカラーコードをコピーして、CSSやデザインツールなどに貼り付けて使用します。

使用例

  • 生成数を「5」、形式を「HEX」に設定すると、「#e63946」「#f1faee」「#a8dadc」「#457b9d」「#1d3557」のような5つの小文字カラーコードが生成されます。
  • 生成数を「3」、形式を「RGB」に設定すると、「rgb(255, 99, 71)」「rgb(58, 134, 255)」「rgb(46, 204, 113)」のようなCSS用RGB文字列が出力されます。
  • 生成数を「2」、形式を「HSL」に設定すると、「hsl(210, 80%, 50%)」「hsl(340, 75%, 60%)」のような色相・彩度・輝度の形式で表示されます。

よくある質問

一度に生成できる色の数に上限はありますか?

1回の操作で生成できる色の数は1個から最大50個までです。50を超える数値を指定した場合は自動的に50個に制限され、0以下の数値を指定した場合は1個として生成されます。

対応しているカラー形式にはどのようなものがありますか?

16進数表記のHEX形式(#ffffffなど)、RGB形式(rgb(255, 255, 255)など)、HSL形式(hsl(0, 0%, 100%)など)に対応しています。これら以外の文字列が渡された場合は、標準のHEX形式で出力されます。

生成される色の値はどのように決定されますか?

赤・緑・青の各色成分(0から255)が独立してランダムに選ばれ、それをもとに指定された形式のテキストへ変換されて表示されます。

このツールを埋め込む

以下のコードを使って、SmartPlusLab のツールをウェブサイトに追加できます。