ランダムカラー生成とは？

HEX・RGB・HSLの各カラーコード付きでランダムな色を生成します。気に入った色をロックして残りだけ再生成し、ワンクリックでカラーコードをコピーできます。

スペースキー(または生成ボタン)を押すと、ページが新しい一列のランダムカラーに入れ替わり、それぞれに名前と HEX・RGB・HSL の値が一緒に表示されます。スライダーを動かせば、パレットはアクセント1色から最大8色まで自在です。スタイル切替をパステル/ビビッド/ダーク/アースに変えると、ランダムさをその雰囲気に寄せられます。ハーモニーで補色・類似色・トライアド・テトラードを選べば、色がバラバラではなく色彩理論で結びついた組になります。気に入った色は南京錠アイコンで固定し、残りを引き直すだけ。各コードはクリックでクリップボードに入り、パレット全体はプレーンテキストファイルか、共有しやすい PNG 画像としてダウンロードできます。 コードが欲しいときは、ワンタップで全体を :root の CSS カスタムプロパティとしてコピーでき、もうひとつのボタンで貼った先のどこでもこの配色をそのまま開けるリンクをコピーできます。各スウォッチの明暗バリエーション帯を開けば、明るい側 5 段・暗い側 5 段が手に入り、ホバー状態・ボーダー・淡い背景に使えます。

使い方

1. ほしい色数を決め（1〜8、初期値は5）、生成をクリックしてパレットを埋めます。
2. 残したい色をロックしてから再生成すると、ロックされていない色だけが新しく変わります。
3. カラーコード（HEX、RGB、HSL）をクリックすると、クリップボードにコピーされます。

使用するタイミング

• 白紙の Figma を前にして配色の方向性すら浮かばないとき、思考のスタックを外すのに。
• 副業プロジェクトやブレストドキュメント、子どもの工作活動のように、なんでもいいから色のお題が欲しいとき。
• バナー、SNS 投稿、ロック画面など使い切りグラフィックの HEX を、流行色記事を読まずさっと決めたいとき。

結果

ウェブデザイナーが新プロジェクトのアクセントカラーを探しています。何度かパレットを生成して #E8674A（温かみのあるコーラル）を見つけてロックし、それに合う補色を探し続けます。

よくある質問

色はどうやって選ばれているの?

標準のランダム+すべてモードでは、赤・緑・青の各チャンネルに 0〜255 の整数を新しく振っているので、約 1670 万通りの RGB から均等に出てきます。「綺麗な色」に寄せる調整は入っていません。スタイル(パステル・ビビッド・ダーク・アース)を選んだ場合は、その雰囲気の色相・彩度・明度レンジ内で乱数を振り直します。ハーモニーモードはランダムなベース色を 1 つ決め、残りを色相環上の色彩理論的なオフセットから求めます。

ランダムなのに、なぜ薄汚れた色が多く出るの?

RGB 立方体の体積の多くがニュートラルな中間域に集中しているため、均等乱数ではどうしてもくすんだ色が出やすくなります。一番手っ取り早いのはスタイル切替を「すべて」からビビッドかパステルに変えること。色相・彩度・明度の決まったレンジから取るので、くすんだ中間色がそもそも出てきません。鮮やかな色だけ固定して他を数回引き直す方法でも、コントラストの効いた 5 色がすぐ揃います。

気に入った色だけ残して他を引き直せますか?

可能です。スウォッチ上の鍵アイコンを押して固定し、「生成」を再度押してください。固定した色は変わらず、それ以外だけが入れ替わります。メインカラーを決めてからアクセントを探すのに最も速い方法です。

HEX・RGB・HSL の違いは?

HEX(#1A2B3C)は RGB を 16 進数で短く書いたもので、CSS やデザインツールで主流です。RGB(rgb(26,43,60))は 3 チャンネルを 10 進で書きます。HSL(hsl(210,40%,17%))は色相・彩度・明度で表現し、手動微調整が直感的です。

本当にランダム? それともシード付き?

ブラウザのタブ内で JavaScript の Math.random を使用しています。厳密には擬似乱数ですが、デザイン用途では真の乱数と見分けがつきません。ページを再読み込みすれば毎回まったく違う配色が出ます。

関連ツール