20選以上！ピンクとブルーのカラーパレット HEX付【柔らか・鮮やか・ナチュラル】

ピンクとブルーは時代を超えたコンビネーションです。選ぶ色調によって、柔らかくフレンドリー、力強くエレクトリック、あるいはクリーンでエディトリアルな印象を与えることができます。

以下に、すぐに使えるピンクとブルーのカラーパレットアイデア20選（HEXコード付き）と、UI、ブランディング、印刷での実用的なヒント（さらにマッチしたビジュアルを素早く生成できるプロンプト）をご紹介します。

ピンクとブルーパレットが大活躍する理由

ピンクは温かみや親しみやすさ、個性をもたらし、ブルーは信頼、明快さ、構造を加えます。両者を組み合わせることで感情と使いやすさのバランスがとれ、現代的なインターフェースやブランドシステムに最適です。

また、この組み合わせは自然な階層構造も作りやすいです。濃いブルーはナビゲーションや見出し、CTAに使え、淡いピンクは背景やハイライト、補助UIステートに美しくマッチします。

パステルの「コットンキャンディ」風からネオンの夜のコントラストまで、ピンクとブルーは雰囲気を変えながら調和を失うことはありません。白、オフホワイト、ほぼ黒といったクリーンなニュートラルを加えることで、隙間や余白も確保できます。

20以上のピンク×ブルーカラーパレットアイデア（HEXコード付き）

1）コットンキャンディ・サーフ

HEX： #FFB3C7 #FFD6E5 #6EC9FF #2B7DBF #FFF7FB

雰囲気： 遊び心・軽やか

おすすめ用途： 夏のSNS投稿、遊び心のあるブランディング

楽しくて軽やかな印象で、まるでボードウォークのキャンディや明るい海のしぶきのよう。丸みのあるフォントやシンプルなアイコンと合わせると、甘さとモダンさが両立します。真っ白な余白や、少しだけチャコールを加えると可読性も向上。深いブルーは見出しやボタンで軽いピンクを引き立てましょう。

media.ioを使って生成したコットンキャンディ・サーフの画像例

Media.io

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

今すぐ無料で試す

2）ブラッシュネイビー・スタジオ

HEX： #F7A1C4 #FCE7F2 #1F3A5F #4F7CAC #F4F6FA

雰囲気： 洗練・自信

おすすめ用途： エージェンシーサイト、ハイグレードな企画書

洗練され自信に満ちた雰囲気で、ブラッシュシルクと仕立ての良い濃紺ジャケットを思わせます。ダークブルーが瞬時にタイトルの階層を作り、柔らかいピンクが親しみやすさを添えます。暖かみのあるグレーやオフホワイトの紙質と組わせれば、スタジオ仕上げのような印象に。ブラッシュピンクは強調やチャートに、ネイビーはナビゲーションや本文に使うのがおすすめです。

media.ioを使って生成したブラッシュネイビー・スタジオの画像例

3）ローズウォーター・スカイ

HEX： #F8A8B8 #FFE3EA #A9D9FF #4DA3D9 #FFFFFF

雰囲気： 柔らかい・楽観的

おすすめ用途： ウェルネス系ランディングページ、美容ブログ

柔らかく前向きな印象で、朝の澄んだ空の下に広がるローズウォーターのミストのよう。淡い色合いで内容が穏やかな印象となり、ミッドブルーはUI要素に程よい構造を与えます。淡いベージュや繊細なラインアイコンと組み合わせれば、スパのようにクリーンな雰囲気に。文字色はブルー×最も淡いピンクでコントラストをつけると見やすくなります。

media.ioを使って生成したローズウォーター・スカイの画像例

4）ネオンバブルガム・ナイト

HEX： #FF4FB1 #FFB3E1 #2DE2FF #1A4FFF #0B0B14

雰囲気： エレクトリック・ナイトライフ

おすすめ用途： ミュージックポスター、ゲームプロモーション

エネルギッシュでナイトライフに最適。ネオンサインが濡れた舗道に反射するイメージです。ピンクとブルーのコンビが一番映えるのは、ほぼ黒の背景を活かしたとき。締まったフォント、控えめなグロー効果、簡潔なジオメトリックシェイプと合わせて。グラデーションは控えめに、ネオンアクセントはソリッドで使うことで細かい文字も読みやすくなります。

media.ioを使って生成したネオンバブルガム・ナイトの画像例

5）パウダーピンク・デニム

HEX： #F3B7C6 #F9E4EA #5AA6D6 #1E4E79 #EDEFF3

雰囲気： カジュアル・モダン

おすすめ用途： アプリのオンボーディング、ライフスタイルブランド

カジュアルで現代的な印象。パウダーピンクのTシャツと使い込んだデニムをイメージします。淡いピンクは親しみやすく、濃いブルーはCTAにしっかりコントラストを与えます。クールグレーやシンプルな写真と合わせれば、自然体のデイリー感に。デニムネイビーはアイコンやマイクロコピーに使うことでアクセシビリティも維持できます。

media.ioを使って生成したパウダーピンク・デニムの画像例

6）さくらハーバー

HEX： #FFB7D5 #FFE8F2 #7BD3FF #0077B6 #FAFAFF

雰囲気： フレッシュ・コースタル

おすすめ用途： 旅行ニュースレター、リゾートブランディング

新鮮な海の趣で、さくらの花びらが明るい港に舞う情景。濃い海色ブルーは見出しにしっかり効き、花びらピンクがトーンを優しくまとめます。風通しのいいセリフ見出しや暖色系ベージュのアクセントで砂や太陽を想起させると良いでしょう。濃いブルーはレイアウトの10〜15％程度に抑えるとくつろいだ印象に。

media.ioを使って生成したさくらハーバーの画像例

7）フラミンゴアイス

HEX： #FF8FB3 #FFC2D6 #8BE9FD #3A86FF #F7F7FF

雰囲気： 明るい・さわやか

おすすめ用途： 飲料広告、夏のキャンペーン

明るくリフレッシュ。フラミンゴの浮き輪がクラッシュアイスに浮かぶイメージ。冷たいシアンとエレクトリックブルーでピンクがよりジューシーに映えます。クリーンな白、ボールドサンスタイプ、ハイコントラストな商品写真と好相性。エレクトリックブルーは価格タグやキーポイントを目立たせたい時に最適です。

media.ioを使って生成したフラミンゴアイスの画像例

8）ピオニープールサイド

HEX： #FFA3D1 #FFE0F1 #7EC8E3 #0E5E8C #FFF1F8

雰囲気： ロマンチック・爽やか

おすすめ用途： 結婚式の詳細、ブライダルシャワー招待状

ロマンチックで爽やかな印象。陽ざしの中のピオニーとプールの組合せのよう。深いティールブルーは名前や日付にエレガント、淡いピンクはレターペーパーを優しくします。細い花のラインアートやクリーミーな紙質と合わせれば、プレミアムな仕上がりに。淡いピンクは未塗工紙だと薄くなりやすいので印刷見本は必ず確認してください。

media.ioを使って生成したピオニープールサイドの画像例

9）バレエ・ブループリント

HEX： #F4B6C2 #FDE2E4 #9AD0EC #6998AB #2D3A4A

雰囲気： 落ち着き・構造的

おすすめ用途： プロダクトダッシュボード、データビジュアル

落ち着いた構造感で、バレエのような柔らかさと設計図のグリッド感を両立。スレートやスチールブルーはチャートやテーブルに明快さを与えますが、冷たくはなりすぎません。細線や控えめな影、十分なスペースと合わせて活用を。最も濃いスレートは軸ラベルに、くすんだブルーは系列色に使うと視覚ノイズを抑えられます。

media.ioで生成されたバレエ設計図の画像例

10) ラズベリー・アークティック

HEX： #D84A7F #FFB0C8 #AEE6FF #2F80ED #F2F7FF

雰囲気： シャープで高エネルギー

おすすめ用途： スポーツウェアのプロモ、大胆なソーシャル広告

シャープで高エネルギー。ラズベリーシロップが北極の雪にかかったような印象です。強いブルーはスポーティーかつ速さを感じさせ、ピンクはパンチを効かせつつ甘くなり過ぎません。ブラック文字、ダイナミックな斜線、シャープな商品切り抜きと組み合わせ。使い方：背景は氷のように明るくし、ラズベリーをアクセントとして使いましょう。

media.ioで生成されたラズベリー・アークティックの画像例

11) モーヴ・マリーナ

HEX： #CFA3B7 #F3E1EA #7AAEDB #2C5D8A #F9F6F8

雰囲気： 静かで洗練

おすすめ用途： 書籍カバー、ブティックパッケージ

静かで洗練された印象。マリーナの夕暮れのモーヴ色の光を思わせます。くすんだ色味が成熟感を演出し、プレミアムなラベルや控えめなタイポグラフィによく合います。柔らかな金箔や温かいグレーと組み合わせることでエレガンスが深まります。使い方：小さな文字は濃いブルーを使うと成分情報や詳細も読みやすくなります。

media.ioで生成されたモーヴ・マリーナの画像例

12) オーキッド・カプリ

HEX： #E58AB7 #FAD5E5 #74C0FC #3B5BDB #FBFCFF

雰囲気： 晴れやか、地中海風

おすすめ用途： ビューティー新商品、インフルエンサーキット

晴れやかで地中海らしい。カプリブルーの海に咲くオーキッドのような印象です。鮮やかなブルーは見出しに最適、オーキッドピンクは柔らかなセクションや背景に。明るいホワイト、シンプルな形、光沢ある商品写真と合わせることで発売準備感が出ます。使い方：本文は暗めにし、ボタンやステッカー、ハイライトに色を添えてください。

media.ioで生成されたオーキッド・カプリの画像例

13) ピンクレモネード・ブルーベリー

HEX： #FF9BB0 #FFE6E0 #7BDFF2 #4EA8DE #FFFCEB

雰囲気： 陽気で若々しい

おすすめ用途： カフェ、デザートメニュー

陽気で若々しい。ピンクレモネードにブルーベリーの泡が加わったような味わい。バターのような明るいニュートラルがデザインを温かく保ち、ブルーが爽やかさを加えます。手描き風落書きや遊び心あるイラストと組み合わせ、メニューやサインに最適。使い方：明るいブルーはカテゴリー見出しに使い、忙しいレイアウトでも整理しやすく。

media.ioで生成されたピンクレモネード・ブルーベリーの画像例

14) エレクトリックフューシャ・グレイシャー

HEX： #FF2E93 #FF9FD3 #5CE1E6 #0A4D8C #F3F4F6

雰囲気： 大胆で未来的

おすすめ用途： テックイベントのビジュアル、スタートアップのリブランディング

大胆で未来的。フューシャ色のLEDが氷河の氷に映るようなイメージです。ピンクとブルーの組み合わせは、シャープな幾何学、オーバーサイズの文字、多くの余白で最も現代的。クールグレーや微妙なグラデーションと合わせるとスッキリした印象に。使い方："ヒーロー"ネオン（通常はフューシャ）を1色決め、濃いブルーで構造とコントラストを担わせましょう。

media.ioで生成されたエレクトリックフューシャ・グレイシャーの画像例

15) ダスティローズ・シーサイド

HEX： #D9A0AE #F1D6DE #9BC4E2 #3B6C8A #FAF7F8

雰囲気： 優しくノスタルジック

おすすめ用途： ホームデコールルックブック、ライフスタイルブログ

優しくノスタルジック。ダスティローズのカーディガンで海辺を散歩するイメージです。控えめなブルーが安定感を与え、長ページでも疲れず使いやすい。温かいベージュやリネン風のテクスチャ、柔らかい写真と合わせて編集感を出しましょう。使い方：濃いブルーはリンクやキャプション用に使い、パレットが落ち着きつつ実用的に。

media.ioで生成されたダスティローズ・シーサイドの画像例

16) コーラルピンク・コバルト

HEX： #FF7AA2 #FFC0D4 #2F9CFF #143D66 #FFF5FA

雰囲気： 自信たっぷりでパンチがある

おすすめ用途： ECプロモーション、CTA重視ページ

自信たっぷりでパンチある印象。コーラルリップスティックにコバルトジャケットを合わせたような感覚です。コバルトはボタンやプロモタグのコントラストを即座に高め、ピンクは親しみやすさを保ちます。シャープなホワイト、微妙なドロップシャドウ、シンプルな商品グリッドで組み合わせ。使い方：コバルトは本当のアクセントとして控えめに使い、CTA同士が競合しないように。

media.ioで生成されたコーラルピンク・コバルトの画像例

17) 桜ブループリント

HEX： #F6A6B2 #FDECEF #8FBFE0 #2B5D7A #F6F8FB

雰囲気： 清潔で学術的

おすすめ用途： 講義スライド、インフォグラフィック

清潔で学術的。桜がノートに押し付けられたような印象です。クールブルーの範囲は図表を精密に見せ、ピンクはハイライトに暖かみを添えます。ホワイトをたっぷり使い、細い罫線や等幅ラベルで「テクニカルなのに親しみやすい」雰囲気に。使い方：ブルー1色をデータ系列に割り当て、ピンクは注釈専用にしましょう。

media.ioで生成された桜ブループリントの画像例

18) マゼンタ・ミッドナイトウェーブ

HEX： #C2185B #FF7EB6 #5AB0FF #0B1F3B #F9F2F6

雰囲気： ドラマチックで豪華

おすすめ用途： ナイトライフブランド、アルバムアート

ドラマチックで豪華。マゼンタのスポットライトが真夜中の波を切り裂くような印象です。ダークネイビーが深みを瞬時に与え、明るいアクセントは高価に見せます。光沢グラデーション、大きな写真、ミニマルなコピーと合わせると最大限のインパクトに。使い方：最も濃いネイビーには小さな文字は避け、コントラスト用にホワイトに近づけて使いましょう。

media.ioで生成されたマゼンタ・ミッドナイトウェーブの画像例

19) パステルポップ・アーケード

HEX： #FFB6D9 #FFD9EE #73D2DE #3D5A80 #FAF3FF

雰囲気： 楽しくレトロ

おすすめ用途： 子供向けブランド、ステッカーパック

楽しくレトロ。パステルの光で飾られたアーケード景品壁のイメージです。柔らかな色調は優しく、濃いブルーはアウトラインとして信頼できます。太いアイコン、角丸、ドットやチェッカーボードの遊び心あるパターンと組み合わせ。使い方：最も濃いブルーはストロークに使い、パステル要素がぼやけないようにしましょう。

media.ioで生成されたパステルポップ・アーケードの画像例

20) ヴィンテージローズ・インディゴ

HEX： #D6A0B3 #F5D7E3 #6FA8DC #1E3A8A #F8FAFF

雰囲気： クラシックでロマンティック

おすすめ用途： ジャーナル、ブティック文具

クラシックでロマンティック。ヴィンテージローズがインディゴ色のジャーナルに挟まれたイメージです。インディゴは伝統と重厚感を加え、バラ色は柔らかさと贈り物にもぴったり。質感紙、セリフ体、微妙なエンボスで時代を超えた文具スタイルを演出。使い方：インディゴは枠線やタイトル専用で、ピンクは広い面に使い重さを避けましょう。

media.ioで生成されたヴィンテージローズ・インディゴの画像例

ピンクとブルーに合う色は？

クリーンなニュートラルは一番手っ取り早い選択です：フレッシュなUIなら明るいホワイト、印刷向けならオフホワイト、読みやすさや高級感にはほぼブラックやチャコール。これらのニュートラルはピンクの甘さを抑え、ブルーのシャープさを保ちます。

パレット拡張には、モダンダッシュボードならクールグレーやシルバー、海岸系ブランドやライフスタイルならサンディベージュ、パッケージやイベントには控えめなゴールドアクセントを。さらにエネルギーが欲しい場合は、少量のライムやイエローをアクセントに。ミニマルにしてブルーと競合しないようにしましょう。

迷ったら、構造（文字、ナビ、ボタン）はブルー、感情（背景、バッジ、ハイライト）はピンクに任せると、ページやフォーマットを問わず一貫性が保てます。

実際のデザインでピンクとブルーパレットを活用する方法

まずコントラスト役割から開始：深いブルーで文字や主要CTAを、広い背景には淡いピンクやオフホワイトを選ぶことで階層がすぐ生まれ、アクセシビリティもしやすくなります。

ブランド作成時は"シグネチャー"カラー（ブラッシュピンクやネオンフューシャなど）を一つ決めて、SNSテンプレートやパッケージラベル、プレゼンコールアウトで繰り返し用い、サポート役のブルーが信頼と一貫性を支えます。

印刷の場合は実際の用紙で淡いピンクを試しましょう（非コート紙は色をくすませます）。デジタルUIでは白に薄いピンク文字は避け、淡いピンクパネルにブルーやチャコールの文字で柔らかく、読みやすくします。

AIでピンク×ブルーパレットのビジュアルを作る

もうHEXコードがある場合は、現実的なモックアップ（ポスター、ランディングページ、パッケージ写真やUI画面など）を数枚作って、色がどう見えるか確認しましょう。

Media.ioのText to Imageなら、上記のプロンプトを貼り付けてレイアウト比率を指定し、ライトやタイポグラフィスタイル、ムードを手早く試行できます。ピンク-ブルーの方向性も一貫して保てます。

各パレットでビジュアルを少数（3～5）作りましょう：ヒーロー画像、クローズアップ、文字中心レイアウト。この組み合わせでコントラスト問題を早いうちに発見できます。

次へ： ホワイトブラックカラーパレット