配色パターン16選｜70:25:5法則で即使えるカラーコード完全ガイド

この記事でわかること

配色は3色以内・70:25:5の比率を守るだけでプロ品質に仕上がる理由を解説します。ミニマル・ポップ・ブランド・アース系の16パターンをHEXコード付きで今日から使えます。3問診断で自分に合うカテゴリが3分で決まります。

デザインの配色は3色以内・70:25:5の比率を守るだけで、初心者でもプロ品質に仕上がります。色相環の基本ルールとHEXコードをセットで解説し、ミニマル・ポップ・ブランドなどシーン別に16パターンを提示します。

この記事の結論

配色パターンで最も重要なのは「色数を3色以内に絞り、メイン70%・サブ25%・アクセント5%の比率を守る」という1点です。この比率を守るだけで、色相環や補色の難しい理論を深く学ばなくても、デザイン全体に統一感と洗練された印象が生まれます。まずは2色の同系色パターンから始め、慣れてきたらアクセントカラーを1色加えるという順番で進めると、最短でおしゃれな配色が身につきます。

今日やるべき1つ

Adobe Color（無料）を開き、「類似色」モードで自分のメインカラーを入力して自動生成されたパレットをコピーする（5分）。

状況別ショートカット

配色パターンは3色以内と70:25:5で決まる

配色で毎回迷う方の大半は、最初に覚えるべき2つのルールを知らない状態で色を選んでいます。このセクションでその2つのルールを押さえれば、選択肢を迷わず3色以内に絞れるようになります。

色相環で配色の9割が解決する

色相環とは、赤・橙・黄・緑・青・紫を円形に並べた図のことで、すべての配色パターンはこの円上の位置関係から導き出せます。色相環上で隣り合う色を「類似色（隣接色）」、正反対に位置する色を「補色」と呼びます。類似色の組み合わせは統一感が生まれやすく、補色の組み合わせはメリハリが出やすいという特性があります。「どんな印象を作りたいか」が決まれば、色相環を見るだけで候補が2〜3色に絞られるため、無限の選択肢に悩む必要がなくなります。

配色の基本要素は色相・彩度・明度の3つです。色相が「何色か」、彩度が「どれだけ鮮やかか」、明度が「どれだけ明るいか」を表します（色理論・同系色について｜baigie）。この3要素を揃える「トーン統一」を行うと、異なる色を使っても全体がまとまって見えます。くすんだパステル系で揃えると、色相が違っても「北欧風のやわらかい印象」として統一されます。配色の基本を押さえたうえでデザインセンス0でもプロっぽく見せる色の組み合わせ30選を参照すると、実例から直感的に理解を深められます。

70:25:5の比率が配色を整える仕組み

70:25:5の法則とは、デザインの色使いをメインカラー70%・サブカラー25%・アクセントカラー5%に割り当てるルールです。この比率を守ると「どの色がどのくらいの面積を占めるか」が自動的に決まるため、色同士がぶつかって見える問題を防げます。

初心者がやりがちな失敗の代表例は、同じ面積に3〜4色を均等に使うことです。均等配色は目が疲れやすく、どこを見ればいいか分からない状態を作ります。70:25:5を適用するだけで、視線の流れが生まれ、プロのデザインに近い印象になります（配色ルール7選｜dezasuta）。なお、真っ黒（#000000）や純粋な白（#FFFFFF）は避け、わずかに色味を加えたオフブラックやオフホワイトを使うと、画面上での見やすさが格段に上がります。

色数は最大3色が「覚えやすさ」の限界

色数の上限を3色にする理由は、人間の短期記憶が一度に認識できる情報のまとまりの限界と関係があります。デザインを見た人が「この配色、覚えておこう」と思えるのは3色程度が上限で、4色以上になると印象が散漫になりブランドイメージが定着しにくくなります。特にロゴやブランドカラーを決める段階では「メイン1色＋アクセント1色」の2色からスタートし、必要に応じてサブカラーを後から加える順番を守ることで、ブランドの一貫性が保ちやすくなります。おしゃれな2色配色パターンを参考にしながら、まずは2色の組み合わせで試してみましょう。

よくある質問

Q: 配色の「トーン」とは具体的に何を指しますか？

A： トーンとは彩度と明度を組み合わせた色の調子のことです。「パステルトーン」は彩度が低めで明度が高い色のグループ、「ビビッドトーン」は彩度が高い色のグループを指します。同じトーン内で色を選ぶと、色相が異なっていても統一感が生まれます。

Q： 色相環を持っていなくても配色を決められますか？

A： はい。Adobe ColorやCOLOR SUPPLYなどの無料ツールが色相環の役割を果たすため、印刷物や図を手元に用意しなくても問題ありません。メインカラーを入力するだけで類似色・補色・トライアドが自動表示されます。

配色パターン16選はシーン別カラーコード付き

配色のパターンが思い浮かばないときは、まず「どのジャンル・ターゲットか」でカテゴリを選び、そのカテゴリのHEXコードをそのままコピーする手順が最速です。以下の16パターンはシーン別にすぐ使えるHEXコード付きで整理しています。

ミニマル・モノトーン系（4パターン）

ミニマル系は色の彩度を極力下げ、明度の差だけで情報を整理する配色です。余白と明度差が視覚的な静けさを生み、高級感や信頼感を与えます。

チャコールグレーとクリーンホワイトは「真っ黒・真っ白を避ける」原則の実践例です。純粋な#000000は光を発するモニター上では目への刺激が強く、テキストの可読性がかえって下がります。#2D2D2Dのようなオフブラックに切り替えると、長時間読んでも目が疲れにくいデザインになります。

ポップ・カラフル系（4パターン）

ポップ系は彩度の高い色を複数組み合わせますが、ここでも70:25:5の比率を守ることで「賑やかだがうるさくない」バランスが実現します。

ネオンビビッドはゲームやeスポーツ告知で効果的ですが、通常のビジネス用途では視認性が下がるためアクセント的な使用に留めてください。高彩度の色はすべて均等面積で使うと視覚的な疲労が生じるため、ネオングリーン（#39FF14）をメイン70%に置き、マゼンタはサブ25%に留めるのが効果的です。

クラシック・ブランド系（4パターン）

ブランド系は信頼性と独自性を両立させる配色で、企業カラーを持つ媒体に向いています。

おしゃれな2色配色27選では、ネイビー×ゴールドが「クラシックな信頼感」を最短で表現できる2色組み合わせとして採用頻度が高いパターンとして紹介されています。ロイヤルブルー×レッド×ホワイトはトリコロール系で汎用性が高い一方、政治・行政のイメージが強いため、その連想を避けたい民間ブランドでは2色に絞ることを推奨します。

ナチュラル・アース系（4パターン）

アース系は土・植物・自然物の色を基調とし、オーガニックや手作り感を伝えたいシーンに最適です。

テラコッタは近年のデザイントレンドで採用頻度が上がっている配色です。SNSの食べ物・旅の写真に登場する土っぽい色みから抽出されたパレットが人気を集めており、日常のインスピレーションから配色を選ぶという方法の有効性を示しています（配色パターン100選｜Canva）。

よくある質問

Q: カラーコードはどこにコピーして使えばよいですか？

A： FigmaやCanva、Adobe Illustratorでは「カラーピッカー」にHEXコード（例: #F8F8F8）を直接入力できます。各ツールの色設定画面で「#」マークの横の入力欄に6桁のコードを貼り付けるだけで色が適用されます。

Q： 16パターン以外の組み合わせを自分で作るにはどうすればよいですか？

A： Adobe Colorの「カラーハーモニー」機能でメインカラーを入力し、「類似色」や「トライアド」モードを選ぶと自動でパレットが生成されます。生成されたパレットから70:25:5の比率で3色を選ぶだけで新しいパターンが完成します。

配色パターンの選び方を3分で診断

以下の3問に答えると、最適なカテゴリに絞り込めます。Q1から順番に進んでください。

Q1: デザインのターゲットは誰ですか？

子ども・10〜20代・エンタメ向けの場合はQ2へ進んでください。

ビジネス・30〜50代・信頼感重視の場合はResult B（クラシック・ブランド系）が最適です。

Q2: デザインに「動き・賑やか感」が必要ですか？

はい、SNSバナーや告知物の場合はResult A（ポップ・カラフル系）が最適です。

いいえ、落ち着いた印象が必要な場合はQ3へ進んでください。

Q3: 自然・手作り・wellness系のブランドですか？

はいの場合はResult C（ナチュラル・アース系）が最適です。

いいえの場合はResult D（ミニマル・モノトーン系）が最適です。**

Result A: ポップ・カラフル系を選んでくださいトロピカル（#FF6B6B/#FFE66D/#4ECDC4）またはパステルポップが最適です。70:25:5の比率を守り、最も鮮やかな色をアクセント5%に留めることで「明るいが読みやすい」デザインになります。

Result B: クラシック・ブランド系を選んでくださいネイビー×ゴールドまたはロイヤルブルーが最適です。まず2色から始め、3〜6ヶ月運用後にサブカラーを追加する段階的アプローチを推奨します。

Result C: ナチュラル・アース系を選んでくださいテラコッタまたはオリーブ×サンドが最適です。アクセントカラーには補色関係の色（テラコッタなら緑系）を加えると自然な対比が生まれます。

Result D: ミニマル・モノトーン系を選んでください**クリーンホワイトまたはチャコールグレーが最適です。色を増やしたくなったタイミングで、まずフォントウェイト（太さ）や余白で情報を整理してみてください。また、手書きかわいいイラストのようなモノトーン系のビジュアル素材と組み合わせると、シンプルな配色の中でも温かみのある表現ができます。

あわせて読みたい

手書きかわいいイラスト|5つのコツで誰でも描けて使える完全ガイド 手書きかわいいイラストは丸み・淡色・ゆる線の3要素で誰でも描けます。ibisPaintなどのツール選びから商用利用できる無料素材まで、5つのコツを完全ガイド。

よくある質問

Q: 診断結果が複数に該当する場合はどうすればよいですか？

A： 最も重要なターゲット（Q1）の回答を優先してください。ターゲットが明確でない場合は、ミニマル・モノトーン系から始めることを推奨します。シンプルな配色はどの用途でも破綻しにくく、後からアクセントカラーを追加する余地があります。

Q： 定期的に配色を変えてもよいですか？

A： ブランド運用中の場合、メインカラーとサブカラーは固定し、季節キャンペーンや告知物のみアクセントカラーを変更する運用を推奨します。メインカラーを頻繁に変えると、ブランドの認知蓄積がリセットされます。

配色パターンは無料ツール2選で自動化

以下の2つだけ覚えれば十分です。どちらも無料で、HEXコードを直接コピーできます。

Adobe Colorでカラーハーモニーを自動生成する

Adobe Colorは色相環ベースで類似色・補色・トライアド・スプリット補色などのパターンを自動生成するツールです（ウェブデザイン配色ツール｜webdesign-trends）。使い方は3ステップです。まずブラウザからAdobe Color（color.adobe.com）にアクセスします。次に「カラーホイール」タブを開き、上部のドロップダウンからハーモニータイプ（例:「類似色」）を選択します。最後にメインカラーのHEXコードを入力すると5色のパレットが自動生成されるため、左から3色（メイン・サブ・アクセント）を選んで「コード」アイコンからHEXをコピーします。

自動生成で注意が必要なのは、ツールが出力する5色をそのままデザインに全部使おうとする誤りです。ツールが提案する色はあくまで「相性の良い候補」であり、70:25:5の比率で3色に絞る判断は人間が行う必要があります。Adobe Colorは選択肢を減らすツールであり、配色決定を自動化するツールではありません。

COLOR SUPPLYで視覚的に色を探す

COLOR SUPPLYは色相環上でカーソルを動かしながらリアルタイムに2〜4色の組み合わせを確認できるツールです。Adobe Colorが「理論ベースで出力する」のに対し、COLOR SUPPLYは「感覚的に探しながら決める」用途に向いています（おしゃれな2色配色12選｜japan-design.jp）。2色配色から始めたい初心者の最初の一歩として、COLOR SUPPLYのシミュレーターで自分の好きなメインカラーを置き、隣接色（類似色）を1色選ぶだけでシンプルなパレットが完成します。

なお、両ツールで生成したパレットは明度のバランスがとれていない場合があります。暗い背景色に暗いテキストを置いてしまうと可読性が下がるため、背景にはメインまたはサブ、テキストには明度差が40以上離れた色を選ぶという判断を加えてください。なお、配色と合わせて画像文字入れ無料ツールを活用することで、選んだパレットをそのままバナーやSNS画像に反映させることができます。

あわせて読みたい

画像文字入れ無料ツール5選|PC・ブラウザで今すぐ使える 画像に文字入れできる無料ツール5選を比較。Canva・Fotor・Photopeaなど、ブラウザで今すぐ使える便利ツールの特徴と選び方を解説します。

2色配色を事前にシミュレーションする手順

2色配色で迷いやすいのは「実際に画面に置いてみないと分からない」という点です。以下の手順で事前確認を行うと、本番でのやり直しを防げます。まず選んだ2色をCanvaの無料テンプレートに当てはめ、背景色とテキスト色を設定します。次にモバイル表示プレビューで文字の読みやすさを確認します。最後に「アクセシビリティ」の観点から、白い背景上のテキストのコントラスト比が4.5:1以上あるかを確認します（Canvaの「アクセシビリティ確認」機能またはChrome拡張で測定可能）。

よくある質問

Q: Adobe ColorとCOLOR SUPPLY以外で有力なツールはありますか？

A： Coolorsもランダム生成とロック機能が使いやすく人気があります。Canva内の「カラーパレット生成」機能も画像からパレットを抽出できるため、参考にしたい写真や商品画像がある場合に便利です。

Q： ツールで生成したパレットを保存する方法はありますか？

A： Adobe ColorではAdobeアカウント（無料）でログインすれば「マイライブラリ」に保存できます。アカウント不要の場合は、HEXコードをテキストファイルやスプレッドシートにペーストして管理するだけで十分です。

配色パターンの実例は2パターンで比較

成功と失敗の2事例を通じて、3色以内の原則が実務でどう機能するかを確認してください。

ケース1（成功パターン）: 2色から始めてブランドカラーを定着させた事例

フリーランスのグラフィックデザイナーが、クライアントのオーガニック食品ECのリニューアルを担当したケースです。最初のヒアリングで「自然感・信頼感・シンプルさ」というキーワードが出たため、フォレストグリーン（#2D5A27）をメインカラー、クリーム（#F0EDD4）をサブカラーとする2色の構成からスタートしました。3ヶ月の運用後にアクセントとしてテラコッタ（#C1694F）を追加し、最終的に3色パレットが完成しました。段階的に色を増やしたことで、ブランドの印象がぶれることなく認知が積み上がりました。

最初から4〜5色を同時に導入していれば、ブランドの統一感が崩れ、再設計のコストが発生していた可能性があります。「まず2色から」という原則がリスク回避に直接効いた事例です（デザインセンス0でもプロっぽく見せる色の組み合わせ30選｜design-ac.net）。

ケース2（失敗パターン）: 色数過多でブランドイメージが定まらなかった事例

小規模なハンドメイド作家がSNS運用を始めた際、「かわいい色を全部使いたい」という方針で7色のパレットを設定したケースです。投稿ごとに異なる色の組み合わせを使用した結果、フォロワーから「どんなブランドか分からない」という反応が続きました。6ヶ月後にテラコッタ×クリームの2色に絞り直したところ、プロフィールページに一貫性が生まれ、フォロワー数が3ヶ月で増加しました。

テラコッタ×クリームに絞り直したことで「逆におしゃれに見えるようになって驚いた」という声も届いています（配色パターン・色の組み合わせ100選｜Canva）。フリーランスとして制作物を通じてブランドイメージを育てるには、フリーランスの仕事につながるポートフォリオの作り方と合わせて配色の一貫性を意識することが重要です。

あわせて読みたい

フリーランスの仕事につながるポートフォリオの作り方｜案件獲得ができる実績・価格・著作権の記載ポイ… フリーランスが案件を獲得するためのポートフォリオの作り方を解説。実績・価格・著作権の記載ポイントや信頼感を高めるコツを、駆け出しの方向けに紹介します。

最初から「3色以内」の原則を守っていれば、6ヶ月分の発信コストと認知の損失を防げていた可能性があります。

よくある質問

Q: 失敗事例のような色数の見直しはどのタイミングで行うべきですか？

A： デザインのターゲットや媒体が変わるタイミング、または半年ごとの定期レビューで確認することを推奨します。日常使いの中で「デザインをどこかで見た気がしない」という反応が続く場合は色数の見直しサインです。

Q： 既存のブランドカラーを変更する場合、何から変えればよいですか？

A： アクセントカラーから変更するのが最もリスクが低いです。面積5%のアクセントを変えるだけで印象を刷新できます。メインカラーの変更は既存の認知をリセットするため、大幅なリブランドを伴う場合のみ行うことを推奨します。

配色パターン管理は5つの仕組みで解決

パターンを知っても実際のデザインで毎回迷う根本原因は、仕組みを作っていないことです。以下の5つのハックで迷いをゼロに近づけられます。

ハック1: HEXコードスウォッチ登録で作業時間を50%短縮

【対象】: 毎回カラーコードを調べ直している初心者〜中級デザイナー

【手順】: まずFigmaまたはCanvaを開き、「スウォッチ」またはブランドカラー設定画面を開きます（2分）。次に本記事の16パターンから自分のメインカテゴリの3色を選んでHEXコードを入力し登録します（3分）。最後に「メインカラー」「サブカラー」「アクセントカラー」の3ラベルで保存し、以降は毎回ここから選ぶルールを設定します（1分）。

【コツと理由】: ここでは「事前に登録した3色しか選べない状態を意図的に作る」アプローチを取ります。選択肢を制限することで、配色の意思決定時間がゼロに近づき、デザイン作業の本質（レイアウトやコピー）に集中できます。「いい配色を探すより、悪い配色を排除する仕組みを作る」という発想の転換が効いています。

【注意点】: スウォッチに10色以上登録する必要はありません。多すぎる登録は「どれを使うか」という新たな迷いを生み、仕組みの効果を相殺します。最大3セット（9色）以内に留めることを推奨します。

ハック2: 類似色2色ルールで統一感を翌日から実現

【対象】: 色の組み合わせに毎回失敗して「ダサい」と感じている初心者

【手順】: まず使いたいメインカラーを1色決め、HEXコードを書き留めます（1分）。次にAdobe Colorで「類似色」モードを選び、そのメインカラーを入力して隣接する2色を取得します（2分）。最後に取得した2色のうち明度差が大きいほう（明るい色と暗い色）を選び、背景と文字色として使います（1分）。

【コツと理由】: 実務では「類似色2色から始める」方が統一感の失敗が少なくなります。補色は使い方を誤ると色がぶつかり合う「ハレーション」が起きやすいためです。類似色は色相の差が30度以内に収まるため、見た目のまとまりが出やすく、初心者がゼロから始めるには最もリスクが低い選択です。

【注意点】: 類似色だけで完結しようとすると、デザイン全体がのっぺりした印象になることがあります。アクセントとして、類似色から90〜120度離れた色を全体面積の5%以内で使うと、締まりが生まれます。

ハック3: 70:25:5テンプレートで配色比率を3分で固定

【対象】: 色は決まったが面積配分で迷う中級デザイナー以上

【手順】: デザインファイルに新規フレームを作成し、縦横100×100pxの正方形を3つ並べます（1分）。左から「70px幅・メインカラー」「25px幅・サブカラー」「5px幅・アクセントカラー」で塗り、実際の配色バランスを視覚確認します（1分）。この比率見本を本番デザインの参照ガイドとして常時表示しながら作業します（0分）。

【コツと理由】: ありがちな失敗は「70:25:5を頭で理解しているが、実際の面積で適用できていない」ことです。「比率見本を実際に目の前に置いてから作業する」アプローチを取ることで、比率の逸脱を即座に察知できます。人間は抽象的な比率の指示を視覚的な見本なしに正確に実行するのが難しいためです。

【注意点】: 70:25:5はあくまで目安であり、デザインの種類によって最適比率は変わります。テキスト中心のブログであればメイン（背景色）が90%近くを占めることもあり、その場合は無理に比率に合わせる必要はありません。

ハック4: イメージキーワード先行で配色迷いを大幅カット

【対象】: 「何色にすればいいか分からない」状態からスタートする全デザイナー

【手順】: クライアントまたは自分のブランドに対して、形容詞を3つ書き出します（例:「清潔感・信頼・やさしい」）（2分）。次にGoogleで「{形容詞} 写真」で検索し、出てきた画像の中から最もイメージに近い1枚を選びます（2分）。最後にCanvaの「画像から配色を生成」機能またはAdobe Colorの「画像から抽出」機能でその写真のパレットを抽出し、3色を選びます（1分）。

【コツと理由】: 「正解の色」を脳の中から探そうとすると、選択肢が無限に感じられて作業が止まります。「すでにある配色を写真から参照する」アプローチが有効です。自然の風景・料理・インテリア写真には人間が美しいと感じる色の比率が自然に含まれており、そこから抽出したパレットはそのままま使っても違和感が出にくいです。

【注意点】: 写真から抽出した色をそのまま使うと、デジタル画面上では意図した印象と異なる場合があります。抽出後に彩度や明度を5〜10%調整し、実際のデザインに貼り付けて確認する手順を省かないでください。

ハック5: 配色パターン保存ノートで再利用率を高める

【対象】: 同じような配色ミスを繰り返している、またはお気に入りのパターンを毎回忘れる方

【手順】: スプレッドシート（GoogleスプレッドシートまたはNotion）に「パターン名」「HEXコード3色」「用途・ターゲット」「使用日」の4列を作成します（5分）。デザインを完成させるたびに、使った配色をこのノートに記録します（1分/回）。3ヶ月後に「よく使うパターン」と「失敗したパターン」を集計し、使わないパターンを削除して最大10パターンに絞り込みます（10分）。このノート管理の習慣は作業効率を上げる方法の一環として、デザイン業務全体の生産性向上にもつながります。

あわせて読みたい

作業効率上げる方法|フリーランスが5つの仕組みで時間を30%削減 フリーランスの作業効率を上げる5つの仕組みを解説。タスク管理と無料ツール活用で月3～5時間を削減し、生産性を30%向上させる具体的な方法をご紹介します。

【コツと理由】: 「過去の成功パターンを資産として蓄積し再利用する」アプローチを取ります。配色の本当のコストは「探す時間」ではなく「同じミスを繰り返す時間」です。成功パターンをノートに蓄積することで、デザインのたびに発生する探索コストを、1回の記録作業（1分）に圧縮できます。

【注意点】: ノートに記録するパターンを増やし続けるのはやってはいけません。パターンが20件を超えると「どれを使うか」という新たな選択コストが発生します。定期的に使用頻度の低いパターンを削除し、常に10件以内を維持してください。

よくある質問

Q: ハックの仕組みを一度に全部設定するのは難しいですか？

A： 一度に全部設定する必要はありません。まずハック1（スウォッチ登録）とハック5（保存ノート作成）の2つだけ実施してください。この2つで「迷わない」「忘れない」という基盤が整うため、残りのハックはその後の困りごとに応じて追加する形で十分です。

Q： デザインツールを持っていない場合でも実践できますか？

A： はい。Canvaの無料プランで全ハックの手順が実行可能です。Canvaにはスウォッチ登録・画像からのカラー抽出・モバイルプレビューの機能が含まれており、FigmaやAdobe Illustratorがなくても対応できます。

配色パターンは3色と70:25:5で完結

配色パターンで最初に覚えることは「色数は3色以内、比率は70:25:5」の1つだけです。この原則を守るだけで、デザインの統一感と読みやすさは大幅に改善し、初心者でもプロに近い印象が出せます。ミニマル・ポップ・ブランド・アースの4カテゴリ計16パターンをHEXコード付きで提示したため、今日から即コピーして使えます。

迷う場合は「まずミニマル・モノトーン系のクリーンホワイト（#F8F8F8 / #E0E0E0 / #1A1A1A）を試す」という選択が最もリスクが低いです。この配色はどのジャンルでも破綻しにくく、デザインの構造（レイアウトや余白）を学ぶ段階でも邪魔になりません。

配色パターンに関するよくある質問

Q: 配色パターンは何色から始めるのが最適ですか？

A： 2色から始めることを推奨します。メインカラーとサブカラーの2色だけで構成すると、ブランドの統一感が最も出やすいためです。デザインに慣れてきたタイミングで3色目（アクセントカラー）を加える段階的なアプローチが、失敗リスクを最小化します。

Q： 配色パターンに正解はありますか？

A： 絶対的な正解はありませんが、「ターゲットが感じるべき印象」と「配色が与える印象」が一致しているかどうかが判断基準になります。医療・金融にはブルー系、食品・農業にはグリーン・アース系が採用されやすいのは、色が持つ文化的・心理的な印象の蓄積に基づいています（色理論・同系色について｜baigie）。ターゲットの生活圏に多い色を参考にすることが実用的な正解探しの方法です。

Q： ポップな配色とブランド系配色を同じ媒体で使えますか？

A： 基本的には推奨しません。2つのカテゴリは「動きと賑やか感」と「信頼と落ち着き」という逆の印象を目指すためです。季節限定キャンペーンのようなブランドカラーから意図的に外れる媒体では、メインカラーを固定したうえでアクセントカラーのみポップ系に変更する方法が現実的な折衷案になります。

【出典・参照元】

配色パターン・色の組み合わせ100選｜Canva

デザインセンス0でもプロっぽく見せる色の組み合わせ30選｜design-ac.net

おしゃれな2色配色パターン12選｜japan-design.jp

おしゃれな2色配色パターン27選｜vectorinc

配色ルール7選｜dezasuta

ウェブデザイン配色ツール・パターン見本｜webdesign-trends

色理論・同系色について｜baigie