ブルー、グリーン、ピンクは意外にも万能なカラートリオです。彩度やコントラストによって、海辺のように穏やかで落ち着いた印象、洗練されたモダンな印象、あるいは大胆で夜の雰囲気を感じさせる仕上がりになります。
下記に、HEXコード付きのすぐに使えるブルー・グリーン・ピンクのカラーパレット20選を紹介します。さらに、UI、ブランディング、ポスター、パッケージでの実用的なガイドも掲載しています。
この記事の内容
ブルー・グリーン・ピンクパレットがうまく機能する理由
ブルーとグリーンはカラーホイールで隣接しているため、レイアウトでも自然と調和や「安定感」を感じさせます。そこにピンクを加えることで、強い中間色や濃い影を使わずに、注目を浴びるエネルギッシュなコントラストが生まれます。
この組み合わせはUIやブランドの役割にもぴったり当てはまります。ブルーは信頼や構造、グリーン／ティールはポジティブでフレッシュな状態、ピンクはバッジやセカンダリーCTA、マイクロインタラクションのアクセントに最適です。
パステル調、ミディアムトーン、ネオンでも展開できるため、ウェルネスやスキンケアからSaaS、イベント、ストリートウェアまで様々な業界で応用できます。
20種類以上のブルー・グリーン・ピンク配色アイデア（HEXコード付き）
1）ラグーンブラッシュ
HEX： #1d7fbf #24b3a8 #f26aa6 #f7e9f0 #0b2b3a
雰囲気： フレッシュ、海辺、明るい
おすすめ用途： ビューティーブランディングやSNSテンプレート
澄んだ水と夕日のような、フレッシュな海辺のエネルギーが感じられます。濃いネイビーをテキストカラーに使い、ティールとピンクでボタンやバッジ、ハイライトを彩りましょう。十分な余白とソフトなグラデーションのクリーンなレイアウトに最適です。コツ：ピンクは小さなアクセントに絞り、ティールのシャープな印象を保ちましょう。
media.ioで生成したラグーンブラッシュの画像例
Media.ioは、ブラウザ上で動画・画像・音声の作成と編集ができるオンラインAIスタジオです。
2）ミンティバブルガム
HEX： #2a6fdb #66e3c4 #ff5fb7 #fff3fb #1f2a44
雰囲気： 遊び心、つややか、前向き
おすすめ用途： 子供向けアプリUIやオンボーディング画面
キャンディ包みやサマーステッカーのように遊び心がありつややか。エアリーな白寄りの背景を基調にし、明るいブルーを主要アクション、ミントを成功状態に。ピンクはトグル、ハート、進捗マーカーのようなマイクロインタラクションに輝きます。コツ：テキストは濃いスレートカラーで、パステル背景でも可読性を高めましょう。
media.ioで生成したミンティバブルガムの画像例
3）コーラルリーフポップ
HEX： #0e6ba8 #2ec4b6 #ff4d8d #ffd6e8 #ffb703
雰囲気： 明るい、トロピカル、エネルギッシュ
おすすめ用途： イベントポスターやポップアッププロモーション
珊瑚礁や日差しの水面、賑やかな音楽のような明るいトロピカルポップ。大胆なシェイプや力強いタイポグラフィとの相性抜群で、ゴールドのアクセントは見出しや日付に使うのがおすすめ。太めのサンセリフやシンプルなアイコンでビジュアルをすっきりと。コツ：オフホワイト紙に印刷するとネオン感を保ちつつ色が強すぎません。
media.ioで生成したコーラルリーフポップの画像例
4）シーフォームスタジオ
HEX： #2f5aa6 #3fc1b1 #e34f9a #f2f4f7 #20304a
雰囲気： 洗練、クリエイティブ、落ち着き
おすすめ用途： ポートフォリオサイトやエージェンシーデッキ
洗練されて落ち着いた雰囲気は、日差しが差し込むデザイン事務所のよう。背景はクールなライトグレーにし、ティールをセクション見出し、青をナビゲーションに使いましょう。マゼンタは1ページにつき1箇所のアクセントとして使うと個性が引き立ちます。コツ：グラデーションは控えめにし、クリアな余白を活かしてください。
media.ioで生成したシーフォームスタジオの画像例
5）キャンディコーストライン
HEX： #1f8acb #45d1b3 #ff7ab2 #ffe6f1 #2b2d42
雰囲気： 明るい、親しみやすい、フレンドリー
おすすめ用途： ウェディングサイトやRSVPページ
シーグラスとパステルキャンディのように軽やかで親しみやすい配色です。エアリーなブラッシュ背景でエレガントなタイポを際立たせ、ブルーやティールでメニューや区切り線など構造をまとめます。ピンクはRSVPボタンやモノグラム、小さな花モチーフに最適。コツ：ネームや日付にはチャコールを添え、全体をパリッと引き締めましょう。
media.ioで生成したキャンディコーストラインの画像例
6）ネオンガーデンパーティー
HEX： #0066ff #00d084 #ff2e88 #f9ff6a #111827
雰囲気： 大胆、ナイトライフ、高いインパクト
おすすめ用途： ストリートポスターやDJフライヤー
真夜中の空にネオンが映えるような、大胆なナイトライフのエネルギー。ダークな背景にし、ひとつのネオン色を主役に据えると最も効果的です。ライムは時間やQRコード、限定オファーに軽いハイライトとして活用。コツ：ソフトグローはヘッドラインだけに付け、要素ごとには控えてビジュアルノイズを防ぎましょう。
media.ioで生成したネオンガーデンパーティーの画像例
7）パステルアクアリウム
HEX： #7aa7ff #88f0d0 #ff9fd0 #f7f7ff #2f3a56
雰囲気： ソフト、幻想的、エアリー
おすすめ用途： スキンケアパッケージやラベル
泡が澄んだ水の中を漂うような、やわらかく幻想的な配色。淡い背景が軽やかさを保ち、濃いスレートは成分表示や細かな文字に最適。パステルブルーでブランドロゴ、ピンクはバッジや香り表示に。コツ：マット仕上げのパッケージと組み合わせると上質で優しい印象に。
media.ioで生成したパステルアクアリウムの画像例
8）トロピカルソルベ
HEX： #1982c4 #8ac926 #ff595e #ffca3a #6a4c93
雰囲気： サマー、楽しい、冒険的
おすすめ用途： 旅行広告やシーズンキャンペーン
夏らしく冒険心あふれる、フルーツシャーベットのような配色。明るいブルーを基軸に、グリーンやウォームカラーで目的地や値札、アイコンを彩りましょう。コーラルレッドは緊急CTAにも適し、威圧感が出ません。コツ：背景はシンプルにして、マルチカラーの躍動感を意図的に見せましょう。
media.ioで生成したトロピカルソルベの画像例
9）モダンマーメイド
HEX： #235789 #2ac3a2 #ff6fb5 #d7fff1 #0b1320
雰囲気： シャープ、オーシャニック、現代的
おすすめ用途： SaaSランディングページや機能紹介セクション
現代的でクリーン、ほんのり神秘的なオーシャンの雰囲気です。ヒーローヘッドラインにはほぼ黒を使い、ティールで機能強調やチャートに。ピンクはセカンダリーCTAや「新規」「ベータ」などバッジの強いアクセントに最適です。コツ：極薄の波状の背景シェイプを入れると奥行きが出て邪魔になりません。
media.ioで生成された現代的なマーメイドの画像例
10）クリーンクリニックフレッシュ
HEX： #3b82f6 #10b981 #fb7185 #f8fafc #334155
雰囲気： クリーン、信頼、落ち着き
おすすめ用途： 健康ダッシュボードと予約ページ
清潔で落ち着いた雰囲気は、明るいクリニックの新しいリネンと明確なサインのようです。このブルーグリーンピンクの配色は、十分な余白があると最も効果的で、ブルーがナビゲーションをサポートし、ティールが成功や完了を示します。優しいピンクは、注意喚起やハイライト、パーソナライズ用のアクセントに最適です。ヒント：ピンクは1つのコンポーネントスタイルに限定して、インターフェースの清潔感と安心感を保ちましょう。
media.ioで生成されたクリーンクリニックフレッシュの画像例
11）レトロプールサイド
HEX： #005f73 #0a9396 #ee9b00 #ff5d8f #e9d8a6
雰囲気： レトロ、陽気、リラックス
おすすめ用途： 夏のメニューとカフェ看板
レトロなサンシャインの雰囲気は、プールタイル、ストライプ柄の傘、冷たいドリンクを思わせます。ティールトーンはメインブロックやボーダーに、暖かいサンド色は全体をフレンドリーにまとめてくれます。ピンクは期間限定やスペシャル向けにアクセントとして使いましょう。ヒント：丸みのある書体と合わせると、よりビンテージ感が出ます。
media.ioで生成されたレトロプールサイドの画像例
12）サクラハーバー
HEX： #3a86ff #2ec4b6 #ffafcc #bde0fe #1b263b
雰囲気： 優美、ロマンチック、風通しが良い
おすすめ用途： 春のエディトリアルレイアウト＆ルックブック
優しく爽やかな雰囲気は、桜が明るいウォーターフロントを漂うようなイメージです。淡いスカイブルーが柔らかいカラムやマージンを作り、濃紺が本文を読みやすくします。ティールでルールやアイコン、引用を加え、ピンクは小さなハイライトやキャプションに使いましょう。ヒント：ネガティブスペースと細いラインを多く取り入れて、エアリーなマガジンの雰囲気を演出します。
media.ioで生成されたサクラハーバーの画像例
13）ペブル＆ペタル
HEX： #2b59c3 #7bdcb5 #f284b6 #e5e5e5 #6b7280
雰囲気： ソフト、落ち着き、モダン
おすすめ用途： インテリアムードボードとホームデコールショップ
滑らかな小石に小さな明るい花びらが乗ったように、柔らかく落ち着きのある雰囲気です。優しいグレーが配色を大人っぽく仕上げ、ホーム向けブランドに理想的です。ブルーで構成、ミントでフレッシュさを、ピンクはラベルやタグの小さなディテールとして活用しましょう。ヒント：リネンやライトオークなど自然素材を取り入れると、暖かみのあるパレットになります。
media.ioで生成されたペブル＆ペタルの画像例
14）オーシャニックキャンディ
HEX： #006ba6 #00c2a8 #ff4fa3 #f1f5f9 #0f172a
雰囲気： シャープ、モダン、ハイコントラスト
おすすめ用途： テックブランディング＆アプリアイコンシステム
シャープで現代的なコントラストは、冷たい海風にカラフルなキャンディが加わったような印象です。ほぼ白い背景でシャープさを出し、濃紺が文字やアイコンを目立たせます。システム状態やグラフにはティールを、ピンクはアイコン全体のブランドアクセントとして活用します。ヒント：アイコンにはフラットな塗りを使い、小さなサイズでもクリーンさを保ちましょう。
media.ioで生成されたオーシャニックキャンディの画像例
15）アートスクールミックス
HEX： #1e40af #22c55e #ec4899 #fef3c7 #111827
雰囲気： クリエイティブ、大胆、実践的
おすすめ用途： ワークショップチラシ＆クラススケジュール
クリエイティブで大胆、スタジオの壁に貼られた絵の具の色見本のような雰囲気です。このブルーグリーンピンクの配色は、温かみのある紙のトーンとよく合い、デジタル感を和らげて手作りのように感じさせます。カテゴリー分けにはグリーン、構成にはブルー、サインアップや早割など重要な場面にはピンクを使いましょう。ヒント：遊び心のあるフォントは1つに絞り、それ以外はシンプルにまとめるとクリアな印象です。
media.ioで生成されたアートスクールミックスの画像例
16）ソフトスパデイ
HEX： #4f9cf0 #5eead4 #fda4af #faf5ff #475569
雰囲気： 癒やし、繊細、リラックス
おすすめ用途： ウェルネスニュースレター＆ランディングページ
温かい蒸気、冷たい水、ピンクのタオルのような癒やしと繊細さが感じられます。ラベンダーホワイトのベースはセクション全体を柔らかくし、ブルーとティールが見出しやボタンに視線を誘導します。ピンクは引用、推薦文、小さなアイコンなどに穏やかなアクセントとして最適です。ヒント：太いボーダーではなく、細い区切り線やソフトなシャドウを使いましょう。
media.ioで生成されたソフトスパデイの画像例
17）プレイルームスプラッシュ
HEX： #2563eb #34d399 #fb7185 #fef08a #1f2937
雰囲気： 明るい、元気、子ども向け
おすすめ用途： 誕生日招待状＆パーティ看板
元気で明るく、日差しの差し込む遊び部屋に積み木が散らばっているようなイメージです。メイン見出しには強いブルー、補助的な形やアイコンにはミントを活用。ピンクは名前やハイライトに甘さを添え、淡いイエローは紙吹雪のような細部にぴったりです。ヒント：太い線と大きな文字で印刷すれば、遠くからでも読みやすくなります。
media.ioで生成されたプレイルームスプラッシュの画像例
18）ストリートウェアパンチ
HEX： #0b5ed7 #00b894 #ff3f8e #c7f9cc #0b132b
雰囲気： 自信、都会的、エッジィー
おすすめ用途： アパレル新作＆商品広告
自信に満ちた都会的なイメージは、夜の街で目立つグラフィックのようです。このブルーグリーンピンクの組み合わせは、ダークな背景と高いコントラストが最も効果的で、濃紺のベース、シャープなブルーの文字、そしてホットピンクのポイントが特徴です。ミントはサイズや配送、小さなタグラインなど補助に使って柔らかさをプラスします。ヒント：レイアウトはミニマルにし、大きなグラフィック要素を一つ強調しましょう。
media.ioで生成されたストリートウェアパンチの画像例
19）ギャラリーカーム
HEX： #1d4ed8 #14b8a6 #f472b6 #f3f4f6 #111827
雰囲気： 落ち着き、洗練、現代的
おすすめ用途： クリエイティブポートフォリオ＆ケーススタディ
落ち着きがあり洗練された印象は、現代アートギャラリーに大きな作品が一つ飾られているようなイメージです。明るいグレーの背景がプロフェッショナルな雰囲気を保ち、ブルーとティールが自信を持った情報の階層を作ります。ピンクはリンクやホバー状態、注目プロジェクトなど、意図的なマーカーとして使うのが最適です。ヒント：大きな画像＋短いキャプションと合わせると、クリーンでエディトリアルな世界観が仕上がります。
media.ioで生成されたギャラリーカームの画像例
20）サンセットタイド
HEX： #0077b6 #2a9d8f #ff6fae #ffd166 #073b4c
雰囲気： 暖かい、楽観的、ビーチ
おすすめ用途： ボタニカルポスター＆春のイラスト
暖かく楽観的な雰囲気は、海に沈む最後の光のようです。濃いティールブルーで輪郭や文字をまとめ、明るいティールは葉や茎を彩ります。ピンクやゴールドのアクセントは花や果物、小さな装飾マークに最適です。ヒント：水彩の質感や柔らかなエッジにすると、有機的で自然な印象に仕上がります。
media.ioで生成されたサンセットタイドの画像例
ブルー・グリーン・ピンクに合う色は？
ニュートラルカラーは最適なベース：オフホワイト、ライトグレー、チャコール、ディープネイビーがブルーグリーンのベースを清潔に保ち、ピンクを意図的に活かせます。タイポグラフィは、明るい・パステル背景にはスレートやインク系の深い色が、純粋な黒よりも視認性が高いです。
より温かみを出したい場合は、サンド、バターイエロー、柔らかいゴールドでティールとブルーのクールさを和らげましょう。より目立たせたい場合は、少量のライムや明るいイエローを使って強力なコールアウトを作れますが、ピンクと競合しないよう控えめにしましょう。
上質な仕上がりにするなら、自然素材（紙、リネン、ライトウッド）や微妙なグラデーションと合わせると効果的です。プリントやパッケージで"デジタル過ぎる"雰囲気を防ぎます。
ブルー・グリーン・ピンク配色をリアルなデザインで活用する方法
まずは役割分担から：1つ「構造」色（多くはブルー）、1つ「状態」色（成功・完了・確認のグリーンやティール）、ピンクはサブのCTAやハイライト、ホバーなどアクセント専用に。全要素が同じくらい強くならないように注意しましょう。
彩度と余白の管理：パステル配色は広めの余白・細い区切り線が効果的、ネオン配色は暗い背景＋1画面の要素数を少なめに。印刷ではオフホワイト用紙やマット仕上げで彩度や光沢の過剰を避けましょう。
アクセシビリティ維持にはコントラストチェックが重要です。特にピンクの文字を明るい背景や、ティールを白地に載せるときは要注意です。迷ったら本文はディープネイビーやスレートを、鮮やかな色は形やアイコン、UIコントロールに限定すると良いでしょう。
AIでブルー・グリーン・ピンク配色ビジュアルを作成する
ブランド提案やUIムードボードを作る際は、素早くパレットを反映したビジュアルを生成することで関係者が一目でコンセプトを理解できます。最速のアプローチは、シーンを記述して、クリーンな構成にし、アクセントやラベル、背景でパレットを参照することです。
一貫性を保つには、単一のプロンプト構造を再利用し、主題（ポスターやパッケージ・ランディングページ・アイコンセット）のみ変更し、数パターンを書き出して、階層性とコントラストが優れているものを選びましょう。
ブルーグリーンピンク配色に関するFAQ
-
ブルーグリーンピンク配色が作り出す雰囲気は？
一般的に、フレッシュかつモダンな印象です。ブルーが信頼感と構造を、グリーン/ティールが明快さとポジティブさを、ピンクは彩度によって遊び心や高級感をもたらします。 -
UIデザインにブルーグリーンピンクは合いますか？
はい。ブルーは主要ナビゲーションやメインCTAに、ティール/グリーンは成功状態やサポート要素に、ピンクはサブのCTAやバッジ、ちょっとしたインタラクション用に活用すれば、可読性を保てます。 -
ティールとピンクがぶつからないようにするには？
コントラストと階層を管理します。片方を「主」アクセントにして、もう片方の使用面積を減らしましょう。濃紺やスレート系のベーステキスト色で両方を落ち着かせると、意図的な配色に見えます。 -
ブルーグリーンピンクに合うニュートラルカラーは？
オフホワイト、クールなライトグレー、チャコール、ディープネイビーが最も相性が良いです。パレットを安定させ、ウェブ・印刷のいずれでも可読性が向上します。 -
ブルーグリーンピンクをプロフェッショナルなブランディングに使えますか？
はい。中間調や控えめな色を選び、余白を十分にとりましょう。Seafoam StudioやGallery Calm、Oceanic Candyのようなパレットは、エージェンシー、ポートフォリオ、テックブランドに特に適しています。 -
ブランドシステムで色を割り当てる簡単なルールは？
ベース（背景＋テキスト）、メインブランド色（多くはブルー）、機能色（ティール/グリーン）、シグネチャーアクセント（ピンク）を選びます。ピンクが使われる場所（リンク、バッジ、セカンダリーボタンなど）は統一しましょう。 -
パレットに合わせた画像を素早く生成するにはどうすればいいですか？
一貫したテキストから画像へのプロンプトテンプレートを使用し、「パレットに合わせた色」と指定してください。そして3～6パターンで繰り返してみましょう。これはモックポスター、パッケージショット、ランディングページ、アイコンセットに最適です。
次へ： イエローティールカラーパレット
