カラーパレット生成の使い方｜ベース色1つから配色を自動でつくる
公開日：2026年8月6日 対象ツール：カラーパレット生成
配色を決めるとき、色相環をにらみながら角度を計算するのは面倒です。カラーパレット生成は、主役にしたい色を1つ選ぶだけで、それと調和する色の組み合わせを自動で計算して並べるツールです。入力したHEXカラーを内部でHSL（色相・彩度・明度）に変換し、色相を回転させたり明度を変えたりして、代表的な6種類の配色をその場で作ります。ブラウザ内で完結するので、Webデザインやスライドの下地づくりを気軽に試せます。
このツールでできること
- 6種類の配色を同時生成：補色（コンプリメンタリ）、類似色（アナロガス）、トライアド、スプリットコンプリメンタリ、テトラード、モノクロマティックを一覧で表示します。
- HEXとカラーピッカーの両対応：色コード（例: #3B5BDB、3桁の #ABC も可）を打っても、ピッカーで選んでもかまいません。両者は連動し、どちらを変えても配色が即時に再生成されます。
- HEXとRGBの表示・コピー：各色の見本にHEXとRGB値を表示し、見本をクリックするとHEXがコピーされます。
使い方
- カラーピッカーで色を選ぶか、HEX欄に色コードを入力します。
- 入力と同時に、6種類の配色が自動で生成されて並びます。
- ピッカーとHEX欄は連動するので、どちらから変えてもすぐ反映されます。
- 気に入った色の見本をクリックすると、その色のHEXがクリップボードにコピーされます。
- コピーしたHEXを、デザインツールやCSSに貼り付けて使います。
こんなときに便利
まず主役の色（ブランドカラーやキービジュアルの色）が決まっていて、それに合わせるアクセント色や背景色の候補を探したいときに役立ちます。補色を見ればボタンなど目立たせたい要素の色が、モノクロマティックを見ればカードや見出しのトーン分けの候補が、すぐに手に入ります。
「なんとなく色がまとまらない」というときにも、類似色やスプリットコンプリメンタリを見比べると、統一感と変化のバランスを取りやすくなります。色相環の知識がなくても、理論に沿った候補から選ぶだけで済みます。
よくある質問
補色とトライアドは何が違いますか
補色は色相環で正反対（180°）にある2色の組み合わせで、コントラストが最も強く目を引きます。トライアドは色相環を120°ずつ3等分した3色で、鮮やかさとバランスを両立できます。強すぎず変化もつけたいときは、補色の両隣を使うスプリットコンプリメンタリが中間の選択肢になります。
モノクロマティックとは何ですか
同じ色相のまま明度（明るさ）だけを段階的に変えた濃淡の配色です。色みが揃っているため統一感が出しやすく、背景・カード・見出しのトーン分けに向いています。
生成した色はどう保存しますか
色の見本をクリックするとHEXがコピーされるので、そのままCSSやデザインツールに貼り付けてください。RGB値も見本に表示されます。
そのまま使えば見やすい配色になりますか
色同士は調和しますが、読みやすさは別問題です。特に文字色と背景色のコントラスト（WCAGでは通常の文字で4.5:1以上が目安）は必ず確認し、必要に応じて明度を調整してください。
配色はあくまで出発点の目安です。理論に沿った候補をこのツールでまとめて見比べ、そこからブランドの雰囲気や読みやすさに合わせて微調整していくと、色選びの手戻りを減らせます。