モダンフラットカラー配色20選｜HEXコード付きパレット組み合わせ

フラットカラーは現代的で読みやすく、画面全体にスケーリングしやすいのが特徴です。UI、ブランディング、ポスター、印刷物に最適です。色調がクリーン（グラデーションなし）の場合、レイアウトやタイポグラフィ、階層が主役を担います。

以下は、HEXコード・ムード・実用的な使い方のコツ付きで選んだ20のフラットカラーパレット案と、素材生成に使えるAIプロンプト例です。

なぜフラットパレットはうまく機能するのか

フラットパレットは視覚的なノイズを取り除きます。グラデーションや質感の重さを排除することで、ユーザーはより速く情報をスキャンでき、UIステートも明確に、タイポグラフィもデバイスを問わずシャープに保たれます。

制作現場でも再現性が高いのも魅力です。べた塗りはWeb、アプリ、印刷など様々なワークフローで一貫性があり、デザインシステムでも標準化しやすくなります。

何より、フラットカラーは階層構造を明確に表現します。サーフェイス・プライマリー・アクセント・テキストなど役割を振り分ければ、インターフェースやレイアウトも拡張しやすくなります。

20+ フラットカラーパレット案（HEXコード付）

1）落ち着いたクレイニュートラル

HEX： #f2e9e4 #c9ada7 #9a8c98 #4a4e69 #22223b

ムード： 安定・落ち着き・洗練

おすすめ用途： 編集・ブランドガイドライン

落ち着きがありギャラリーのような雰囲気のこのクレイニュートラルは、リネンペーパーや柔らかな影、静かな自信を感じさせます。ブランドガイドライン、ルックブック、高級感のある資料など、タイポグラフィを際立たせたい場面に最適です。暖かみのあるオフホワイトの背景に、ヘッドラインに深いインク色を合わせると洗練された印象に。使い方のコツ：本文には一番濃いネイビー、補足にはモーブを使い、コントラストを保ちつつ、目に優しい仕上がりに。

media.ioで生成した落ち着いたクレイニュートラルの画像例

Media.io

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

今すぐ無料で試す

2）ミンティ・ポップ

HEX： #e8f9fd #79dae8 #0aa1dd #2155cd #092a5e

ムード： 新鮮・シャープ・エネルギッシュ

おすすめ用途： 2DダッシュボードUIモックアップ

爽やかでテクノロジー感のあるミント〜ネイビーの配色は、クリアな水やクリーンなデータ、素早いフィードバックを思わせます。ダッシュボードや分析パネル、SaaSウィジェットなど、階層が重要なUIに最適です。明るいシアンには深いネイビーのサイドバーを合わせ、背景は淡色で見やすく保つのがおすすめ。使い方のコツ：鮮やかなブルーはプライマリーボタンに、柔らかいアクアはホバーやセカンダリーに使い分けましょう。

media.ioで生成したミンティ・ポップの画像例

3）ピーチソーダ

HEX： #fff1e6 #ffd7ba #ffb085 #ff7a59 #2d3047

ムード： ポップ・暖かい・モダン

おすすめ用途： SNSプロモ用ポスター

遊び心があり軽やかなこの配色は、ピーチの泡やソフトクリーム、鮮やかな夕焼けのアクセントのよう。SNSプロモやクリエイター告知、強めの引用グラフィックに最適です。コーラルと深いインディゴでコントラストを強調、淡いピーチは背景に使います。使い方のコツ：グラデーションは使わず、太めのシェイプやブロックでモダンさをキープしましょう。

media.ioで生成したピーチソーダ画像例

4）フォレストフィールドノート

HEX： #f6f4d2 #c8d5b9 #8fc0a9 #68b0ab #4a7c59

ムード： アース・落ち着き・アウトドア

おすすめ用途： エコパッケージ概念

自然味があり癒されるグリーン系、この配色は押し花や再生紙、朝のハイキングを連想させます。エコパッケージやサステナブル商品ラベル、ナチュラル系ブランディングにぴったり。クラフトテクスチャーや潔いクリーム背景と合わせ素朴かつ清潔感を演出。使い方のコツ：一番濃い緑は法令表示に、中間色はアイコンに使うと淡い用紙でも見やすいです。

media.ioで生成したフォレストフィールドノート画像例

5）ナイトアーケード

HEX： #f7b801 #f18701 #f35b04 #3d348b #0e0b16

ムード： 鮮烈・エレクトリック・ドラマチック

おすすめ用途： イベントフライヤーデザイン

エッジの効いたハイコントラストなこの配色は、アーケードの照明や深夜のおやつ、大胆な見出しを連想させます。イベントフライヤーやクラブポスター、インパクト重視のキャンペーングラフィックに。暖色オレンジと深いバイオレットの組み合わせで印象付け、黒は空間の余白に使いノイズを避けます。使い方のコツ：テキストの太さは2種類に絞り、色味を全面に出しましょう。

media.ioで生成したナイトアーケード画像例

6）ソフトスカイオフィス

HEX： #f3f8ff #deecff #b1d4e0 #3e7cb1 #1f2f56

ムード： 透明感・信頼感・落ち着き

おすすめ用途： SaaSランディングページUI

空気のように軽く信頼感のあるスカイブルーは、明快なオンボーディングや静かな受信箱の印象。SaaSのランディングや特集セクション、価格表など、信頼感がメインとなる場所に最適です。余白をたっぷりとり、ナビは1色のネイビーで固定してエクスペリエンスを安定させましょう。使い方のコツ：中間色のブルーはCTAの主色に、パステル調はセクション背景などでスクロールガイドとして活用。

media.ioで生成したソフトスカイオフィス画像例

7）デザートアプリコット

HEX： #fff4e0 #f2c6a0 #e07a5f #3d405b #81b29a

ムード： 暖かみ・職人技・バランス

おすすめ用途： モダンな結婚式招待状

太陽に焼かれた石やアプリコット、涼しげなセージリーフが思い浮かぶ、暖かみのある職人的トーン。モダンなウェディング招待状やセーブ・ザ・デート、ミニマルな文房具に最適です。深いスレートはクリームと合わせてすっきりとタイポグラフィを配置し、アプリコットはさりげないハイライトに。使い方のコツ：装飾は細めのラインやアイコンに留めて、上品な仕上がりを保ちます。

media.ioで生成したデザートアプリコット画像例

8）シトラスライブラリー

HEX： #fff3b0 #ffcf56 #f29e4c #1b998b #2d3047

ムード： 聡明・陽気・自信

おすすめ用途： 書籍カバーデザイン

知的で明るい印象のこの配色は、書き込み線をハイライトしたページや柑橘の皮、落ち着いたティールのアンダーラインを思わせます。ノンフィクションの表紙や教材カバー、タイポグラフィ重視の装丁に最適。インクのようなインディゴとイエローで視認性を上げ、ティールをアクセントにすることで現代的な雰囲気に。使い方のコツ：イメージは最小限に抑え、大きなタイポグラフィで色味を際立たせましょう。

media.ioで生成したシトラスライブラリー画像例

9）ライラックバブルティー

HEX： #f8e8ee #fcd5ce #d8e2dc #bee1e6 #a0c4ff

ムード： 柔らかい・可愛い・癒し

おすすめ用途： スキンケア製品広告

ふんわりと優しいパステルは、バブルティーのフォームやライラックシュガー、エアリーなパッケージを思わせます。スキンケア広告や優しい新商品、癒し系バナーにもぴったりです。背景はクリーンな白かほんのり淡いピンク、文字は軽やかですがしっかりコントラストを持たせて。使い方のコツ：主役となるパステルを1色選び、残りはサポートとして使うと全体がぼやけません。

media.ioを使って生成したライラックバブルティーの画像例

10）モノクロスプリント

HEX：#f8f9fa #e9ecef #adb5bd #495057 #212529

ムード：最小限、高速、集中

おすすめ用途：アイコンセットとUIコンポーネント

ミニマルで集中力のあるこれらのグレーは、きれいなスプリントボードと気を散らすことのないワークスペースのように感じます。アイコン セット、UI コンポーネント、および一貫性が優れたドキュメントに最適です。システムの他の場所で単一のブランドのアクセントカラーとペアリングし、構造のためにこれらのニュートラルを維持します。使用法のヒント: テキストと境界線には最も暗い色合いを予約し、表面には最も明るい色合いを使用して、アクセス可能なコントラストを維持します。

media.ioを使って生成したモノクロスプリントの画像例

11) 海洋货物

HEX：#e0fbfc #98c1d9 #3d5a80 #293241 #ee6c4d

ムード：海、大胆、プロフェッショナル

おすすめ用途：プレゼンテーションスライドデッキ

航海的でプロフェッショナルなこれらの色は、出荷チャート、涼しい空気、そして自信のあるサンゴの信号を呼び起こします。このフラットな配色を使用して、スライド デッキ、レポート、基調講演テンプレートには、少し個性的な明瞭さが必要です。セクション ディバイダーにはペール アクアとディープ ネイビーを組み合わせ、キー ナンバーまたは CTA にのみコーラルを使用します。使用法のヒント: コーラル アクセントをスライド全体で少量繰り返して、一貫したリズムを作成します。

media.ioを使って生成した海上貨物の画像例

12) さくらナイト

HEX：#ffe5ec #ffb3c6 #ff8fab #a4133c #590d22

ムード：ロマンチック、ドラマチック、ラグジュアリー

おすすめ用途：音楽アルバムジャケット

ドラマチックなエッジを持つロマンチックなこのパレットは、ステージライトの下で桜を感じます。大胆な心を必要とするポップやR&Bのアルバムジャケット、シングルアート、アーティストマーチグラフィックに適合します。淡いピンクと深いワインの色合いを組み合わせて、強い焦点コントラストを実現し、タイポグラフィをシンプルに保ちます。使用法のヒント: 最も暗いトーンをビネットまたはフレームとして使用して、明るいピンクを甘いものではなく意図的に見せます。

media.ioを使って生成したサクラナイトの画像例

13) アルプスの朝

HEX：#f1faee #a8dadc #457b9d #1d3557 #e63946

ムード：さわやか、冒険的、クリア

おすすめ用途：旅行ブログ ヒーローヘッダー

さわやかで冒険的なこれらのトーンは、冷たい空気、氷河の湖、真っ赤なトレイルマーカーを思い起こさせます。これらは、旅行ブログのヘッダー、目的地ガイド、編集ヒーローセクションに適しています。ネイビーとペールミントを組み合わせてすっきりとした読みやすさを実現し、赤を控えめに使用して重要なアクションを指摘します。使用法のヒント: ヒーローのイラストをシンプルで幾何学的にして、色が広いアスペクト比で即座に読み取れるようにします。

media.ioを使って生成したアルパインモーニングの画像例

14) テラコッタカフェ

HEX：#f7ede2 #f5cac3 #f28482 #84a59d #2a9d8f

ムード：居心地がよく、フレンドリーで、手作りです

おすすめ用途：カフェメニューデザイン

居心地がよくフレンドリーなこれらの色は、蒸しミルク、チークセラミック、カウンターのミントの植物のように感じます。カフェのメニュー、中小企業の看板、食品包装の添付文書にぴったりです。温かみのあるピンクと涼しいグリーンを組み合わせてレイアウトのバランスを保ち、クリームを呼吸室にしてください。使用法のヒント: 価格を最も深い緑色で設定して、柔らかい背景色で読みやすいようにします。

media.ioを使って生成したテラコッタカフェの画像例

15) レトロコンソール

HEX：#eae2b7 #fcbf49 #f77f00 #d62828 #003049

ムード：レトロ、パンチ、ノスタルジック

おすすめ用途：アプリのオンボーディング画面

レトロでパンチのあるこれらのトーンは、ヴィンテージコンソール、アーケードトークン、大胆な画面プロンプトを思い出させます。これらのフラットな色の組み合わせは、素早い理解と遊び心のある勢いを求める画面のオンボーディングに最適です。クリアコピーにはネイビーとクリームを組み合わせ、進行とハイライトにはオレンジまたは赤を使用します。使用法のヒント: イラストをシンプルに保ち、一貫した角半径を使用して、ステップ全体でまとまりのある外観を保ちます。

media.ioを使って生成したレトロコンソールの画像例

16) クールなコンクリート

HEX：#f4f4f4 #d9d9d9 #b0bec5 #546e7a #263238

ムード：インダストリアル、モダン、控えめ

おすすめ用途：アーキテクチャ ポートフォリオ レイアウト

インダストリアルで控えめなこのセットは、コンクリート、スチール、柔らかい曇りの光のように感じられます。アーキテクチャポートフォリオ、ケーススタディ、スタジオプレゼンテーションに適しており、作業が中心的なステージに留まる必要があります。最も暗い炭にライトグレーのマージンをたくさん組み合わせ、ブルーグレーを微妙なセクションキューとして保ちます。使用法のヒント: 重いブロックの代わりに細いルールと広い間隔を使用して、プレミアムで風通しの良い構造を維持します。

media.ioを使って生成したクールコンクリートの画像例

17) 秋の市场

HEX：#fff1c1 #f4d35e #ee964b #f95738 #0d3b66

ムード：お祝い、暖かい、自信に満ちた

おすすめ用途：季節限定セールバナー

お祝いで温かみのあるこれらの色合いは、市場の屋台、金色の光、さわやかなネイビーのジャケットを思い起こさせます。季節のセールバナー、電子メールヘッダー、フレンドリーな緊急性が必要な小売プロモーションに最適です。ネイビーとイエローを組み合わせてコントラストを高め、バッジや割引タグにはオレンジをキープします。使用法のヒント: 広い領域ですべての暖かいトーンを一度に使用しないでください。1つの暖かい色を支配させ、他の色をアクセントとして使用してください。

media.ioを使って生成した秋のマーケットの画像例

18) アイスクリームパーラー

HEX：#fde2e4 #fad2e1 #c5dedc #dbe7e4 #f0efeb

ムード：甘くて、軽くて、風通しが良い

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

甘くて風通しの良いパステルカラーのクリームとミントは、冷やしたガラスケースに入れたスクープのような感触です。ベビーシャワーの招待状、ソフトアナウンス、優しいパーティー文房具にフィットします。シンプルなセリフまたは丸みを帯びたサンズタイプと組み合わせ、読みやすさのために背景を主にクリーム色に保ちます。使用法のヒント: 繊細なトーンが読みやすさを低下させないように、チャコールのように暗いテキストの色を 1 つ追加します。

media.ioを使って生成したアイスクリーム店の画像例

19) ギャラクシーカットアウト

HEX：#f0f3bd #02c39a #00a896 #028090 #05668d

ムード：未来的、清潔、オーシャニック

おすすめ用途：フィンテックモバイルUI

未来的でオーシャンなこれらのティールは、暗い部屋の光るダッシュボードのように感じます。これらは、明確さが信頼を築くフィンテックモバイルUI、ウォレット画面、セキュリティフローに非常に適しています。ハイライトカラーとしてペールライムを組み合わせ、ナビゲーションやチャートにはより深いティールをキープします。使用法のヒント: フィードバックを即座に認識できるようにするには、成功した状態にのみ最も明るい緑色を使用してください。

media.ioを使って生成した銀河切り抜きの画像例

20) 日当たりの良いスタジオ

HEX：#fff8e7 #fee440 #00bbf9 #00f5d4 #9b5de5

ムード：クリエイティブ、明るい、モダン

おすすめ用途：クリエイターポートフォリオホームページ

明るく創造的なこれらの色は、近くに明るいマーカーがある机の上の太陽の光のように見えます。クリエイター ポートフォリオ、代理店のホームページ、遊び心のあるパーソナル ブランドに適しています。温かみのある黄色にクリームをたっぷり合わせて圧倒しないようにし、ボタンやキーリンクにはバイオレットを使用します。使用法のヒント: セクションごとに 2 つの支配的な色を選択し、残りは小さなアクセントとして残して、ノイズの多いページを避けます。

media.ioを使って生成したsunlit studioの画像例

フラットカラーと相性の良い色は？

フラットなカラーパレットは、クリアなニュートラル(ホワイト、ウォームオフホワイト、ライトグレー、チャコール)と最もよく合います。なぜなら、クリーンでグラフィックな外観を維持し、コントラストを予測可能に保つからです。

「ワン ヒーロー + ワン アクセント」アプローチを試してみてください。大きな表面には支配的なフラット トーンを選択し、CTA、バッジ、またはキー ナンバーには 1 つの高エネルギー アクセントを選択します。これにより、システムがノイズではなく最新の状態に保たれます。

グラデーションなしでより深みが必要な場合は、同じ色合いの階段状のスロープ (明るい、中程度の、暗い) に加えて、対照的なアクセント (コーラル対ネイビー、ティール対オレンジなど) を 1 つ使用します。

実際のデザインでフラットパレットを活用する方法

デザインする前に、各色に役割を割り当てます。背景/表面、プライマリ アクション、セカンダリ アクション、テキスト、境界線です。すべてのトーンに仕事があるとき、フラットカラーは意図的に感じられます。

UIの場合は、アクセシビリティを保護するために、サーフェスには最も明るい色調を維持し、テキストと仕切りには最も暗い色を予約します。プリントやポスターの場合は、パレットをシャープに保つために、大きな平らな形状とより少ないタイプスタイルを使用してください。

「おもちゃのような」外観を避けるには、特に現代のブランディングや Web サイトのレイアウトでは、彩度の高い色を狭い領域に制限し、キャンバスのほとんどを柔らかい色合いで処理します。

AIでフラットパレットのビジュアルを生成

フラットなデザイン パレットにマッチする簡単なモックアップが必要ですか?プロンプトスタイルを再利用し、カラーキューのみを入れ替えることで、一貫したビジュアル（ポスター、UI画面、カバー、パッケージ）を生成します。

Media.io を使用すると、毎回一から始めることなく、上記のプロンプトを貼り付け、アスペクト比を調整し、ブランド システムに合わせたまとまりのある画像のセットを作成できます。

結果が気に入ったら、プロンプトをテンプレートとして保存して、将来のアセットがキャンペーン、ページ、プラットフォーム全体で一貫性を保つようにします。

次へ： タンポポ色パレット