ランダムな色を16進数・RGB・HSLで生成する方法

ランダムな色を生成する前に

このツールは、配色案やデザイン素材に使える色を、16進数、RGB、HSLのテキストとして作成します。1色だけ試すことも、複数色をまとめて出すこともできます。色の値を手作業で決める前に候補を作りたい場合に便利です。

出力形式を指定しない場合は16進数になります。形式を選べる場合は、用途に合わせて読みやすい表記を選択してください。Webページのスタイル指定には16進数やRGB、色の属性を確認したい場合にはHSLが向いています。

色を生成する手順

1. 色の生成数を入力します。省略した場合は1色です。指定した数は整数に変換できる場合に整数として扱われ、その後1から50の範囲に収められます。0以下は1、50を超える値は50になります。変換時に値の種類や内容が原因となるエラーになった場合は1が使われますが、対象外の変換エラーまで同じ扱いになるとは限りません。

2. 必要に応じて出力形式を選びます。16進数、RGB、HSLに対応しており、形式を指定しないと16進数が選ばれます。選択欄がある場合は、目的の形式を選んでください。

3. 生成を実行し、表示された色の一覧を確認します。生成数として扱われた値が、出力される色の数を決めます。色を1つだけ確認したいときは個数を省略するか、1を指定します。複数の候補が必要なときは、1から50までの範囲で個数を指定します。

結果の読み方と注意点

16進数の結果は、先頭にシャープ記号が付き、その後に小文字の16進数字6桁が続きます。RGBの結果は rgb(r, g, b) の形で、赤・緑・青の各値が0から255までの整数になります。HSLの結果は、色相、彩度、明度を整数で示し、彩度と明度にはパーセント記号が付きます。

各色は赤、緑、青の成分をそれぞれ独立に選んで作られます。そのため、複数の結果を出しても、特定の並びや重複しないことを前提にせず、表示された値をそのまま確認してください。形式に指定した値が対応する選択肢と一致しない場合は、16進数形式のテキストになります。

使用例

配色候補を3つ比較したいデザイン担当者が、RGB形式で3色を生成します。

生成数に3を指定し、出力形式でRGBを選んで実行します。

RGBを選ぶと、rgb(r, g, b) の形をした3行が表示され、各成分は0から255までの整数になります。

制限事項

• 対応する形式と一致しない形式指定は16進数形式になります。また、複数の結果について、重複しないことや特定の順序になることは前提にできません。

よくある間違い

• 生成数に0や50を超える値を入れると、指定した数のまま出力されないことがあります。1から50の範囲で入力し、表示された色の数を確認してください。

よくある質問

何色まで一度に生成できますか？

生成数を省略すると1色です。指定した数は整数に変換された後、1から50の範囲に収められ、その値が出力数になります。

出力形式を指定しないとどうなりますか？

形式を指定しない場合は16進数です。RGBまたはHSLを選ぶと、それぞれ対応する表記で出力されます。

RGBとHSLの結果はどのような形ですか？

RGBでは各成分が0から255までの整数になります。HSLでは色相、彩度、明度が整数で示され、彩度と明度にはパーセント記号が付きます。