補色カラースキーム23選｜おすすめ配色パレットとHexコード一覧

補色配色は、色相環の反対側にある色同士を組み合わせ、瞬時にコントラスト・明快さ・視覚的エネルギーを生み出します。中立色とバランスよく使えば、読みやすさを損なうことなく、モダン・高級・遊び心・映画的な印象にもなります。

以下では、HEXコード付きで20種類以上の補色カラーパレット例、使い方のヒント、そしてMedia.ioでビジュアルを生成するためにコピーできるAIプロンプトを紹介します。

なぜ補色配色が効果的なのか

補色は色相環の反対側に位置するので高いコントラストを生み出します。そのコントラストによって、ボタンや見出し、オファータグなど重要な要素が素早く明確に際立ちます。

また、自然にビジュアル階層を構築できます。片方の色をベースに、補色をアクセントとして動きや強調を表現。ニュートラルカラーを加えれば、デザインは散らかった印象にならずにまとまります。

彩度を調節し暗・明のアンカーを加えることで、補色配色はUIや印刷、SNSレイアウトでも読みやすさを損なわず、コントラストが重視される小さなサイズでも視認性を保てます。

20種類以上の補色カラーパレットアイデア（HEXコード付き）

1）コーラルとティールのポップ

HEX： #ff6b6b #1fb6aa #0b2d39 #ffe3d6 #f7f7f2

雰囲気： 遊び心・エネルギッシュ・モダン

おすすめ用途： 夏のセール用ソーシャルメディア広告

コーラルの温かみとティールの爽やかさで、浜辺の市場の絵葉書のような遊び心あふれるエネルギーが感じられます。見出しは濃いネイビートーンでアクセントの鮮やかさを活かして読みやすく。補色配色にはやわらかいクリーム色のスペースを組み合わせると、視覚的な疲労を避けられ、ボタンも押しやすくなります。ヒント：コーラルを主要なCTA、ティールは補助の強調に使い、階層構造を明確に保ちましょう。

Media.ioで生成されたコーラルとティールのポップのイメージ例

Media.io

Media.ioはブラウザ上で動画・画像・音声を作成・編集できるオンラインAIスタジオです。

今すぐ無料で試す

2）サフランとインディゴスタジオ

HEX： #f4b400 #3f37c9 #111827 #f5f1e8 #9aa3b2

雰囲気：雰囲気：

おすすめ用途： デザインスタジオのブランドアイデンティティムードボード

ギャラリーのスポットライトのようなサフランが深いインディゴを際立たせ、自信あるスタジオの磨きが表れます。ロゴやタイポグラフィにはインディゴやほぼ黒をアンカーとして使い、サフランはバッジや重要な時に使いましょう。温かいオフホワイトが、賑やか過ぎない洗練された雰囲気を演出。ヒント：明るいイエローは小さな形だけに使うと、高級感が出て子供っぽくなりません。

Media.ioで生成されたサフランとインディゴスタジオのイメージ例

3）ミントとマゼンタグロー

HEX： #2dd4bf #d946ef #2b0f2f #fdf2f8 #0f766e

雰囲気：雰囲気：

おすすめ用途： シンプルな背景の音楽イベントポスター

ネオンミントとエレクトリックマゼンタのクラブライトコントラストが鮮やか。ベースには深いプラムを使うことで、ビビッドな色が意図的な印象に。淡いピンク背景でエッジを柔らかくしつつ、高いエネルギーを維持。ヒント：小さな文字はプラムやダークティールで、ネオンカラーは形やタイトル用に。

Media.ioで生成されたミントとマゼンタグローのイメージ例

4）ネイビーとタンジェリンコントラスト

HEX： #0b1f3b #ff7a18 #1f2937 #f3f4f6 #ffcf9a

雰囲気：雰囲気：

おすすめ用途： フィットネスアプリのランディングページヒーローセクション

スタジアムライトが深夜空に輝くような大胆でスポーティなミックス。ネイビーをキャンバスに、タンジェリンでアクション要素をリード。淡いグレーややわらかいアプリコットで余白やカードをクリーンに。ヒント：オレンジは主役ボタン1つだけに使い、フォーカルポイントの競合を避けましょう。

Media.ioで生成されたネイビーとタンジェリンコントラストのイメージ例

5）フォレストとローズウッド

HEX： #0f3d2e #b23a48 #f2e9e4 #3a2b2f #a7c4b5

雰囲気：雰囲気：

おすすめ用途： コーヒー製品パッケージラベルデザイン

森の散歩とローズウッドのスカーフのようなアース系ロマンチック。ラベルメインにはフォレストグリーン、ローズウッドはシールや産地スタンプ、焙煎コメントに。クリームやダスティセージで手作り感を演出し、重くなりすぎないように。ヒント：用紙やグレインなどのテクスチャで質感を追加し、インクの量を適度に保つと色味が豊か。

Media.ioで生成されたフォレストとローズウッドのイメージ例

6）プラムとシャルトリューズエッジ

HEX： #4b1d5a #b8f20a #121212 #f5f3ff #7c3aed

雰囲気：雰囲気：

おすすめ用途： シンプルな背景のアルバムカバーアートワーク

暗い部屋のレーザー光のように、プラムの影とシャルトリューズの閃光で尖ったエレクトリックな印象。ブラックと深いパープルをドミナントフィールドに、グリーンは意図したエネルギーとして制限して使う。淡いラベンダーはトラックリストや繊細なグラデーションに。ヒント：極端な2色の中間トーンを避け、シャープな先進的印象を保ちましょう。

Media.ioで生成されたプラムとシャルトリューズエッジのイメージ例

7）スカイとカッパーバランス

HEX： #7dd3fc #b45309 #0f172a #fff7ed #94a3b8

雰囲気：雰囲気：

おすすめ用途： SaaSダッシュボードUIとデータカード

空色は軽やかで、カッパーは建築に差す陽光のような温かみを加え、落ち着いた印象。チャートやテキストにダークスレートを使うとインターフェースがシャープでアクセスしやすく。カード面はクリーム色、カッパーは重要なハイライトや警告だけに限定。ヒント：データビジュアライゼーションはブルーグレー中心にし、カッパーは意味のある信号状態だけに。

Media.ioで生成されたスカイとカッパーバランスのイメージ例

8）アクアとクリムゾンエナジー

HEX： #06b6d4 #dc2626 #0b1320 #f8fafc #fecaca

雰囲気：雰囲気：

おすすめ用途： YouTubeサムネイルグラフィックレイアウト

都市の看板が点滅するような高電圧コントラストは即座に視線を引きつけます。アクアはメインの形状に、クリムゾンは一番目立たせたい要素だけに。背景はダークかほぼ白にし、色が喧嘩しないよう調整。ヒント：テキストは反対色でラインを付けると小さいサムネイルでも読みやすさが向上します。

Media.ioで生成されたアクアとクリムゾンエナジーのイメージ例

9）ラベンダーとレモンのやわらかさ

HEX： #a78bfa #fde047 #2e1065 #fffdf2 #e9d5ff

雰囲気：明るく、優しく、夢のような

おすすめ用途：ベビーシャワーの招待状デザイン

夢のようで陽気な、ラベンダーの霧が春の朝のようにレモンの太陽の光と出会います。見出しと境界線にはラベンダーを使用し、小さなアイコンまたは単一のリボン要素にはレモンを追加します。ソフトクリームは招待状を風通しがよく、印刷しやすく保ちます。ヒント: 薄い背景で読みやすいように、小さなテキストには濃い紫を選択してください。

media.ioを使って生成したラベンダーとレモンの柔らかさの画像例

10) 砂とコバルトの最小

HEX：#d6c7b2 #1d4ed8 #0f172a #fafaf9 #a8a29e

雰囲気：ミニマル、モダン、信頼できる

おすすめ用途：企業プレゼンテーションスライドテンプレート

ミニマルで自信に満ちたサンディニュートラルは、コバルトをシャープで意図的に感じさせます。スライドのベースにはオフホワイト、セクションには砂、チャートやキーナンバーにはコバルトを使用します。ダークネイビーは、タイトルを厳しく見せずに鮮明に保ちます。ヒント: アイコンを1つの色合いに保ち、最も重要なスライド要素にのみコバルトを表示させます。

media.ioを使って生成した砂とコバルトの最小限の画像例

11) オリーブとフクシア モダン

HEX：#556b2f #d9468f #1f2937 #f5f5f4 #cbd5a7

雰囲気：モダン、スタイリッシュ、少しレトロ

おすすめ用途：ファッションルックブック編集レイアウト

スタイリッシュで少しレトロな、オリーブは外観をグラウンドし、フクシアはランウェイドラマを追加します。大きなブロックとキャプションにオリーブを使用し、フクシアを引用符またはセクション ディバイダーにドロップします。温かみのあるオフホワイトは、印刷に優しく、目に優しいレイアウトを保ちます。ヒント: ボディ テキストを木炭に保ち、フクシアを予測可能な間隔で表示させると、意図的に感じられます。

media.ioを使用して生成されたオリーブとフクシアモダンの画像例

12) 炭と桃のリフト

HEX：#111827 #fb7185 #fbbf24 #fff7ed #6b7280

雰囲気：フレンドリー、温かく、プロフェッショナル

おすすめ用途：価格カード付きスタートアップホームページUI

フレンドリーな暖かさは、マットメタルの柔らかい光のように、深刻な木炭ベースを持ち上げます。これらの相補的な色の組み合わせは、桃がハイライトやバッジに保存されている場合、価格カードに適しています。クリームは空白を魅力的に保ち、グレーはセカンダリテキストを処理します。ヒント: 階層を混乱させないように、1 つの目立つプランにのみゴールデン アクセントを使用してください。

media.ioを使って生成した炭と桃のリフトの画像例

13) セルリアンとアプリコットの日光

HEX：#2563eb #fb923c #0f172a #f1f5f9 #93c5fd

雰囲気：楽観的、明確、エネルギッシュ

おすすめ用途：会議チラシのデザイン

楽観的な日光のコントラストは、澄んだ空と暖かい日の出を組み合わせたように感じます。セルリアンは構造とナビゲーションに優れていますが、アプリコットは日付、チケット、ハイライトを前進させます。明るいスレートトーンを使用して、密度の高い情報の周りに通気性のある間隔を空けます。ヒント: 印刷出力が一貫しているように、アプリコットをグラデーションではなくしっかりとした形状に保ちます。

media.ioを使って生成したセルリアンとアプリコットの昼光の画像例

14) 松と赤面の结婚式

HEX：#14532d #fda4af #fff7f3 #7c2d12 #86efac

雰囲気：ロマンチック、ナチュラル、エレガント

おすすめ用途：結婚式の招待状スイート

ロマンチックで自然な松の緑は、柔らかい赤面の花びらに対して常緑の枝のように感じます。背景の洗い流しとしてチークを使用し、タイポグラフィと薄いボーダーにパインを置くと、クラシックな招待状の外観になります。温かみのあるブラウンのタッチが、焦点を奪うことなくエレガントなヴィンテージのノートを加えます。ヒント: 印刷の場合は、チークを明るくし、パインのコントラストを高めて、細かいスクリプトを読みやすくしてください。

media.ioを使って生成した松と赤面の結婚式の画像例

15) ナスとライムのネオン

HEX：#2e1065 #a3e635 #0b0b12 #f5f3ff #c4b5fd

雰囲気：ネオン、ドラマチック、テクニック

おすすめ用途：ゲームストリームオーバーレイUIパネル

暗いアリーナのグロースティックのように、深いナスに対してライムバーストでネオンドラマヒット。ライムがクリーンステータスまたはライブインジケーターとして読み取られるように、パネルはナスとほぼ黒に保ちます。柔らかいラベンダーは、新しい色合いを追加せずに二次状態を作成するのに役立ちます。ヒント: lime をインタラクティブ要素またはライブ要素にのみ適用して、モーション中にオーバーレイを読み取り可能にします。

media.ioを使って生成したナスとライムのネオンの画像例

16) スレートとマリーゴールドの社説

HEX：#334155 #f59e0b #0f172a #f8fafc #cbd5e1

雰囲気：編集、スマート、洗練された

おすすめ用途：雑誌特集スプレッドレイアウト

スマートな編集コントラストは、マリーゴールドのハイライターを使用した紙の上のインクのように感じます。スレートとほぼ黒には見出しと本文のテキストがあり、マリーゴールドには引用符とセクションマーカーがポップになります。ライトグレーはグリッドを整然と落ち着かせます。ヒント: マリーゴールドで大きな背景に色を塗るのは避け、代わりに読者をスプレッドに導くために使用してください。

media.io を使用して生成された slate と marigold の社説の画像例

17) ターコイズとレンガの遗产

HEX：#14b8a6 #9a3412 #1c1917 #fff7ed #fed7aa

雰囲気：ヘリテージ、手作り、暖かい

おすすめ用途：レストランメニューデザイン

レンガや木の横にある釉薬のタイルのように、伝統の暖かさが伝わってきます。セクションヘッダーや小さなアイコンにはターコイズを使用し、主要な料理やスペシャルメニューにはレンガのリードを使用します。クリーム色の紙の色調は、暖かい照明の下でメニューをフレンドリーで読みやすく保ちます。ヒント: コーティングされていないストックに印刷し、ターコイズを平らな塗りつぶしにして、時代を超越した外観にします。

media.io を使用して生成されたターコイズとレンガの遺産の画像例

18) アイスブルーとバーントオレンジ

HEX：#bae6fd #c2410c #082f49 #fffaf0 #94a3b8

雰囲気：さわやか、アウトドア、バランスの取れた

おすすめ用途：旅行ブログのヘッダーイラスト

さわやかな空気とキャンプファイヤーの暖かさがこのミックスで出会い、まるで輝く残り火の上の冬空のようです。オープン エリアや風通しの良いグラデーションにはアイス ブルーを使用し、バッジやロケーション ピンにはバーント オレンジを使用します。深いティールが見出しをアンカーし、コントラストを強く保ちます。ヒント: オレンジ色を 1 つまたは 2 つの焦点要素に制限して、ヘッダーが忙しくなく落ち着いているように感じます。

media.ioを使って生成したアイスブルーとバーントオレンジの画像例

19) 赤と绿の古典

HEX：#b91c1c #166534 #111827 #f9fafb #fca5a5

雰囲気：クラシック、お祝い、大胆

おすすめ用途：ホリデープロモーションバナーデザイン

古典的なコントラストは、常緑の枝に対して包まれた贈り物のように、お祝いと大胆に感じます。緑を主フィールドとして使用し、割引や期間限定タグのために赤を使用します。ニュートラルホワイトとチャコールはタイポグラフィをきれいに保ち、バナーが古く見えるのを防ぎます。ヒント: 背景には明るい色合いで赤を柔らかくし、メインオファーには最も深い赤を予約します。

media.ioを使って生成した赤と緑のクラシックの画像例

20) ベージュとバイオレットの落ち着き

HEX：#e7d8c9 #6d28d9 #1f2937 #fffaf5 #c4b5fd

雰囲気：落ち着いた、居心地の良い、エレガント

おすすめ用途：スパパンフレットカバー

落ち着いて居心地の良い、ベージュはリネンのように読み、バイオレットは静かな贅沢なタッチを加えます。表紙の背景にベージュとソフトクリームを使用し、タイトルと小さな装飾ラインにバイオレットを設定します。チャコールは、細かい文字を厳しくすることなくシャープに保ちます。ヒント: バイオレットの彩度を適度に保ち、間隔とタイポグラフィに頼ってプレミアムな雰囲気を醸し出します。

media.ioを使って生成したベージュとバイオレットの落ち着きの画像例

21) サンセットブルーとアンバーグロー

HEX：#1e3a8a #f97316 #0b1220 #fff7ed #fdba74

雰囲気：温かく、映画のようで、自信に満ちています

おすすめ用途：ポッドキャストのカバーアート

映画のような暖かさは、深い青空に夕日の光のように着地します。ネイビーをメインの背景として使用し、覚えておきたいタイトルワードをアンバーに処理させます。ソフトクリームは、雑然とせずにバッジやエピソード番号を額装できます。ヒント: 強力な補完的なカラーパレットの外観を実現するには、タイプを大きく保ち、1つのプライマリテキストレイヤーにのみ琥珀色を使用します。

media.ioを使って生成したサンセットブルーとアンバーグローの画像例

22）バラとシーフォームガーデン

HEX：#e11d48 #34d399 #064e3b #fff1f2 #bbf7d0

雰囲気：フレッシュ、ボタニカル、高揚感

おすすめ用途：春のカードのための水彩植物イラスト

新鮮な庭のコントラストは、雨上がりの泡の葉にバラの花びらを押し込んだような感じです。シーフォームと淡いピンクに大きなウォッシュを与え、茎と影には深い緑色を与えます。ローズの小さなヒットで、フォーカルブルームが生き生きとした立体感を感じます。ヒント: イラストの風通しを保つために、エッジを柔らかく保ち、最も濃い緑色を控えめに使用します。

media.ioを使って生成したバラと海泡の庭の画像例

23) シアンとサビのワークショップ

HEX：#0ea5e9 #b45309 #1f2937 #f8fafc #fcd34d

雰囲気： 実用的、産業的、明るい雰囲気

おすすめ用途： ツールブランド製品広告パッケージモック

実用的なワークショップのエネルギーは、塗装されたスチールと使い込まれたレザーが隣り合っているように表現されます。シアンはブランドブロックに現代的な印象を与え、ラスティカラーはラベルや特徴的な箇所に信頼感と雰囲気を加えます。レイアウトはホワイトとチャコールを使って構造的にし、視認性を高めましょう。ヒント：シアンは最大のカラーフィールドとして使い、ラスティカラーは主な仕様のアクセントにして温かみをバランスよく保ちましょう。

media.ioで生成したシアンとラスティカラーのワークショップ画像例

補色にはどんな色が合う？

補色の組み合わせは、「バッファ」トーン（オフホワイト、ウォームクリーム、クールグレー、ディープチャコール）を加えると使いやすくなります。こうしたニュートラルカラーは目の疲れを軽減し、主な色にクリーンな舞台を提供します。

ディープアンカー（ネイビー、ほぼ黒、ダークプラム、ダークグリーン）はタイポグラフィやUIコンポーネントに特に効果的です。補色のアクセントが明るいまたは鮮やかな場合でも、コントラストを一貫して保ちます。

主な色調のソフトなティントも組み合わせやすいです。例えば淡いピンクとディープティール、ラベンダーとディープパープルなどは、配色の関連性を保ちながら視認性やスペースを向上させます。

補色配色を実際のデザインで使う方法

背景や大きなパネル、ブランドブロックには主となる色（多くの場合は濃い方）を使いましょう。補色はCTAやバッジ、ハイライト、注目ポイントのアクセントとして使うことで、狙った場所に視線が集まります。

コントラストを「クリーン」に保つには、鮮やかな色が接する部分を制限しましょう。両方の補色が明るい場合は、ホワイトスペースや細い境界線、ダークアンカーで区切って、視覚的な疲れやちらつきを防ぎます。

アクセシビリティのためには、現実的なサイズで背景上のテキストをテストしましょう。多くの場合、鮮やかな補色は図形やボタンに使い、本文テキストはチャコールやほぼ黒にするのが最良です。

AIで補色パレットビジュアルを作成

既にHEXコードがある場合は、一貫したプロンプトスタイルとシンプルな背景を用いて、ポスターやUIヒーロー、パッケージモックアップ、カバーアートなどのサンプルレイアウトを素早く生成できます。

上記のプロンプトをテンプレートとして使い、あなたのテーマ（ポスター、招待状、サムネイルなど）を入れ替え、主となる色とアクセント色を指定し、「写真なし」のようなメモを加えれば、クリーンでグラフィックな結果が得られます。

構成が気に入ったら、一度に一つの変数（アクセントの大きさ、背景トーン、タイポグラフィの重さなど）だけを調整してイテレーションし、補色パレットの一貫性を資産全体で保ちましょう。

次へ： ディストピアカラーパレット