モックアップ、グラフ、あるいは白紙のキャンバスに使う色が必要で、いつもの癖で選ぶのを避けたいと思いませんか？この無料のランダムカラー生成器は、画面に表示可能な完全な24-bitの範囲から色を抽出し、それぞれの色見本をコードの横に表示します。「個数」で1から50までの希望する数量を選択し、必要な形式にチェックを入れて「生成」を押してください。ページを開いた時点ではHEX形式の1色が用意されているため、ワンクリックですぐに最初の結果が得られます。初期状態では「HEXコード」にチェックが入っており、その横に「RGBコード」と「HSLコード」が並び、3つの任意の組み合わせを同時に有効化できます。「生成」の横にある歯車ボタンを押すと「詳細オプション」が開き、色を特定の系統や範囲に絞り込んだり、重複を排除したり、HEXの表記方法を変更したりできます。
すべての色は、Math.random()のような疑似乱数関数ではなく、システムの乱数源から暗号学的に安全なランダムバイトを提供するWeb Crypto API (crypto.getRandomValues)を介してブラウザ内で生成されます。画面上の色は赤・緑・青の3つのチャンネルで構成され、それぞれが0から255までの整数であり、1つのランダムバイトが取り得る値はちょうど256通りです。そのため各チャンネルは余剰演算などの加工を挟まない純粋な1バイトであり、変換処理によって特定の色合いが偏ることはありません。これにより、「生成」を押すたびに、このページが生成可能な16,777,216色すべてが完全に等しい確率で選ばれます。「詳細オプション」で範囲を狭めた場合でもこの原則は守られます。色全体の中から抽出が行われ、範囲外のものは除外されるため、指定された範囲内のすべての色が同じ確率を持ちます。サーバーへのデータ送信やログの記録は一切行われず、ページが読み込まれた後はオフラインでも動作し続けます。
3つの形式は、同じ色を3通りの方法で表現します。「HEXコード」は、CSSや多くのデザインツールで使われる#0778ffのような六桁の形式です。先頭に#が付いた小文字で表記されますが、「詳細オプション」の「大文字」や「#なし」を使用することで、別の形式を求めるツールにも柔軟に対応できます。「RGBコード」はrgb(7, 120, 255)のように3つのチャンネルを個別に記述するため、各チャンネルを個別に処理するプログラムコードに適しています。「HSLコード」はhsl(213, 100%, 51%)のように色相・彩度・明度で色を表し、後から手動で色味を調整するのに最も扱いやすい形式です。3つの形式はいずれもスタイルシートに直接貼り付けることができます。ただし、精度は同一ではありません。HEXとRGBは正確ですが、HSLは四捨五入されています。このページでは色相、彩度、明度を整数として表記するため、約89%の色では丸められた数値から正確に元の色へ逆変換できません。たとえば#646503はhsl(61, 94%, 20%)と表示され、これを逆変換すると#616303になります。チャンネルごとの差異は最大でも5段階、通常は1または2にとどまり、画面上では目に見えませんが、HSL値を保存して元のHEX値に戻すことを期待する場合は無視できません。正確な色合いを保持したいときは、HEXまたはRGBで保存してください。
1色のみの場合は結果の中央に1つのカードとして表示され、複数の色を生成した場合は行ごとに番号付きリストとして並び、選択した形式と末尾の小さなコントラスト比バッジが横並びで表示されます。4色以上のリストは枠内でスクロール可能になり、隅にある矢印を押すと全体を展開して表示できます。この開閉状態は次回にも保持されます。コードをクリックするとそのコードだけがコピーされます。各行の末尾にあるコピー用ボタンを押すと、その色のすべての形式のコードが空白区切りで1行にまとめてコピーされます。色見本そのものをクリックするとブラウザ標準のカラーピッカーが開き、そこで別の色を選択すると、その行のすべてのコードとバッジが、有効な各形式で新しい色に合わせて書き換えられます。「すべてコピー」を押すと生成されたすべての色を1行に1色ずつクリップボードにコピーし、「ファイルに保存」を押すと同様のテキストをプレーンな.txtファイルとして保存できます。どちらもカラーピッカーで変更した色が反映されます。「履歴」にはこのブラウザで生成された直近10件の結果がそのまま保持され、「クリア」を押すと生成結果がリセットされます。「詳細オプション」を含む各種設定は次回の訪問時にも引き継がれます。
等しい確率で選ばれる色は、見た目にも均等に分布しているようには感じられないことがあり、その傾向を知っておくことで無駄に「生成」を押し続ける手間を省けます。色空間全体で測定すると、HSLの彩度が70%以上かつ明度が35%から65%の鮮やかで高彩度な色は約35%を占めます。彩度20%未満のグレーに近い色は約4%に過ぎず、明度20%未満の非常に暗い色や80%を超える非常に明るい色はそれぞれ約3%です。したがって、「すべての色」から10色を抽出すると、通常は力強い色合いが数多く含まれ、パステル調やチャコールグレーのような暗い無彩色系が現れることは稀です。特定の系統が必要な場合は、「カラータイプ」から選択してください。「ビビッド」はその鮮やかなグループのみを抽出し、「パステル」、「ダーク」、「ミュート」、「グレースケール」もそれぞれの特徴に応じた色を出力します。「カスタム」を選択すると、「色相」、「彩度」、「明度」の範囲を独自に設定でき、色相の範囲は0度をまたぐ設定（例えば330度から30度で赤系統を指定）も可能です。設定範囲は画面に表示されるHSLコードに基づいて検証されるため範囲外の色が出ることはなく、指定した「個数」に対して範囲内の色の数が少なすぎる場合は、重複を避けるために範囲を広げるよう通知が表示されます。重複の発生は稀ですが完全に排除されるわけではありません。確実に異なる色のみを得たい場合は「重複なし」にチェックを入れてください。これにチェックを入れない場合、全範囲から選んだ50色の中に同じ色が重複して出現する確率は約13,700分の1です。
ランダムな色は背景色として求められることがよくありますが、その際に色見本を見ただけでは判断できない問題が生じます。それは「その上でテキストが読めるかどうか」です。WebアクセシビリティのガイドラインであるWCAGでは、通常テキストに対して少なくとも4.5:1のコントラスト比を求めています。このツールが生成可能なすべての色を対象に測定した結果、黒文字は約65%の色でこの基準を満たし、白文字は約36%の色で基準を満たします。そして両方とも基準に満たない色は存在せず、より適した側の文字色は必ず少なくとも4.58:1以上のコントラスト比を確保できます。したがって、どのような背景色であっても黒か白のいずれかの文字色を選べば視認性の基準を満たすことができ、本ツールはその推奨される側を表示します。各色には推奨される文字色でAaと記され、その横にコントラスト比を示した小さなバッジが添えられます。コントラスト比の数値は切り捨て処理されているため過大評価されることはなく、ピッカーで色を変更した際にも即座に更新されます。このバッジは黒と白のテキストのみを対象としているため、ブランドカラーなど他のテキスト色を使用する場合はコントラストチェッカーで検証してください。
ランダムであることは、調和していることと同じではありません。一度に生成される各色は互いの関係性を考慮せずに独立して選ばれるため、この生成器がデザイナーの意図するような調和のとれた配色パレット（補色ペア、類似色の階調、統一された明度など）を自動構成することはありません。範囲を狭めてもこの基本ルールは変わらず、パステル調や青系統に限定した場合でも、各色は個別に選ばれるだけで相互の調和が保証されているわけではありません。しかし、それこそがこのツールの本質です。普段の自分なら決して選ばないような思いがけない色との出会いをもたらし、固定観念や発想の停滞を打破してくれます。偶発的に見つけた色を実用的なデザインに落とし込むには、気に入った1色を手元に残し、それを基準に他の色を導き出します。偶然全体が調和するまで何度も「生成」を押し続ける必要はありません。色相を維持したまま明度を段階的に調整して明るい色合いや暗い色合いを作ったり、色相を180度反転させて反対色を得たりしてください。「HSLコード」を使えば、こうした色展開を直感や勘に頼らず数値計算として正確に行えます。
このランダムカラー生成器が選ばれる理由
- Web Crypto APIを使用しブラウザ内で色を生成、外部サーバーへの通信なし
- 1チャンネルあたり1バイトの乱数により、全16,777,216色が完全に等確率
- 同一の色に対してHEX、RGB、HSLの各コードを自在な組み合わせで表示
- 一度に最大50色まで生成可能、それぞれに色見本とコントラスト比バッジを付属
- ビビッド、パステル、ダーク、ミュート、グレースケール、または自由な色相・彩度・明度の範囲指定
- 必要に応じた重複なしの抽出、HEX表記の大文字化や#なしへの切り替えに対応
- コードをクリックして即座にコピー、カラーピッカーによる柔軟な色調整
- すべてコピー、ファイルに保存、ブラウザ内に直近10件を保持する履歴機能
- 完全無料かつ無制限：アカウント登録不要、利用上限なし、サーバーへのデータ保存なし
ランダムな色は、正式なカラー設計が決まる前に暫定的な色が必要となるあらゆる場面で役立ちます。デザイナーは発想の行き詰まりを打破し、普段の配色パターンでは到底たどり着けない新たな出発点を見出すために活用します。開発者はモックアップ、プレースホルダー、アバターのダミー着色を行ったり、テーマが未定のグラフでデータ系列ごとに一時的な色を割り当てたり、想定外の背景色に対してUIの視認性が保たれるかをテストするために利用します。「すべての色」から50色を生成すれば、ほぼ確実に非常に暗い色や非常に明るい色が含まれ、「ダーク」や「パステル」を使えば明暗どちらかの端に検証を寄せられます。ジェネラティブアートの制作者やゲームの試作開発者は数値をそのままコードに組み込み、RGB形式は多くのグラフィックスライブラリにそのまま渡せます。教育の現場では、1つの色がカラーコード、3つのチャンネル、あるいは色相環上の位置としてどのように記述されるのか、そしてなぜHSL形式で四捨五入が生じるのかを説明するために3つの形式が並べて用いられます。さらに、リストの分類やタグ付け、色分け作業を行いたい人なら誰でも、頭を悩ませることなく明確に区別できる複数の色をすばやく手に入れられます。
ツールの性質を正しく理解していただくために、いくつかの明確な制約についても説明します。本ツールはランダム生成器であり、パレット作成ツールではありません。色の調和を自動生成したり、特定の色を固定したまま他の色だけを再生成したりする機能はなく、範囲を狭めた場合でも特定系統の色が揃うだけで、互いに調和するよう選ばれるわけではありません。コントラスト比バッジが比較するのは黒と白のテキストのみです。また、画面表示用のsRGBカラー（HEX、RGB、HSL）のみに対応しており、透明度の指定やCMYK、Pantone、OKLCH、CSSのカラーネームには対応していません。印刷用途の場合は画面上のコードを過信せず、印刷用のカラーマネジメント工程で色合わせを行ってください。ディスプレイごとのキャリブレーションの違いにより、同じコードであっても画面によってわずかに見え方が異なる場合があります。上述の通りHSL値には四捨五入による丸めが含まれ、「重複なし」にチェックを入れていない場合は重複チェックは行われません。このツールが確実に保証しているのは極めて厳密な一点です。全16,777,216色、あるいは設定した範囲内のすべての色が、ボタンを押すたびに完全に同等の確率でブラウザの暗号学的乱数源から選ばれ、外部へ送信されることは決してないということです。