HEX・RGBカラーをランダムに生成するパレットジェネレーター
色数を選んで新しいパレットを生成すると、HEX・RGB値をカードからそのままコピーできます。
まだパレットがありません。
ボタンまたはSpaceキーで始めましょう。
履歴 (0/50)
クイックガイド
- 生成ボタンまたはSpaceキー
- 色をコピーカードをクリックまたはEnter
- 共有現在のURLに色が含まれます
- 保存ブラウザのローカル履歴
すぐ使える形で。
- すぐ見える画面入力場所と結果の場所をはっきり分けます。
- 結果を先に大事な数字を先に出し、過程は必要な分だけ見せます。
- 求めるものを減らす登録や余計な入力なしで使えるようにします。
ランダムパレットガイド
ランダムパレットジェネレーターは、指定した色数ぶんの独立した乱数RGBで新しいパレットを作ります。結果カードにはWebでそのまま使えるHEXコードとRGB値が並び、カードクリック・共有・URLコピー・履歴機能で今作った組み合わせをあとから確認できます。
このツールは特定の配色理論を適用しません。各色は赤・緑・青チャンネルを独立した乱数値で決めたあと、HEXとRGB表記に変換して表示します。
カラーパレットとランダム生成の役割
カラーパレットはひとつのプロジェクトでまとめて使う色の集合です。デザインシステムでは主色・補助色・背景・アクセントを決めておき、画面全体の視覚トーンを一定に保ちます。パレットを定めずに作業すると画面ごとに色がばらつき、全体を揃える手間が後から増えます。
ランダム生成は予測できない組み合わせを意図的に提示します。色相環の規則だけで選ぶと慣れた範囲に留まりやすいですが、乱数の組み合わせは普段検討しない色を画面に載せます。アイデアの初期段階や雰囲気を探る場面で、幅広い刺激が必要なときに向いています。
- パレットはプロジェクトの視覚トーンをまとめる色の集合
- ランダムな組み合わせは慣れた選択を超える出発点
- 初期段階で色の感覚を広げるのに適している
- 最終決定の前に明度・彩度の調整が必要
HEX形式：#RRGGBBが表すもの
HEXカラーコードは6桁の16進数の前に#を付けた表記です。最初の2桁が赤、中央の2桁が緑、最後の2桁が青チャンネルの強さを00からFFで表します。たとえば#FF0000は赤が最大、緑と青が0なので純粋な赤色です。
16進数の1桁は0–9とA–Fを合わせて16通りの値を持ちます。2桁で1チャンネルなので16×16 = 256段階になります。3チャンネルの組み合わせで約1677万色を表現でき、CSS・HTML・デザインソフトのどこでも同じ解釈で読めます。
- #RRGGBBの各2桁が1チャンネル
- 00はそのチャンネルがオフ、FFが最大
- 1チャンネル256段階、合計約1677万色
- CSS・HTML・Figmaなどで同一解釈
RGB形式：赤・緑・青0–255とHEX変換
RGBは光の三原色である赤(Red)・緑(Green)・青(Blue)を0から255の10進数で表します。rgb(255, 0, 0)はHEXの#FF0000と同じで、rgb(0, 128, 255)は#0080FFと同じです。HEXが16進数1行で書くのに対し、RGBは3つの数値をカンマで区切ります。
変換は単純です。HEXの各2桁を10進数に直すとRGB値になります。FFは255、80は128、00は0です。このツールでは両方の表記を同時に表示するので、手動で計算する必要はありません。
- RGBは各チャンネルを0–255の10進数で表記
- HEXの2桁を10進数にするとRGB値
- FF = 255、80 = 128、00 = 0
- このツールはHEXとRGBを同時に表示
画面の使い方：生成からコードコピーまで
上部のドロップダウンで希望の色数を選びます。初期値は5で、3から15まで指定できます。隣の「パレット生成」ボタンを押すと、選んだ数だけ色カードが即座に表示されます。キーボードユーザーはSpaceキーでも同じ操作を実行できます。
各カードには色のプレビュー領域とHEXコード、RGB値が表示されます。カードをクリックするとHEXコードがクリップボードにコピーされ、画面下部に「コピーしました」の通知が現れます。気に入った結果は共有ボタンやURLコピーで他の人に送れます。
- ドロップダウンで色数を選択（3–15、初期値5）
- ボタンまたはSpaceキーでパレット生成
- カードクリックでHEXコードをクリップボードにコピー
- 共有・URLコピーでパレットを送信
色数の選び方：3色と15色の違い
3–5色のパレットは主色と補助色だけを手早く決めたいときに向いています。Webページの基本トーンやアイコンの配色を決めるなら、この範囲で十分です。数が少ないと一覧で比較しやすく、判断が速くなります。
10色以上はダッシュボードやデータ可視化、イラストなど区分の多い場面の出発点になります。ただし色が増えるほど似たトーンが出る確率も上がるため、生成後に重複を取り除いたり明度を調整する工程がふつう入ります。
- 3–5色：基本カラートーンの決定に適切
- 6–9色：中規模UIやスライド構成
- 10–15色：データ可視化・多色イラスト
- 色が増えるほど重複確認と後処理が必要
カラーコードのコピーと貼り付け
カードのどこをクリックしても、その色のHEXコードがシステムクリップボードにコピーされます。キーボード操作ではカードにフォーカスしてEnterを押すと同じ動作です。コピー直後にトーストメッセージが出るので、どの色をコピーしたか確認できます。
コピーしたコードはCSSのcolorやbackgroundプロパティ、Figmaの色入力フィールド、PowerPointのカスタムカラーダイアログにそのまま貼り付けられます。RGB値が必要な場合はカードに並んでいる数値を直接入力します。変換計算は不要です。
- カードクリックまたはEnterでHEXコピー
- トースト通知でコピー状態を確認
- CSS・Figma・PowerPointにそのまま貼り付け
- RGB値はカードから読んで入力
URL共有：アドレスに色が含まれる仕組み
パレットを生成すると現在の色の組み合わせがURLパラメータに自動で反映されます。このURLをメッセンジャーやメールで送ると、受け取った人は同じパレットをすぐ見られます。ユーザー登録も保存サーバーも必要なく、アドレス自体がパレットを持っています。
URLコピーボタンを押すと現在のアドレスがクリップボードにコピーされます。共有ボタンはブラウザがWeb Share APIに対応している環境でシステム共有シートを開きます。デスクトップブラウザなどWeb Shareがない場合はURLコピーに切り替わります。
- 色コードがURLパラメータに含まれる
- リンクだけで同じパレットを再現可能
- URLコピー：クリップボードにアドレスをコピー
- 共有ボタン：Web Share API対応時にシステム共有シート
履歴：ブラウザに保存されるパレット記録
生成したパレットはブラウザのlocalStorageに自動保存されます。ページをリロードしたりブラウザを閉じて開き直しても以前の記録が残ります。最大50件まで蓄積され、50件を超えると最も古い記録が自動で消えます。
履歴エリアで以前のパレットカードをクリックするとその組み合わせが再表示されます。すべて削除ボタンは全記録を一括で消去します。localStorageはブラウザとデバイスに紐づくため、別のブラウザや別のデバイスでは履歴が共有されません。
- localStorageに自動保存、リロード後も維持
- 最大50件、超過で古い記録を自動削除
- 履歴カードのクリックでパレットを再表示
- ブラウザ・デバイス間では共有されない
ランダム生成と配色理論の違い
このツールは各色をR・G・B 3チャンネルの独立した乱数で生成します。補色・類似色・トライアドなど色相環の関係を計算しないため、結果が視覚的に調和する保証はありません。調和のとれた配色が目的なら配色理論ベースのツールが適しています。
一方、配色理論に縛られない点が利点になることもあります。まったく予測できない組み合わせは新しい方向を示す場合があり、そこから1–2色を拾って明度や彩度を微調整すると、規則の中だけで選ぶより視野が広がります。探索段階でランダム、確定段階で配色理論という二段階アプローチもよく使われます。
- 各チャンネル独立乱数なので色相環の関係なし
- 補色・類似色が必要なら別ツールを使用
- 予測不能な組み合わせから新方向を発見できる
- 探索後に配色理論ツールで仕上げる二段階アプローチ推奨
色のアクセシビリティ：コントラストと色覚特性
WCAG 2.2は通常テキストに最低4.5 : 1、大きいテキストに3 : 1の明度コントラストを推奨しています。ランダムに選んだ色を背景とテキストにそのまま使うとコントラスト不足で読みにくい組み合わせになり得ます。生成後にコントラストチェッカーで確認する工程を省かないでください。
色覚特性のあるユーザーにとって赤緑の区別がつかない組み合わせは情報伝達の妨げになります。パレットを決める前に色覚シミュレーターを試すと色だけに依存しないデザインを計画できます。色と一緒にアイコン・パターン・ラベルを併用するとアクセシビリティが向上します。
- WCAG 2.2コントラスト基準：通常テキスト4.5 : 1、大テキスト3 : 1
- ランダム色はコントラスト不足の可能性あり
- 色覚シミュレーターでの事前確認を推奨
- 色以外にアイコン・パターン・ラベルを併用
活用場面：Webデザイン・プレゼン・アイデア出し
Webデザインの初期段階でブランドカラーが未定のとき、ランダムパレットを回して雰囲気を探れます。気に入った組み合わせが出たらHEXコードをCSS変数に入れて画面に当て、微調整を経て確定します。プロトタイプ段階で色の決定時間を短縮できます。
プレゼンスライドのチャート色や区切り線の色選びにも使えます。ゲームデザインでキャラクター・背景パレットを試したり、イラスト作業でムードボード用の色を集めるときの出発点にもなります。最終成果物ではコントラストと調和の確認をお忘れなく。
- Webデザイン：CSS変数にHEXコードをすぐ適用
- プレゼンテーション：チャート・区切り線の色選択
- ゲーム・イラスト：キャラクター・背景パレットの実験
- 最終成果物では必ずコントラストと調和を確認
よくある質問
Q生成できる色数の範囲は？
3色から15色まで選べます。3色は主な色だけ素早く決めたいとき、15色は多色構成が必要な場面に向いています。
Qカードをクリックすると何がコピーされますか？
その色の6桁HEXコード（例：#3A7BFC）がシステムクリップボードにコピーされます。CSSやデザインツールにそのまま貼り付けられます。
QURLを共有すると相手も同じパレットを見られますか？
はい。色情報がURLパラメータに含まれているため、リンクを開けば同じパレットが再現されます。
Q履歴は別のデバイスでも見られますか？
いいえ。履歴はブラウザのlocalStorageに保存されるため、同じブラウザ・同じデバイスでのみ維持されます。
Q生成された色が互いに合わないように見えます。
このツールは各チャンネルを独立乱数で生成し、配色理論の調和を適用しません。補色や類似色が必要なら色相環ベースのツールを併用してください。
QWCAGコントラスト基準を自動チェックしますか？
現時点では自動コントラストチェック機能はありません。パレット確定後に別途コントラストチェッカーで確認してください。
QSpaceキーはどんな機能ですか？
ページにキーボードフォーカスがあるときSpaceキーを押すと新しいパレットが生成されます。マウスを使わず連続でパレットを見るのに便利です。
参考資料
2026-08-19確認。色コードの定義と表記はW3C仕様に準拠しています。