デザインをしていて「この色に合う色って何だろう？」と迷ったことはありませんか？
補色・類似色・トライアドといった配色理論は知っていても、実際に計算するのは手間がかかります。このページのツールなら、基準色を1色選ぶだけで4種類のカラーパレットが瞬時に生成されます。
各色のHEXコードをタップ1回でコピーでき、デザインツールやCSSにそのまま貼り付けられます。計算はすべてブラウザ内で完結し、外部への送信・保存は一切しません。
配色パレットジェネレーター
使い方（3ステップ）
① 基準色を選ぶ
カラーピッカー（四角いカラーボタン）をタップして色を選ぶか、HEXコード（例：#3b82f6）を直接テキスト欄に入力します。3桁のHEX（例：#fff）にも対応しています。
② パレットを確認する
入力した瞬間に、4種類のパレット（補色・類似色・トライアド・明度階調）が自動で表示されます。
③ HEXをコピーする
使いたい色のスウォッチ（色見本）をタップ・クリックすると、HEXコードがクリップボードにコピーされます。コピーされるとツール下部に確認メッセージが表示されます。
4種類の配色パターンの意味と使い分け
このツールが生成する4種類のパレットは、それぞれ色彩理論に基づいています。「なぜこの色が合うのか」を理解すると、配色の選択に迷わなくなります。
補色（コンプリメンタリー）
色相環で正反対（180°）に位置する2色の組み合わせです。コントラストが最大になるため、見る人の目を引きつける力があります。
使い場面： CTAボタン・ロゴ・バナー広告など、目立たせたい要素に。赤と緑、青とオレンジなど、スポーツチームのユニフォームや国旗の配色にも自然に使われています。
注意点： 鮮やかな補色をそのまま大面積で並べると「ハレーション（目がちらつく現象）」が起きやすくなります。どちらかを明度・彩度で調整すると使いやすくなります。
類似色（アナロガス）
色相環で隣り合う色（基準色から±30°）の3色の組み合わせです。色同士が近いため、穏やかで統一感のある印象を与えます。
使い場面： 背景と文字・テキスト周辺のUI・ナチュラル系・温かみのあるデザインに。自然界の色（木・葉・夕焼けなど）も類似色の組み合わせが多く、馴染みのある印象になります。
注意点： 単独で使うとメリハリが薄くなりがちです。アクセントカラーとして補色を1点だけ加えると引き締まります。
トライアド
色相環を3等分した位置の3色（基準色から+120°、+240°）の組み合わせです。バランスよく鮮やかで、活気のある印象になります。
使い場面： チラシ・ポスター・ゲームUI・子ども向けコンテンツなど、エネルギッシュで個性的なデザインに。3色が均等に主張するため、どれかを「主役」として大きく使い、残りを「脇役」に絞るとまとまりが出ます。
代表例： 赤・黄・青（絵の具の三原色）、紫・オレンジ・緑（秋っぽいデザインに頻出）
明度階調（モノクロマティック）
同じ色相・彩度のまま、明度だけを5段階に変えたパレット（明→暗）です。色の数が多い分、カードのシャドウ・ホバー状態・グラデーションなど細かなトーン調整に活用できます。
使い場面： ウェブサイトの背景・ボーダー・ホバー色・グラデーション・グラフの段階表現に。同じ色系統でまとめるため、どのカラーを選んでもテイストがブレません。
注意点： 明度が近い色を隣に置くと区別がつきにくくなります。アクセシビリティ（WCAG）に配慮する場合は、コントラスト比をカラーコード変換ツールで確認することをおすすめします。
配色を活用できるシーン
- Webサイト・LP： ヘッダーの背景色と文字色の組み合わせ決め
- プレゼン資料： スライドのアクセントカラーとベースカラーの選定
- SNS投稿画像： インスタグラムのフィードカラーの統一
- ロゴ・アイコン設計： ブランドカラーの拡張パレット作成
- 印刷物（チラシ・ポスター）： 印刷で映える補色・トライアドの選定
- UI/UXデザイン： ボタン・リンク・警告色などの状態管理
色の心理効果も考慮しよう
配色を選ぶとき、見た目の調和だけでなく色が人に与える心理的印象も重要です。たとえば赤は「情熱・緊急性」、青は「信頼・冷静」、緑は「自然・安らぎ」といった印象を与えます。
色の心理効果まとめでは、13色それぞれの心理効果と文化的意味を解説しています。配色の「合う・合わない」だけでなく「与えたい印象」から色を選びたいときに参考にしてみてください。
また、企業ロゴや有名ブランドが使っている配色の実例を知りたい場合は、企業のコーポレートカラー一覧で公式カラーコードをまとめています。
よくある質問
入力した色はどこかに送られますか？
いいえ。色の計算はすべてブラウザ内のJavaScriptで行います。入力した色情報が外部サーバーに送信されることはなく、データの保存・収集も一切しません。
RGB・HSLのコードも取得できますか？
このツールはHEXのみ表示・コピーに対応しています。HEX→RGB・HSL変換にはカラーコード変換ツールをご利用ください。
5色より多いパレットを作りたい場合は？
明度階調パレットが5色、類似色が3色、トライアドが3色です。これらを組み合わせて使うことで、最大11色のパレット候補が得られます。また、基準色を少し変えて再生成する方法も有効です。
スマートフォンでも使えますか？
はい。スマートフォン・タブレット・PCすべてに対応しています。
補色を使ったのに色がぶつかって見える場合は？
彩度が高い色同士を隣に並べると「ハレーション」が起きやすくなります。どちらかの色の明度を上げる（薄くする）か、白や灰色のセパレーターを間に挟むと解消できます。明度階調パレットで「淡い版」を選ぶのが手軽なひと工夫です。
まとめ
基準色を選ぶだけで補色・類似色・トライアド・明度階調の4種類のカラーパレットを自動生成するツールを紹介しました。各色のHEXをワンタップでコピーして、そのままデザインツールやCSSに貼り付けられます。
配色理論を知っていると、「なんとなくこの色が合う気がする」という感覚に根拠を持たせることができます。補色はコントラストと目立ち、類似色は統一感、トライアドは活気、明度階調は細やかなトーン調整、と使い分けるだけで完成度が上がります。
迷ったときはまず1色を決めてこのツールで展開してみてください。
