カラージェネレーター
パレットシステム // v1.0
範囲：1-10
入力待機中...
ランダムカラージェネレーターとは？
ランダムカラージェネレーターは、画面が表示できる無数の色から、色（または整ったパレット）を選び、すぐ使える数値で渡すツールです。RandomHub は 1 クリックで 1〜10 色を返し、5 種類の配色ルール（モノクロマチック・アナロガス・コンプリメンタリー・トライアド・テトラード、加えて完全ランダム）を適用、さらにトーン（パステル／ビビッド／ミュート／ダーク／ライト／指定なし）で寄せます。各色は HEX・RGB・HSL を揃えて出力するので、Figma にもコードにもそのまま貼れます。生成は HSL の数式でブラウザ内で完結 — 登録不要、データ送信なし、ログなし。配色案を量で見たいデザイナーや、限られた時間でムードを探りたい現場のための、ノイズの少ない選択肢として作っています。
誰向けのツールか
UI／プロダクトデザイナー
ステークホルダーレビュー前のムード探索で、いつもの 6 色ブランドカラーから抜け出すとき。瞑想アプリならパステル＋アナロガス、子ども向けならビビッド＋トライアド、開発者ツールならダーク＋テトラード。
ブランドデザイナー
ブランドスプリントの広域探索フェーズで、コンプリメンタリーやテトラードの組み合わせを大量に流し見する。「結局ネイビーに戻ってくる」を打破する用途。
フロントエンドエンジニア
CSS デモや Tailwind config に三色のプレースホルダーが必要なとき。1 クリックで HEX を取得、Figma を開かずに前進できる。
イラストレーター／デジタル絵師
色数を絞った練習用の限定パレットを生成。ミュート寄りのアナロガス 5 色は、色相差ではなく明度差で構図を組ませてくれる。
データビジュアライザー
トライアドやテトラードはカテゴリエンコーディング向けに数学的に距離のとれた色相を返す。トーンは強調レイヤーをビビッド、コンテキストレイヤーをミュートにといった重ね方ができる。
デザインの学生・教員
配色ルールを実際に動かして見る。トライアド、テトラード、モノクロマチックを順に出してみると、同じベース色相でも印象がどれだけ変わるかが伝わる。
このカラージェネレーターを選ぶ理由
実在する 5 つのハーモニールール
「衝突しない 5 色をテキトーに」ではない。モノクロマチック・アナロガス・コンプリメンタリー・トライアド・テトラードを、実際にデザイン教育で扱われる計算でベース色相から導く。
ブリーフに馴染むトーンプリセット
ウェルネスや教育にはパステル、スポーツや若年層にはビビッド、エディトリアルやファイナンスにはミュート、テックや高級ラインにはダーク、ヘルスケアや SaaS にはライト。気分を選べば、その近所の色が出る。
HEX・RGB・HSL を同時に
各行に 3 形式分のコピーボタン。CSS で彩度を 10 % 上げたいときは HSL、デザイナーに渡すときは HEX、コードに埋めるなら RGB。色の行き先で形式を選ぶ。
ブラウザだけで完結、ログなし
ページ内の HSL 計算で生成。パレット保存も、メール収集も、有料プランもなし。誰が来ても同じ画面。
よくある使い方と例
ウェルネスアプリのムードボード
瞑想アプリのパレットを探す場面。鋭い色は世界観に合わない。アナロガス＋パステルで 5 色引くと、互いに溶け合う淡いグリーンとブルーが揃う。
設定：5 色／アナロガス／パステル。例：#C8E1D2、#B6D8C7、#A4CFBC、#92C6B1、#80BDA6。低彩度のグリーン群を 1 分以内に Figma フレームに流せる。
エナジードリンクのリブランド探索
ブランドスプリント 3 週目で赤×黄から抜け出せない。トライアド＋ビビッドで 4 色引いて、別の領域に強制的に振る。
設定：4 色／トライアド／ビビッド。120° 間隔の 3 色を高彩度で配置すると、赤×黄の周辺から離脱して、マゼンタ・シアン・アンバーといった候補が出る。
Tailwind CSS のプロト
ライトモードのデモページ用にアクセントカラーが要る場面。低彩度・高明度の 3 色を生成して HEX を config に貼れば、ページはすぐデモ可能になる。
設定：3 色／ランダム／ライト。出力例：#E8DCD0、#D4E0DD、#DCD8E8。tailwind.config に accent-50・accent-100・accent-200 として入れて完了。
色数制限のある絵の練習
画家やイラストレーターは、強制的な制約があるほど伸びる。ミュート 5 色を引いて、同じ静物をその色だけで描いてみる。
設定：5 色／ランダム／ミュート。各色が彩度 30 % 前後・中明度 — くすんで揃った組で、色相ではなく明度で画面を組む練習になる。
使い方
- 1.
個数を決める
1〜10 から選ぶ。5 が手堅い既定値 — 構図に必要な多様性は出るし、頭にも残る。
- 2.
ハーモニーを選ぶ
探索ならランダム、近さが欲しいならアナロガス、コントラスト重視ならコンプリメンタリー、カテゴリ用にトライアドかテトラード、明度の習作にはモノクロマチック。
- 3.
トーンを選ぶ
パステル、ビビッド、ミュート、ダーク、ライト、または「指定なし」。プリセットは彩度と明度の幅を絞り、パレットを特定の気分に着地させる。
- 4.
生成してコピー
生成ボタン、または Enter。各色は HEX・RGB・HSL ごとにコピーボタンを持つ。「すべてコピー」で複数行のテキストとして取得 — Figma、コード、メモへ貼るのに向く。
よくある質問
パレットは本当にランダム？固定リストから引いている？
本当のランダムです。パレットごとに 0〜360° のベース色相を引き、ハーモニールールを適用したうえで、選んだトーンの彩度・明度範囲からサンプリングします。同じ設定でも実行ごとに別の結果が返ります — 構造は同じ、具体値は違うという挙動です。
5 つのハーモニールールはどう違う？
モノクロマチックは 1 色相を明度違いで使います。アナロガスは色相環の隣（およそ ±25°）。コンプリメンタリーは 180° 反対側。トライアドは 120° 等間隔の 3 色。テトラードは 90° 等間隔の 4 色。同じベース色相からでも印象は別物になります。
トーンプリセットは技術的にどう動く？
各プリセットは彩度（S）と明度（L）を絞り込みます。パステル：S 25〜55 %、L 78〜92 %。ビビッド：S 85〜100 %、L 42〜58 %。ミュート：S 15〜40 %、L 40〜60 %。ダーク：S 40〜95 %、L 12〜32 %。ライト：S 30〜70 %、L 70〜88 %。
気に入ったパレットを保存したり共有できる？
「すべてコピー」で HEX · RGB · HSL を行ごとのプレーンテキストとして取得できます。Figma、メモアプリ、ドキュメント、Slack へそのまま貼れます。アカウント保存はあえて持っていません — 何もブラウザの外に出さない設計です。
なぜ HEX と RGB に加えて HSL も？
HSL は色相・彩度・明度が独立した 3 値なので、CSS やデザインツールで「彩度を 10 % 上げる」「色相を 30° 暖色に振る」が一番楽な形式です。HEX は引き渡し用に短く、RGB は画面が実際に描く形に近い表現です。
生成したパレットを商用に使える？
使えます。色の値そのものに著作権はありません。商用プロジェクト、ブランド資産、有償案件、販売する製品にも、表示なしで自由に使えます。
Coolors や Adobe Color と比べてどう？
Coolors や Adobe Color はライブラリ保存、グラデーション生成、画像からの抽出、コミュニティ共有まで揃った成熟サービスです。RandomHub はやることをひとつに絞っています — ルールベースのランダムパレットを HEX / RGB / HSL 付きで素早く返すこと。登録なし、ライブラリなし、追加プランもなし。
なぜ最大 10 色？
7〜8 色を超えると多くのハーモニールールは互いに似た結果を返し始めます — 目がパレットとして区別できなくなる領域です。10 はそこを超えない範囲で十分広い上限という判断です。
デザインにおけるランダムパレットについて
デザイナーは、創造の入力としてのランダム性を、この職能ができた頃から使ってきました。バウハウスの「3 色を並べて、なんとか成立させろ」という課題は、要するに同じ仕組みです — 制約と意外性が、最初の反射の先へ脳を押し出す。スクリーンになって変わったのは、ハーモニールールが瞬時に計算できる点です。1965 年に Munsell 環で 30 分かかったトライアドは、2026 年には 1 クリックで返ってきます。その速度こそが本質です。最初に出たパレットがそのまま納品されることはほぼなく、価値は 5 分で 20 個流して、どれが効くかを見つける反復のなかにあります。RandomHub は 3 つの判断に絞っています — ハーモニールールは「色 5 個適当に」ではなく実際の色彩理論に根を張る、トーンは抽象的なカテゴリではなく現場のブリーフに対応する、HEX / RGB / HSL は同時に出して手作業の変換を要求しない。必要なルールやトーンが見当たらないなら、それは合図 — お知らせください。
関連ランダムツール
関連ランダムツール
授業、ゲーム、企画、文章作成、日常の判断に使える関連ツールです。