カラージェネレーター
パレットシステム // v1.0
範囲：1-10
入力待機中...
このツールでできること
RandomHub は一度に 1〜10 色を生成し、各スウォッチの HEX・RGB・HSL を表示します。6 種類の配色は、ランダム、モノクロマチック、アナロガス、コンプリメンタリー、トライアド、テトラードです。6 種類のトーンは、すべて、パステル、ビビッド、ミュート、ダーク、ライトです。配色は色相同士の関係を決め、トーンは彩度と明度の範囲を絞ります。同じ設定でも再生成するたびに別のパレットを抽選でき、設定を変えれば色空間の異なる領域を探せます。表示される色名は最も近い色を示す近似ラベルであり、厳密な色指定ではありません。実装や受け渡しでは数値を基準にしてください。
6 種類の配色
6 種類のトーン
3 形式をコピー
偏りを避ける整数抽選
ランダムカラージェネレーターとは？
RandomHub は一度に 1〜10 色を生成し、各スウォッチの HEX・RGB・HSL を表示します。6 種類の配色は、ランダム、モノクロマチック、アナロガス、コンプリメンタリー、トライアド、テトラードです。6 種類のトーンは、すべて、パステル、ビビッド、ミュート、ダーク、ライトです。配色は色相同士の関係を決め、トーンは彩度と明度の範囲を絞ります。同じ設定でも再生成するたびに別のパレットを抽選でき、設定を変えれば色空間の異なる領域を探せます。表示される色名は最も近い色を示す近似ラベルであり、厳密な色指定ではありません。実装や受け渡しでは数値を基準にしてください。
どんな人に役立つ？
プロダクト／ブランドデザイナー
コントラストやアクセシビリティ、ブランド適合性を詰める前に、方向性を広く探せます。
フロントエンド開発者
仮の配色を作り、正確な値を CSS、デザイントークン、プロトタイプへ移せます。
データ可視化チーム
離れた色相から始め、完成したグラフ上で視認性と意味を検証できます。
設定が実際に行うこと
6 種類の配色
ランダムは独立した色相を選びます。モノクロマチックは同じ色相、アナロガスは 80° の範囲、コンプリメンタリーは反対色、トライアドとテトラードは等間隔の 3 色相／4 色相を循環します。
6 種類のトーン
すべては彩度と明度を限定しません。パステル、ビビッド、ミュート、ダーク、ライトはそれぞれ異なる HSL 範囲を使います。
3 形式をコピー
各結果に HEX、RGB、HSL を表示します。個別の値も、パレット全体の複数行テキストもコピーできます。
偏りを避ける整数抽選
色相の選択には Web Crypto getRandomValues と rejection sampling を使い、Uint32 の範囲を単純な剰余で縮めたときの偏りを避けます。
実用的な出発点
UI の方向探索
アナロガス＋パステルを 5 色で試し、落ち着いた方向を作ってから文字コントラストを確認します。
設定：5 色・アナロガス・パステル。HEX を仮のトークンセットへコピーします。
力強いコンセプト
トライアド＋ビビッドを 3 色で試し、慣れたブランド色から探索を離します。
設定：3 色・トライアド・ビビッド。完成案ではなく、探索の方向として扱います。
グラフのカテゴリ
テトラードを初案にし、実際のグラフで視認性、色覚多様性、意味の順序を確認します。
設定：4 色・テトラード・すべて。色相差だけで判断しないことが重要です。
使い方
- 1.
色数を決める
1〜10 の整数を入力します。
- 2.
配色を選ぶ
色相の近さや離れ方に応じて 6 種類から選びます。
- 3.
トーンを選ぶ
すべて、またはパステル、ビビッド、ミュート、ダーク、ライトを選びます。
- 4.
生成してコピー
生成後、HEX、RGB、HSL、またはパレット全体をコピーします。
よくある質問
乱数はどこから来ますか？
Web Crypto getRandomValues を使います。整数範囲には rejection sampling を適用し、単純な剰余による分布の偏りを避けます。
配色ルールはどう計算されますか？
アナロガスは基準色相の −40°〜+40°（±40°）、コンプリメンタリーは 180° 差、トライアドは 120° 刻み、テトラードは 90° 刻みです。モノクロマチックは同じ色相で明度を変えます。
トーンは何を制限しますか？
パステル、ビビッド、ミュート、ダーク、ライトが彩度と明度の範囲を変えます。すべては全範囲を対象にします。
表示色名は正確な規格名ですか？
いいえ。RGB 距離で選んだ最も近い色名を表示用にローカライズした近似です。正確な値には HEX、RGB、HSL を使ってください。
なぜ 3 形式ありますか？
HEX は受け渡しに簡潔、RGB は画面のチャンネル値に対応し、HSL は色相・彩度・明度を個別に調整しやすい形式です。
配色ルールだけでアクセシビリティを満たせますか？
いいえ。色相関係だけでは文字コントラストや色覚多様性への対応は保証されません。最終画面で確認してください。
偶然の方向からデザイン判断へ
生成パレットは、完成度より選択肢の幅が重要な初期段階で力を発揮します。RandomHub は色数、配色、トーン、正確な数値、近似色名を明示します。配色ルールが示すのは色相の幾何学的な関係であり、どの色を本文、強調、警告、背景に割り当てるかまでは決めません。実際の画面やグラフで役割を割り当て、想定する文字サイズや操作状態ごとにコントラストと色覚多様性を確認してください。実装の基準には HEX、RGB、HSL を使い、色名は見分けるための補助として扱います。ブランド上の意味、印刷や端末での再現、視覚階層も最終的な利用文脈で評価する必要があります。候補は必要に応じて再生成できます。
使い方の目安
ランダムカラーをデザインに使うとき、どこまで任せてよいですか？
色を完全に任せるより、目的を決めてから使う方が失敗しにくいです。アクセント色を探す、カードの仮色を作る、配色の起点を得るなど、ランダム結果を「最終案」ではなく「検討の入口」として扱うのが向いています。
確認すること
HEXや色名をコピーして、デザインツールやCSSへ移せる。
明度と彩度を見て、背景色かアクセント色かを判断する。
ランダム結果は、ブランド色や可読性チェックと組み合わせる。
使い方の例
| 場面 | 結果 | 使い方 |
|---|---|---|
| UI | #EA580C に近いアクセント | ボタンや小さな強調だけに試す。 |
| 資料 | 淡い背景色 | 本文の可読性を見ながら薄く使う。 |
| 創作 | キャラクターのテーマ色 | 衣装、道具、カードの色に展開する。 |
向いている場面
初期探索
配色に迷ったとき、候補を出して比較するための起点になります。
仮デザイン
プロトタイプ、カード、ラベル、グラフの色を一時的に決められます。
よくある質問
ランダム色をそのまま本番に使えますか？
使える場合もありますが、背景とのコントラストとブランドとの相性は必ず確認してください。
何色も生成した方がいいですか？
最初は少数で十分です。候補を増やしすぎると、比較ではなく迷いが増えます。
関連ランダムツール
関連ランダムツール
授業、ゲーム、企画、文章作成、日常の判断に使える関連ツールです。