真っ白な画面の前で色選びに迷ったとき
Webサイトやスライド資料、イラストの配色を考え始めると、何百万色もの中から無難な青やグレーばかり選んで手が止まってしまうことがあります。ランダム配色ジェネレーターは、そうしたマンネリを打ち破るためのカラーパレットスタジオです。Spaceキーを何度か押してピンときた色だけをロックし、残りの色を自動で組み替えていくうちに、自分では思いつかなかった新鮮な配色が自然に見つかります。
配色ハーモニーモードのやさしい解説
完全ランダムは思いがけない発見に最適ですが、ハーモニーモードを使うと最初から統一感のある配色を作りやすくなります。
| モード | 色のつながり方 | おすすめの用途 |
|---|---|---|
| ランダム | 色相も明るさも自由に生成します。 | アイデア出し、ポップなイラスト、固定観念を外したいとき。 |
| 類似色 | 色相環で隣り合う近い色を集めます。 | 落ち着いたWebデザイン、自然なグラデーション、プレゼン資料。 |
| 補色 | 反対側にある対照的な色を組み合わせます。 | 目立つボタン、ポスター、スポーツ系の力強い配色。 |
| トライアド（3色） | 色相環で正三角形を作る3色を基調にします。 | バランスと華やかさを両立したブランドカラー。 |
| モノクローム | 同じ色相のまま明るさ・濃淡だけを変えます。 | ミニマルなUI、管理画面、見やすいグラフ配色。 |
左上の「W 5.4:1」「B 11.2:1」は何の数字？
各カラー柱の左上に出ている小さなバッジは、その背景色の上に文字を載せたときの読みやすさ（コントラスト比）を示しています。W は白文字、B は黒文字の方がくっきり見えるという意味です。普段使いの目安として次の基準だけ覚えておくと失敗しません。
- 4.5:1 以上： 小さな本文やラベル文字もくっきり読める安心ライン。
- 3.0:1 〜 4.4:1： 大きな見出しやアイコン、太字ボタンには十分使えます。
- 3.0:1 未満： 装飾背景やカード枠向き。上に文字を載せる場合は白黒の別パネルを挟むと安心です。
5分で理想のパレットを作る実践ワークフロー
- 用途に合わせて色数を選びます（ロゴ向けなら3色、サイトやUI設計なら5〜6色が目安です）。
- ピンとくる色に出会うまでSpaceキーを何度か押し、ベースにしたい1色が見つかったら鍵アイコンでロックします。
- 配色ルールを類似色・トライアド・ランダムと切り替えながらSpaceキーを押すと、ロックした色を基準に残りの色だけが再生成されます。
- 気に入った組み合わせができたらHEXコードをクリックして個別コピーするか、CSS変数をコピーで
:root定義をまとめて取得します。
失敗しない「60-30-10」の配色バランス
5色のパレットを作っても、すべてを均等に塗ると画面がうるさく見えます。迷ったらメインの背景色に60%、補助色に30%、一番鮮やかなアクセント色に10%という比率を意識してみてください。個性の強いランダム配色でも、主役を1色に絞るだけで一気にプロっぽく整います。
よくある質問（FAQ）
気に入った1色だけ残して、他の色だけ変えることはできますか？
はい。各色の下にある南京錠アイコンをクリックしてロックした状態でSpaceキー（または生成ボタン）を押すと、ロックしていない列だけが新しくなります。
HEXコードを1クリックでコピーできますか？
各色の下部に表示されている #FF4800 などのHEX文字をクリックすると、そのままクリップボードへコピーされます。
Web制作でまとめてコードに取り込めますか？
上部の「CSS変数をコピー」を押すと、:root { --color-1: ... } の形式で全色まとめてコピーできます。
資料やサイトには何色くらいのパレットがちょうどよいですか？
一般的なスライドやWebページでは、メイン1色・サブ1色・アクセント1色＋白黒グレー系の「3〜5色」に絞るのが最も見やすく整理されます。