グリーン、ブルー、ピンクは、意外にも現代的な印象を与える組み合わせです。グリーンはフレッシュさを、ブルーは信頼感を、ピンクは明確なアクセントをもたらします。その結果、UIやブランディング、印刷物、さらにはネオン風のデジタルレイアウトにも適した配色が生まれます。
ここでは、HEXコード付のグリーン・ブルー・ピンクのカラーパレット20種以上のアイデアと、それぞれの組み合わせ例や実際のプロジェクトでの使い方のポイントを紹介します。
この記事の内容
グリーン・ブルー・ピンクの配色がなぜうまくいくのか
グリーン・ブルー・ピンクの配色は、「クールな明瞭さ」と「人間的な温かみ」がバランスよく調和します。ブルーとグリーンは自然と清潔感や信頼感を感じさせ（特にUIやブランドに最適）、ピンクは注意を引く役割で、配色が無機質になりすぎるのを防ぎます。
また、様々なスタイルに柔軟に対応できます。3色を淡くすれば北欧風ミニマルUIに、彩度を上げればレトロやネオンに、パステルにすればソフトな招待状やライフスタイル系ブランドにもマッチします――コアの調和はそのままに。
実用的には、システム構築にも使いやすい配色です。読みやすさ重視ならネイビー／チャコールをテキストに、テールブルーは背景やコンポーネント用に、ピンクは主役アクション（CTAや強調、主要指標）専用で使い分けましょう。
グリーン・ブルー・ピンクのカラーパレットアイデア20選（HEXコード付）
1）ミント・ラグーン・ブラッシュ
HEX： #2EC4A6 #0B6FAE #FF6FAE #BFEFE6 #0F1B2D
ムード： フレッシュ、前向き、クリーン
おすすめ用途： アプリのオンボーディング画面
新鮮な海辺のエネルギーに、遊び心のあるブラッシュが重なり、浅瀬に差す光のような印象。グリーン・ブルー・ピンクのこの配色は、余白を広く取り、シンプルなアイコン形を活かしたデザインに最適です。読みやすさ重視なら濃いネイビーをテキスト色に、ピンクはメインのCTAのみで使いましょう。丸みのあるサンセリフ書体や、控えめなグラデーションと合わせるとモダンで親しみやすい雰囲気になります。
media.ioで生成したミント・ラグーン・ブラッシュのイメージ例
Media.ioは、ブラウザで動画・画像・音声を作成・編集できるオンラインAIスタジオです。
2）シーグラス・ローズ
HEX： #7BE0D1 #2B7BBB #F58FB0 #F3F7F8 #2A2F36
ムード： エアリー、コースタル、ソフト
おすすめ用途： ウェルネスブランド
エアリーなシーグラスカラーとやさしいローズ色は、穏やかな浜辺の朝のような雰囲気。クールブルーで信頼感を保ちつつ、ピンクであたたかみをプラス（甘すぎないのもポイント）。オフホワイトを大きな背景に使い、テール・ブルーで簡単なバッジを作ると◎。印刷ならピンクはシールやサブ見出しなど小さめアクセントにするとバランスが良いです。
media.ioで生成したシーグラス・ローズのイメージ例
3）トロピカル・バブルガム
HEX： #00C2A8 #0080FF #FF4FA3 #FFE8F2 #0A1020
ムード： ポップ、パンチが効いた、エネルギッシュ
おすすめ用途： サマーイベントポスター
トロピカルな元気さとバブルガムの可愛さで、良い意味で「派手」を実現。エレクトリックブルーで太字タイトル、大胆に使いましょう。日付やチケットはホットピンクで強調。淡いブラッシュの背景は視認性確保に役立ちつつテーマ性もキープ。シンプルな幾何学模様と極力影を消したデザインでノイズを減らすのがコツ。
media.ioで生成したトロピカル・バブルガムのイメージ例
4）ノルディックスプラウト
HEX： #7FD8B3 #3A7CA5 #F2A1B8 #E9EEF2 #1F2933
ムード： ミニマル、落ち着き、モダン
おすすめ用途： SaaSダッシュボードUI
淡いグリーンと和らいだブルーで、北欧のシンプルさを演出。ピンクは上品な差し色として、ステータスや小さなアラートに◎。カードやテーブルはライトグレーで統一し、ラベルやデータは濃いチャコールで。グラデーションは控えめにし、余白と階層構造でクリアに仕上げましょう。
media.ioで生成したノルディックスプラウトのイメージ例
5）キャンディケルプ
HEX： #2ED1A8 #1B5FA7 #FF7BB8 #FFF4F8 #12324A
ムード： 個性的、若々しい、鮮やか
おすすめ用途： スナックパッケージ
ユニークなキャンディの鮮やかさと海藻を思わせる色合いで、楽しくフレッシュな印象。ネイビーブルーはブランド信頼感やバーコード用に、ピンクはフレーバー表示に最適。ミントグリーンはイラストやパターンに合います。マット仕上げにピンクの小さなグロススポットバーニッシュを入れると棚で目立ちます。
media.ioで生成したキャンディケルプのイメージ例
6）プールサイドピオニー
HEX： #4EE3C1 #2D93D3 #FF5C9C #D7FBF4 #16324F
ムード： 晴れやか、社交的、アップビート
おすすめ用途： SNSプロモグラフィック
プールサイドの爽やかさと、ピオニーピンクのアクセントで、思わずシェアしたくなる雰囲気のレイアウトに。テールカラーで背景形を構成し、ピンクはフックラインに少しだけ使うのが効果的。テキストは濃いスレートで、明るいパーツとのコントラストを確保。2カラムグリッド＆大きなバッジ1つのシンプル構成がおすすめ。
media.ioで生成したプールサイドピオニーのイメージ例
7）セージ・デニム・ピンク
HEX： #86CFA8 #2B5B8C #F28BAA #F6F2EE #2B2B2B
ムード： 落ち着き、暖かみ、親しみやすさ
おすすめ用途： ハンドメイドショップブランディング
落ち着いたセージとデニムブルーは、お気に入りのジャケットのような印象で、やわらかなピンクが温かみを足します。クリーミーなニュートラルが全体をほっこりとまとめ、特にラベルやタグにおすすめ。ブルーはロゴやナビに、ピンクはセールシールやイラストのワンポイントに限定すると上品な仕上がりに。テクスチャ紙や細かいグレイン重ねでクラフト感も演出できます。
media.ioで生成したセージ・デニム・ピンクのイメージ例
8）アロエ・スカイ・ソルベ
HEX： #6FE7B8 #5BA7FF #FF93C7 #FFFFFF #1B2A41
ムード： 軽やか、親しみやすい、エアリー
おすすめ用途： メールニュースレター
明るいアロエグリーンとスカイブルーは、クリアでフレンドリーな印象。ソルベピンクがやさしく背中を押してくれます。白をメインキャンバスに、細いテールラインでセクション分け。見出しはネイビーでメリハリを、ピンクはボタンや小さなアイコン向き。写真を使う場合は明るいハイキーなものを選んで、配色のエアリー感を保ちましょう。
media.ioで生成したアロエ・スカイ・ソルベのイメージ例
9）エメラルド・シアン・ペタル
HEX： #19C37D #00A3C7 #FF6B9B #EAFBF4 #0B2239
ムード： 自信、鮮やか、コンテンポラリー
おすすめ用途：テックブランド ランディングページ
自信に満ちたエメラルドとシアンは、ガラスのようなUIハイライトのようにシャープで現代的な印象を与えます。ピンクの花びらは、プロフェッショナルな雰囲気を損なうことなく個性をプラスします。ダークネイビーは長文やフッターに使用し、シアンはリンクやインタラクティブな状態を担当させます。ピンクは主要なコンバージョンアクション1つだけに用いて、特別感を保ちましょう。
media.ioを使用して生成したエメラルドシアンペタルの画像例
10）フォレスト アジュール フューシャ
HEX： #1FAE6B #1D74B8 #D948A8 #F2F6F8 #102235
ムード：大胆、クリエイティブ、高コントラスト
おすすめ用途：音楽フェスティバル フライヤー
大胆なフォレストグリーンとアジュールが高いコントラストの舞台を作り、フューシャのアクセントがエレクトリックな印象を与えます。明るい色は大きなブロックに使い、背景は淡く保って混ざり合いを避けましょう。ディープネイビーはテキストオーバーレイやスポンサー行に最適です。より強い印象をつくるには、セクションごとに2色をメインにして、3色目はスポットライトとして使いましょう。
media.ioを使用して生成したフォレストアジュールフューシャの画像例
11）ソフト抹茶ウェーブ
HEX： #A6E3B9 #6FB7D6 #F7A3C4 #F9FAF6 #364152
ムード：やさしく、心地よい、パステル
おすすめ用途：ベビーシャワー招待状
やわらかな抹茶とスカイブルーが穏やかな水彩の波のように重なり、可愛いピンクで仕上げます。タイポグラフィは軽やかにし、チャコールは名前や詳細用に使いましょう。パステルトリオは花のラインアートや控えめな紙のテクスチャにぴったり。招待状のフチをブルーでまとめ、ピンクはハートやリボンなどの小さなアイコンに使うのが良いアドバイスです。
media.ioを使用して生成したソフト抹茶ウェーブの画像例
12）レトロ マイアミ ガーデン
HEX： #00D39F #2E7BFF #FF3FA0 #FFF0F6 #101828
ムード：レトロ、ネオン風、楽しい
おすすめ用途：ストリートウェア ルックブック表紙
レトロマイアミのエネルギーを、高彩度のティールとエレクトリックブルーが伝え、キャンディピンクがやわらげます。ライトブラッシュは余白として使い、カバーがネオン風になりすぎるのを防ぎましょう。ほぼ黒は見出しや小さなテキストを引き締めます。シンプルなハーフトンドットやストライプを加えてヴィンテージ感を出しつつ、ごちゃごちゃしないようにしましょう。
media.ioを使用して生成したレトロマイアミガーデンの画像例
13）ロータス ラグーン
HEX： #34D399 #38BDF8 #FB7185 #F1FFF8 #0F172A
ムード：爽やか、クリーン、前向き
おすすめ用途：スキンケア商品広告
爽やかなラグーンブルーとロータスのようなピンクが清潔感と潤い、前向きな雰囲気をもたらします。このグリーン・ブルー・ピンクのカラーパレットはミニマルなパッケージングと余裕のある構成にぴったり。ミントグリーンで爽やかさを演出し、ピンクは「保湿」や「ツヤ」などの小さなアピールに用います。照明は明るく、影は柔らかくしてスパのような印象をキープしましょう。
media.ioを使用して生成したロータスラグーンの画像例
14）グレイシャーブルーム
HEX： #7AE7C7 #6AA6FF #FFA0C5 #F6FBFF #223046
ムード：クール、洗練、モダン
おすすめ用途：プレゼンテーションスライドテーマ
クールな氷河トーンは洗練されてモダンな雰囲気を出し、ピンクのアクセントで冷たくなりすぎるのを防ぎます。ほとんどのスライドには淡いアイシーな背景を使い、セクション見出しにはブルーを使いましょう。ティールはチャートによく合い、ピンクは突出した指標や強調に最適です。アイコンは細いラインで、グラデーションは控えてクリーンなデッキにしましょう。
media.ioを使って生成したグレイシャーブルームの画像例
15）ボタニカル ポップ
HEX： #22C55E #0EA5E9 #F472B6 #ECFDF5 #14532D
ムード：元気、植物的、明るい
おすすめ用途：水彩フローラルイラスト
元気なボタニカルグリーンと澄んだ空色が、遊び心のあるピンクの花と共に映えます。グリーンは葉のかたまり、ブルーは影付きの花びらや背景のウォッシュに使いましょう。ピンクは焦点となる花だけに絞って、全体に散らすより効果的です。バランスとしてミント系の余白をたっぷりと入れ、イラストが軽やかに仕上がるようにしましょう。
media.ioを使って生成したボタニカルポップの画像例
16）スタジオ パステル パンチ
HEX： #63E6BE #74C0FC #FAA2C1 #FFF7FA #1C1F26
ムード：クリーン、トレンド感、スタジオのような明るさ
おすすめ用途：コスメパッケージラベル
クリーンなスタジオパステルにパンチの効いたピンクアクセントで、トレンド感とエディトリアル感を両立。ラベルベースにはライトブラッシュを使うことで製品名の可読性を確保。成分表にはブルー、ヴィーガンやクルエルティフリーの副マークにはティールを使いましょう。細いブラックタイポが全体をシャープかつ高級に保ちます。
media.ioを使って生成したスタジオパステルパンチの画像例
17）ネオン アクアリウム
HEX： #00F5D4 #00BBF9 #F15BB5 #0B1320 #F8FAFF
ムード：ネオン、未来的、ナイトライフ
おすすめ用途：ゲーミング配信オーバーレイ
ネオンアクアリウムの雰囲気は未来的で少し夜っぽく、ハイエナジーな画面に最適です。ディープなほぼ黒をベースにして、ティールとブルーの光を最大限引き出します。ピンクはライブアラートや新フォロワー、アクティブシーンのラベルなどに活用。ストロークは極太＆シンプルにして、映像での色にじみを防ぎましょう。
media.ioを利用して生成したネオンアクアリウムの画像例
18）カーム クリニック UI
HEX： #5FE3B2 #4B9FE6 #F49AC2 #F4F8FB #2B3A55
ムード：安心感、クリニック的、落ち着き
おすすめ用途：医療用WebアプリUI
安心感あるクリニックの落ち着きは、やわらかなブルーの基調と優しいミントのサポートから生まれます。ピンクはヒューマンタッチとして診察予約のハイライトやフレンドリーな空白に最適です。プロフェッショナルな雰囲気を保つには、ピンクはUI全体の10%以下に抑えましょう。見出しにはスレート色、フォームエリアはクールグレー背景にして視認性を確保します。
media.ioを活用して生成したカームクリニックUIの画像例
19）エディトリアル スプリング スプレッド
HEX： #8BE6C1 #3B82F6 #FF8FB1 #FFFDF7 #111827
ムード：エディトリアル、明るい、洗練
おすすめ用途：雑誌レイアウト
鮮やかな春の新鮮さは、飽和ブルーと温かな紙白とのバランスで洗練された印象に。ティールは引用や細い区切り線、ピンクはセクションタブやページ番号に最適。グリーン・ブルー・ピンクの組み合わせは、セリフ見出しと最低限の写真ボーダーで特に映えます。1画面にアクセントを1色だけに絞ることで、エディトリアル感を損なわず遊びすぎないようにしましょう。
media.ioで生成したエディトリアルスプリングスプレッドの画像例
20）キッズ パーティー コンフェッティ
HEX： #4ADE80 #60A5FA #FB7185 #FFF7ED #1F2937
ムード：陽気、子供向け、明るい
おすすめ用途：バースデーパーティー招待状
明るいグリーンとフレンドリーブルーに、サンゴピンクのアクセントで陽気なコンフェッティ感を演出。優しいクリーム色をベースに使うと、色がきつくなりすぎず親しみやすくなります。テキストはダークグレーで、大胆なトーンはバルーンやドット、大見出しだけに使いましょう。遊び心として切り紙風シェイプを加え、アウトラインは控えめにしてごちゃごちゃしないように。
media.ioを使ったキッズパーティーコンフェッティの画像例
21）ハーバー ブロッサム
HEX： #2DD4BF #2563EB #F472B6 #F8FAFC #0F172A
ムード：新鮮、海の雰囲気、洗練
おすすめ用途：レストランメニューデザイン
海辺のハーバーブルーが洗練された印象を与え、桜色がモダンで温かみのある雰囲気をプラスします。背景はほぼホワイトにして読みやすくし、ティールは区切り線やアイコンに活用。ブルーは見出しや価格に、ピンクはスペシャルや季節のおすすめに使うのがおすすめ。シンプルな2カラム構成と充分な行間で見やすいメニューになります。
media.ioを使用して生成したハーバーブロッサムの画像例
22）アクア ローズ クレイ
HEX： #3DDC97 #1FA2FF #FF6FAE #F3E7E1 #22313F
ムード：モダン、温冷バランス、おしゃれ
おすすめ用途：ホームデコ商品広告
アクアのトーンとローズのアクセント、陶器のようなニュートラルカラーを組み合わせることで、おしゃれな温冷バランスを実現します。このグリーン・ブルー・ピンクの組み合わせも、クレイカラーを基調にすることで大人っぽい印象に。見出しにはブルー、サポート的な形にはティール、小さなアクセントだけピンクを加えましょう。写真撮影では陶器やリネンのようなマットな質感を選ぶと、より上質に見せられます。
media.ioを使って生成したアクアローズクレイの画像例
グリーン・ブルー・ピンクによく合う色は？
ニュートラルな色（白、オフホワイト、明るいグレー）は、グリーンやブルーの面をクリーンに保つのに最適です。一方、チャコールやネイビーは本文を読みやすくします。ピンクが明るい場合は、ダーク系のニュートラル（ほぼ黒）を合わせるとお菓子っぽくならず意図的な印象になります。
より深みを出すには、グリーンとピンクを橋渡しする色（モーヴ、ダスティローズ、落ち着いたプラムなど）を加えるのがおすすめです（エディトリアルレイアウトに特に最適）。また、暖かいクレイやサンド、クリーミーベージュもパレットを上質にし、テック系すぎる印象を和らげます。
よりエネルギッシュにしたい場合は、ネオンイエローや明るいオレンジをマイクロアクセントとして少量（アイコンやタグ、小バッジなど）用いるのも効果的ですが、ピンクのCTAとかち合わないよう稀に留めましょう。
グリーン・ブルー・ピンクのカラーパレットを実際のデザインで使うには
まず階層を作ることが大切です。メインになる背景色（多くはブルーか淡いミント）を選び、パーツの補色（カードやチャート、区切り線にはティールやグリーンなど）を加えます。ピンクは最後に、一つのアクションやハイライト用途だけに使いましょう。
UIの場合はコントラストを予測しやすく。テキストはダークスレート／ネイビー、土台はソフトニュートラル、アクティブ状態（リンクやホバーなど）には鮮やかなブルー・ティールを。ピンクはプライマリボタンや重要なアラート、または「ヒーローメトリック」の強調に特に効果的です。
印刷の場合、選択した用紙（コート紙か非コート紙）でピンクの再現性をテストし、インクの使用を控えめにする戦略を検討してください。大きな淡い背景、小さな鮮やかなブロック、そして十分なスペースを設けることで色のにごりを防ぎます。
AIでグリーン・ブルー・ピンクの配色ビジュアルを作成する
クライアントへの提案や迅速な反復作業では、パレットを孤立した色見本ではなく、実際の文脈（UI画面、ポスター、パッケージ、ブランドボード）で見ることが役立ちます。AIモックアップを使えば、色のバランスやコントラスト、「ピンクをどこで使うか」を実際に確認することができます。
上記のパレットのうち一つを選び、背景のニュートラルカラーを変更したり、ピンクの濃さ（ブリッシュやフューシャ）を入れ替えたりして、いくつかバリエーションを作成しましょう。レイアウトの種類やライティングスタイル、「デバイスフレームなし」のように、指定内容を具体的にすると、クリーンなデザインのみのアウトプットが得られます。
グリーン・ブルー・ピンクのカラーパレットに関するよくある質問
-
グリーン・ブルー・ピンクを、子供っぽい印象やキャンディ風に見せないにはどうすればよいですか？
タイポグラフィには深いニュートラル（ネイビーやチャコール）を使い、背景は柔らかいオフホワイトにし、ピンクは明確な一つの役割（通常は主なCTAか一つのアクセント）だけに絞って使いましょう。落ち着いたグリーンやブルーを選ぶと、パレットがよりモダンで洗練された印象になります。 -
グリーン・ブルー・ピンクのUIパレットでは、どの色をメインにすべきですか？
多くのインターフェイスでは、ブルーや淡いニュートラルをメインに、グリーンやティールを補助色として使い、ピンクは強調用に使うのがベストです。これにより、ビジュアルが落ち着きつつ重要なアクションが際立ちます。 -
プロフェッショナルなデザインでピンクを使う安全な割合は？
一般的なガイドラインとして、ピンクは構成の10%未満に抑えるのが目安です。特に医療・金融・SaaSのUIではこの比率が適しています。注目させたい箇所だけに使い、大きな背景としては使わないようにしましょう。 -
鮮やかなティール／ブルーの背景にはどんなテキストカラーが最適ですか？
これらのパレットでは、深いネイビーやほぼブラック（#0F172A～#111827の範囲）が読みやすさと一貫性を保ちます。特に小さなラベルやUIコントロールでは、アクセシビリティのためコントラストを必ず確認してください。 -
グリーン・ブルー・ピンクはチラシやメニューなどの印刷にも使えますか？
はい、可読性のために明るい背景（オフホワイト、ブリッシュ、クールグレー）を選び、鮮やかな色は小さなブロックで使いましょう。可能なら、ピンクが用紙やインクの状態で変化する場合があるため、テスト印刷をおすすめします。 -
グリーン・ブルー・ピンクに第4のアクセント色を追加する場合、どれが合いますか？
ウォームクレイやベージュは高級感やホームデコ風をプラスし、モーブやプラムは編集レイアウトに深みを与えます。エネルギッシュな印象にしたい場合は、ネオンイエローの極小アクセントも有効ですが、最小限に抑えてください。 -
これらのパレットを実際のレイアウトで素早く可視化するには？
AIのテキストから画像生成ツールで、レイアウトタイプ（ダッシュボード、ポスター、パッケージなど）やメイン／背景色を指定してモックアップを作成しましょう。その後、ピンクの濃さや背景ニュートラル、コントラストレベルなど一つずつ調整して反復します。
次に: ファンタジーカラーパレット
