おしゃれなデザインを作って SNS などに投稿したいけど、
- 何色を組み合わせればいいか分からない…
- おしゃれに見える色の組み合わせが分からない…
- 色数が多すぎて混乱する…
と悩んでいる人もいるのではないでしょうか。
実は、プロのデザイナーも使っている「鉄板の色の組み合わせ」があるんです。
そのため、センスがなくても、ルールを知ってテンプレートを使えば、誰でも「それっぽいデザイン」を作れるようになります。
それでは、デザイン初心者の方でも迷わず使える、3 色の組み合わせを 30 パターンご紹介しましょう。
目次
3 色だけでキマる！【基本】の配色 10 選
配色のバランスが取れているデザインは、見た目にまとまりがあって好印象です。
初心者におすすめなのは、
- メインカラー（主役）：デザインの印象を決める色
- サブカラー（引き立て役）：メインカラーをサポートする色
- アクセントカラー（ポイント）：注目を集める差し色
の 3 色で構成させるといいでしょう。
それでは、3 色でキマる基本の配色を 10 パターンご紹介します。
基本パターン①：ミニマル × スタイリッシュ
- メイン：#2C3E50（ダークブルー）
- サブ：#ECF0F1（ライトグレー）
- アクセント：#E74C3C（鮮やかなレッド）
落ち着いたダークブルーに、清潔感のあるライトグレーを組み合わせ、そこに鮮やかなレッドをアクセントとして加えた配色です。
ビジネスやIT関連など、クールで信頼感のある印象を与えたい場面にぴったりで、赤のアクセントが注目ポイントをしっかり引き立ててくれます。
基本パターン②：ナチュラル × 北欧風
- メイン：#A8D5BA（くすみグリーン）
- サブ：#F5F5F5（ホワイトグレー）
- アクセント：#FFB385（くすみオレンジ）
やさしいくすみグリーンと柔らかなホワイトグレーが、ナチュラルでリラックスした雰囲気を演出し、くすみオレンジを差し色として使うことで温かみと遊び心が加わります。
雑貨やインテリア、オーガニック系のデザインに最適です。
基本パターン③：ポップ × 元気
- メイン：#FF6B6B（ビビッドピンク）
- サブ：#FFE66D（イエロー）
- アクセント：#4ECDC4（ミント）
ビビッドピンクと明るいイエローをメインに、フレッシュなミントグリーンをアクセントにした、見るだけで元気になれる配色。
イベント告知や子ども向けデザイン、SNSキャンペーンなど、楽しさやワクワク感を伝えたい場面に向いています。
基本パターン④：クール × モダン
- メイン：#1A1A1D（ブラックグレー）
- サブ：#C5C6C7（シルバーグレー）
- アクセント：#66FCF1（ネオンブルー）
ブラックグレーとシルバーグレーの組み合わせは、落ち着きと高級感を持たせながら、ネオンブルーのアクセントが未来的で洗練された印象をプラスします。
ハイテク製品、eスポーツ、メンズファッションなどにおすすめの配色です。
基本パターン⑤：和モダン × 落ち着き
- メイン：#7C6C77（藤色）
- サブ：#DAD2BC（生成色）
- アクセント：#E94F37（朱赤）
日本の伝統色を感じさせる藤色と生成色に、朱赤のアクセントを加えた和モダンな配色です。
上品で落ち着いた雰囲気を持ちながらも、モダンな印象も忘れない絶妙なバランスで、旅館や和食、文化系イベントなどにぴったりです。
基本パターン⑥：フレッシュ × 爽やか
- メイン：#00A8E8（スカイブルー）
- サブ：#F8F9FA（ライトグレー）
- アクセント：#007EA7（濃いブルー）
清潔感のあるスカイブルーとホワイトグレーに、濃いブルーで引き締めた爽やかな配色。
信頼感や誠実さを伝えたい場面に適しており、医療・ヘルスケア関連、ビジネス資料、コーポレートサイトなどに幅広く使えます。
基本パターン⑦：フェミニン × 優しさ
- メイン：#FADADD（ペールピンク）
- サブ：#FFF5F5（ミルキーホワイト）
- アクセント：#C06C84（くすみピンク）
ふんわりとしたペールピンクとミルキーホワイトが、やさしさと清潔感を演出。
くすみピンクをアクセントに使うことで、大人っぽく上品な女性らしさも表現できます。
基本パターン⑧：レトロ × カフェ風
- メイン：#D3A87C（キャラメル）
- サブ：#F5F3F0（アイボリー）
- アクセント：#5D3A00（コーヒーブラウン）
キャラメルのようなベージュとアイボリーで、ナチュラルで温かみのある印象を作り出し、コーヒーブラウンで落ち着きを与える配色。
カフェのメニューや雑貨ブランド、ハンドメイド作家のショップカードなどにぴったりな雰囲気です。
基本パターン⑨：エレガント × 高級感
- メイン：#3C2F2F（ダークブラウン）
- サブ：#EADBC8（ベージュ）
- アクセント：#B68D40（ゴールド風）
重厚感のあるダークブラウンと、やわらかなベージュの組み合わせが、洗練された印象を与えます。
そして、アクセントにゴールド風の色を加えることで、一気に高級感がアップ。
ブライダルやジュエリー、高級サービスのブランディングにおすすめです。
基本パターン⑩：スポーティ × エネルギッシュ
- メイン：#F72585（ビビッドピンク）
- サブ：#7209B7（パープル）
- アクセント：#3A0CA3（ネイビー）
勢いのあるビビッドピンクに、パープルとネイビーを合わせたアクティブな配色です。
若さやエネルギーを感じさせるカラーで、スポーツイベント、若年層向けプロモーション、音楽やエンタメ系のコンテンツによく合います。
3 色だけでキマる！【おしゃれ】配色 10 選
上記で紹介したパターンをそのまま使っても失敗しにくい組み合わせばかりなので、まずは基本の配色から参考に利用してみるといいでしょう。
そして、基本パターンよりワンランク上の配色を使いたくなってきたら、よりおしゃれな配色も試してみるのもおすすめです。
それでは、3 色でキマるおしゃれな配色も 10 パターンご紹介します。
おしゃれパターン①：クラシック・ネイビー
- メイン：#1A365D（ネイビー）
- サブ：#F7FAFC（ライトグレー）
- アクセント：#D69E2E（ゴールド）
ネイビーは、「間違いない色」の代表格でどんな業界でも使いやすく、ゴールドのアクセントで上品さをプラス。
おしゃれな配色に迷ったら、この組み合わせを試してみてください。
おしゃれパターン②：ナチュラル・アース
- メイン：#F7F3E9（ベージュ）
- サブ：#2F855A（ディープグリーン）
- アクセント：#C53030（テラコッタ）
自然由来の色合いで、リラックス感を演出。
特に、オーガニック系やナチュラル系のブランドに最適です。
おしゃれパターン③：モダン・グレー
- メイン：#2D3748（ダークグレー）
- サブ：#E2E8F0（ライトグレー）
- アクセント：#3182CE（ブライトブルー）
グレーベースで現代的な印象を作り、ブルーのアクセントで信頼性をアップ。
IT系企業やスタートアップにぴったりです。
おしゃれパターン④：エレガント・パープル
- メイン：#FEFCF7（クリーム）
- サブ：#553C9A（ダークパープル）
- アクセント：#ED64A6（ローズゴールド）
パープルは古来より高貴な色とされており、美容やファッション業界で人気。
そこに、アクセントとしてローズゴールドを入れることで、より華やか印象を演出できます。
おしゃれパターン⑤：フレッシュ・グリーン
- メイン：#FFFFFF（ホワイト）
- サブ：#48BB78（フレッシュグリーン）
- アクセント：#1A202C（ダークネイビー）
緑は、成長と健康のシンボル。
ホワイトベースで清潔感を保ちつつ、ほぼ黒い色でメリハリを付けています。
おしゃれパターン⑥：ウォーム・サンセット
- メイン：#FFFAF0（クリーム）
- サブ：#ED8936（ウォームオレンジ）
- アクセント：#9C2A00（ディープレッド）
夕日をイメージした暖色系の組み合わせ。
食欲を刺激する効果もあるため、飲食業界で重宝されています。
おしゃれパターン⑦：クール・アイス
- メイン：#EBF8FF（アイスブルー）
- サブ：#4299E1（スチールブルー）
- アクセント：#1A365D（ダークネイビー）
青系のモノトーンで統一感を演出。
医療や清掃など、清潔感が重要な業界におすすめです。
おしゃれパターン⑧：ロイヤル・ゴールド
- メイン：#1E3A8A（ディープブルー）
- サブ：#FFFBF7（アイボリー）
- アクセント：#F6AD55（ゴールド）
王室を思わせる格調高い組み合わせ。
法律事務所やコンサルティングなど、専門性の高いサービスや伝統的な企業イメージに最適です。
おしゃれパターン⑨：ソフト・ピンク
- メイン：#FED7E2（パウダーピンク）
- サブ：#A0AEC0（ソフトグレー）
- アクセント：#2D3748（ダークグレー）
ピンクの優しさとグレーの落ち着きを組み合わせ。
子育て支援やウェディングなど、女性をターゲットとしたサービスで効果を発揮します。
おしゃれパターン⑩：アーバン・ブラック
- メイン：#1A202C（チャコールブラック）
- サブ：#F7FAFC（ライトグレー）
- アクセント：#38A169（エメラルドグリーン）
黒とグレーでモダンな印象を作り、エメラルドグリーンで個性をプラス。
建築やデザイン事務所など、クリエイティブ業界にぴったりです。
3 色だけでキマる！【女性に人気】配色 10 選
ビジネスなどに活用しやすい配色パターンをご紹介しましたが、SNS やブログなどに画像を投稿したいときは、また別のパターンがおすすめだったりもします。
そこで、3 色でキマる「女性に人気の配色」も 10 パターンご紹介します。
女性人気パターン①：フェミニンピンク
- メイン：#FFB6C1（ライトピンク）
- サブ：#FFF0F5（ラベンダーブラッシュ）
- アクセント：#FF69B4（ホットピンク）
柔らかく女性らしい雰囲気を演出できるパターンのため、恋愛や美容系のブログ、Instagram の投稿などに最適。
ピンクのグラデーションが温かみを与え、可愛らしさを前面に押し出したいときにおすすめです。
女性人気パターン②：ナチュラルベージュ
- メイン：#F5DEB3（ウィート）
- サブ：#FFF8DC（コーンシルク）
- アクセント：#DEB887（バーレルウッド）
落ち着きと自然体を感じさせる組み合わせなため、ライフスタイルやインテリア関連の記事にぴったり。
優しいベージュトーンで、安心感やリラックスを求める人に響きやすいです。
女性人気パターン③：エレガントラベンダー
- メイン：#E6E6FA（ラベンダー）
- サブ：#D8BFD8（シスル）
- アクセント：#9370DB（ミディアムパープル）
上品で大人っぽい雰囲気を演出できるため、ファッションやコスメ記事で「洗練されたイメージ」を持たせたい時に効果的。
紫系は高貴さや癒しを感じさせるため、ラグジュアリーなシーンにもマッチします。
女性人気パターン④：スウィートミント
- メイン：#98FB98（パステルグリーン）
- サブ：#F0FFF0（ハニーデュー）
- アクセント：#3CB371（ミディアムシーグリーン）
爽やかでフレッシュな雰囲気に。ヘルスケア、カフェ紹介、旅行関連のブログにおすすめ。
ナチュラルさを感じさせる緑系は、健康的・清涼感のあるイメージを与えたい時に使いやすいです。
女性人気パターン⑤：ロマンティックローズ
- メイン：#FFC0CB（ピンク）
- サブ：#FFF5F5（ローズホワイト）
- アクセント：#DB7093（パレリーレッド）
甘くロマンチックな雰囲気を出せる配色なため、ウェディング、恋愛コラム、美容系のブログにぴったり。
ピンクベースに深みのあるローズ系を加えることで、甘さと大人っぽさを両立できます。
女性人気パターン⑥：フレッシュシトラス
- メイン：#FFD700（ゴールド）
- サブ：#FFFACD（レモンシフォン）
- アクセント：#FFA500（オレンジ）
明るく元気な印象を与える配色なため、イベント告知やエンタメ系ブログで目を引きたい時に最適。
太陽や果実を連想させるカラーは、夏やポジティブなムードを強調するのに効果的です。
女性人気パターン⑦：サクラブロッサム
- メイン：#FF69B4（ホットピンク）
- サブ：#FFF0F5（ラベンダーブラッシュ）
- アクセント：#FF1493（ディープピンク）
春らしく華やかな雰囲気を演出できる配色なため、新生活シーズンやイベント紹介にぴったり。
華やかなピンクは、「お祝いムード」や「ときめき」を表現するのに最適です。
女性人気パターン⑧：クラシックネイビー
- メイン：#4682B4（スチールブルー）
- サブ：#B0C4DE（ライトスチールブルー）
- アクセント：#1E90FF（ドジャーブルー）
信頼感や安定感を感じさせる組み合わせなため、ビジネス系記事や教育系コンテンツにおすすめ。
ネイビーベースはフォーマルさを演出し、知的で誠実な印象を与えます。
女性人気パターン⑨：ガーリーピーチ
- メイン：#FFDAB9（ピーチパフ）
- サブ：#FFF5EE（シーシェル）
- アクセント：#FF8C69（サーモン）
可愛らしく柔らかなイメージを演出できる配色なため、カフェ紹介やスイーツ特集、ライフスタイル記事におすすめ。
ピーチトーンは甘さと温もりがあり、読者の親近感を引き出せます。
女性人気パターン⑩：ドリーミースカイ
- メイン：#87CEFA（スカイブルー）
- サブ：#E0FFFF（ライトシアン）
- アクセント：#4682B4（スチールブルー）
爽快で夢のある雰囲気の配色なため、旅行や日常の癒し系記事、心を軽くしたいときのコンテンツにぴったり。
青空を連想させるブルー系は、「清潔感」「解放感」を伝えるのに効果的です。
「カラーコード」の基本と「デザインAC」での活用方法
様々なシーンで活用できる配色を 30 パターンご紹介しましたが、紹介と合わせて「カラーコード」と呼ばれるものも表示させています。
デザインが初めての場合、「この番号はなんだろう？」と不思議に思う人もいると思いますので、この「カラーコード」についてと活用方法についても合わせてご紹介しておきます。
カラーコードとは？
カラーコードとは、Web やデザインソフトで色を指定するための「番号」のようなものです。
よく見かけるのは、「#」から始まる 6 桁の英数字で表される形式になっています。
分かりやすい例としては、
- #FFFFFF = 白
- #000000 = 黒
- #FF0000 = 赤
などがあげられます。
実はこの数字、「RGB（赤・緑・青）」を組み合わせて作られていて、
- 先頭2桁 → 赤（R）
- 中央2桁 → 緑（G）
- 最後2桁 → 青（B）
という構成になっています。
つまり、#FF0000 は「赤が最大（F が最大値）、緑と青がゼロ」という意味で、鮮やかな赤になるわけです。
初心者が覚えておくと便利な基本カラーコード
デザイン初心者の場合は、よく使うシンプルな色を覚えておくと便利です。
- 白：#FFFFFF
- 黒：#000000
- グレー（中間）：#808080
- 赤：#FF0000
- 青：#0000FF
- 緑：#00FF00
- 黄色：#FFFF00
- オレンジ：#FFA500
- ピンク：#FFC0CB
このあたりを押さえておくだけでも、デザインで大きく役立ちます。
「デザインAC」でのカラーコード活用例
PC やスマホなど、オンライン上でデザインができるツール「デザインAC」では、色の変更が可能な素材を選んだ場合に「カラーコード」を活用して簡単に色の変更ができます。
色を変えたい素材をアクティブにして、上部メニューから反映されている色を押すと、カラーメニューが表示されます。
そして、カラーメニューの下部にある「HEX」と書かれた部分にカラーコードをコピペなどすると、指定した色に反映されます。
「カラーコード」は、配色パターンを正確に指定できるため、デザインするときには活用してみるといいでしょう。
「デザインAC」でおしゃれな配色パターンをデザインしてみよう
色の組み合わせに「絶対の正解」はありませんが、当記事で紹介した 30 パターンは長年プロのデザイナーに愛用され続けている実績ある組み合わせです。
「デザインセンスがない」と諦める前に、まずはこれらの鉄板パターンを試してみましょう。
もしデザインツールをこれまでに使ったことがないという方は、「デザインAC」なら無料のアカウント登録をするだけですぐに利用できますので、様々な配色パターンを試してみてくださいね。
＼無料登録ですぐに使える！／
※ 本記事で紹介している情報は執筆時点のものであり、閲覧時点では変更になっている場合があります。最新の情報とは異なるおそれもありますので、あらかじめご了承ください。