ブルーグリーンのカラー配色20選｜配色コード＆AIプロンプト

ブルーグリーン は落ち着いたブルーと爽やかなグリーンの中間に位置し、最も扱いやすいカラーファミリーの一つです。

以下は厳選された20以上の ブルーグリーンの配色 とHEXコード、さらにUI、ブランディング、印刷、SNSデザインのための実用的な組み合わせのヒントです。

ブルーグリーンのパレットがうまく機能する理由

ブルーグリーンパレットは、ブルーの信頼性と安定感、グリーンの躍動感や自然なエネルギーを融合するため、自然とバランスが取れています。その結果、「清潔感」があるが、無機質には見えないカラーファミリーとなっています。

様々なシーンで使いやすいのも特徴です。ディープティールはヘッダーやナビゲーションの構造を強調し、ミントやシーフォームはモダンなレイアウトの余白を生み出します。ブルーグリーンは、UIシステムやブランドキットにも非常に信頼できる色です。

さらに、ブルーグリーンはクール系・ウォーム系どちらのアクセント色とも調和するので、サロン風の落ち着いた雰囲気からネオン風のテック感まで、サポートカラーを一つ二つ変えるだけで印象を調整できます。

20種類以上のブルーグリーンカラーパレットアイデア（HEXコード付き）

1）コースタルカーム

HEX： #0B7285 #2EC4B6 #A7F3D0 #E6FFFA #0B1320

ムード： 穏やか・爽やか・清潔感

最適な用途： ウェルネス系LPやスパブランディング

夜明けの静かな海岸線のように穏やかで爽やかな色調で、冷たすぎず清潔に感じられます。深いティールを基調色にし、ミントやシーフォームで余白を演出しましょう。温かみのあるサンドやソフトコーラルと組み合わせれば、やさしいコントラストが生まれます。コツ：本文はダークネイビーの上で可読性を保ち、淡いアクアはセクションやカードに使いましょう。

media.ioで生成したコースタルカームのイメージ例

Media.io

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

今すぐ無料で試す

2）ディープラグーン

HEX： #003B46 #07575B #66A5AD #C4DFE6 #0A0F14

ムード： ムーディー・没入感・シネマティック

最適な用途： テックブランディングやダークモードダッシュボード

夕暮れのラグーンのようにムーディーで没入感のあるセット。深いグリーンやブルーティールはダーク系UIに美しく映え、ミスティシアンはデータやラベルを鮮明に見せてくれます。ブルーグリーンのパレットは、ブラッシュドシルバーやチャコール、少量のライムを合わせるとステータスアクセントにも最適。コツ：最も淡い色はチャートや区切り線に使うことで、インターフェイスが煩雑にならず落ち着きます。

media.ioで生成したディープラグーンのイメージ例

3）シーグラスミニマル

HEX： #1B9AAA #84DCC6 #D9FFF5 #F7F7FF #2D3047

ムード： 軽やか・モダン・エアリー

最適な用途： ミニマルブランドのアイデンティティやステーショナリー

日差しに晒されたシーグラスのように軽やかで洗練された色調。鮮やかなティールはロゴや見出しに、淡いアクアはレイアウトの余白に使いましょう。オフホワイトの紙質感やグラファイトインクの色味を合わせると甘さを回避できます。コツ：印刷物ではティールをやや抑えて、ポイント使いすると上品に仕上がります。

media.ioで生成したシーグラスミニマルのイメージ例

4）トロピカルリーフ

HEX： #006D77 #83C5BE #EDF6F9 #FFDDD2 #E29578

ムード： 遊び心・晴れやか・バカンス気分

最適な用途： 旅行広告やSNSグラフィックス

リゾートのような陽気さと遊び心がバランスよくミックスされた配色。ティールで安定感を出しつつ、コーラルやサンドでアクションボタンが際立ちます。シンプルなサンセリフ体や鮮やかな写真と組み合わせると、元気な雰囲気に。コツ：コーラルはボタンやバッジにポイント使いして全体感はフレッシュさを保ちましょう。

media.ioで生成したトロピカルリーフのイメージ例

5）アークティックミント

HEX： #0E7490 #22C1C3 #B8F2E6 #F0FDFA #111827

ムード： クリア・爽やか・高い視認性

最適な用途： プロダクトUIやオンボーディング画面

極地のようにクリアで爽やかなトーンは視認性を重視した設計向き。クールなティールは自信を感じさせ、アイシーミントは明るく広がりのある背景を演出できます。深めのスレート色のテキストやアンバーなど温かい差し色をプログレス状態に使いましょう。コツ：ミントはさりげないグラデーションでセクションを区切るとスッキリします。

media.ioで生成したアークティックミントのイメージ例

6）レイニーハーバー

HEX： #0F4C5C #1B6B73 #5BC0BE #D8F3DC #2B2D42

ムード： 落ち着き・安定感・プロフェッショナル

最適な用途： 企業プレゼンテーションや報告書

小雨の港のように落ち着いていて、堅すぎずプロフェッショナルな印象の色合いです。ダークティールはヘッダーやグラフ、ソフトなグリーンティントは表や強調部分にどうぞ。クールグレーや余白多めでスライドの読みやすさもアップします。コツ：グラフは2トーンに絞り、淡いミントをセカンダリ系列に使いましょう。

media.ioで生成したレイニーハーバーのイメージ例

7）ボタニカルブリーズ

HEX： #1F7A8C #53B8A5 #CDEAE5 #F6FFF8 #2E3A59

ムード： フレッシュ・ナチュラル・優しい

最適な用途： 植物イラストや春のキャンペーン

朝露にしっとり濡れた葉のように自然で前向きな雰囲気。ミドルティールは茎やアウトラインに、ペール系は水彩のウォッシュに最適です。落ち着いたクレイや柔らかいオークルと合わせるとよりナチュラルに。コツ：一番濃いトーンは繊細なディテールに控えめに使いましょう。

media.ioで生成したボタニカルブリーズのイメージ例

8）レトロプールサイド

HEX： #0077B6 #00B4D8 #90E0EF #CAF0F8 #2A9D8F

ムード： 楽しい・ノスタルジック・夏らしい

最適な用途： イベントフライヤーやレトロポスター

プールサイドのサウンドトラックのように、青やティールが夏っぽさを感じさせます。ビビッドシアンを大きな文字や図形に、シーフォームティントで奥行きを出しましょう。黒に近い輪郭線や、サンシャインイエローのポップを加えれば本格的なビンテージ感。コツ：最も明るい色はハーフトーンテクスチャでレトロ印刷の雰囲気を再現できます。

media.ioで生成したレトロプールサイドのイメージ例

9）スレートとティールのオフィス

HEX： #1D3557 #2A9D8F #A8DADC #F1FAEE #6C757D

ムード： スマート、安定、モダン

最適な用途： B2BウェブサイトとSaaSのブランディング

まるで明るいスタジオオフィスのようにスマートで安定したこの配色は、スレートブルーと自信に満ちたティールをバランスよく組み合わせています。コントラストが強いのでナビゲーションやボタンにも十分使え、明るいアクアがページを親しみやすく保ちます。このブルーグリーンの組み合わせは、くっきりとしたグリッドや細いアイコン線、ニュートラルな写真と特に相性抜群です。ヒント：主要アクションはティール、見出しはスレートトーンに設定し、明確な階層を作りましょう。

メディア.ioで生成したスレートとティールオフィスの画像例

10）オーロラナイト

HEX： #061A40 #0353A4 #00A6A6 #94D2BD #E9D8A6

ムード： エレクトリック、夢幻的、ハイコントラスト

最適な用途： 音楽ビジュアルと大胆なブランドキャンペーン

オーロラが暗い空に流れるようにエレクトリックで幻想的なこのパレットはコントラストが際立っています。深いネイビーがドラマチックな土台となり、ティールとミントがハイライトとアニメーション効果に輝きを添えます。タイポグラフィやバッジには柔らかなゴールドを合わせると、夜の雰囲気を保ちつつ温かみも加わります。ヒント：グラデーションは控えめかつ方向性を意識し、ネオンのような色味が画面上でバンド化しないようにしましょう。

メディア.ioで生成したオーロラナイトの画像例

11）マウンテンレイク

HEX： #0B3954 #087E8B #BFD7EA #F5F5F5 #1F2937

ムード： 静か、アウトドア風、バランス良く

最適な用途： アウトドアブランドとエディトリアル特集

静かな湖と松の木の下の水面のように、これらの色合いはバランスが取れて信頼感があります。見出しやナビゲーションには深いブルーティールを使い、淡いブルーグレーがページを開放的にします。温かみのあるタンレザーやマットブラックのハードウェアと合わせると、たくましさが加わります。ヒント：画像はやや彩度を落として、ティールが主役になるようにしましょう。

メディア.ioで生成したマウンテンレイクの画像例

12）フレッシュクリニック

HEX： #005F73 #0A9396 #94D2BD #E9D8A6 #F8FAFC

ムード： 安心感、清潔感、親しみやすい

最適な用途： 医療アプリや予約UI

明るいクリニックロビーのように安心感と清潔感のある色味で、ケアと明快さを伝えます。ティール系はボタンやタブに自信をもたせ、クリーミーなアクセントが全体を柔らかく仕上げます。このようなブルーグリーンの配色は、フレンドリーな丸みのあるコンポーネントやシンプルなラインアイコンと相性抜群です。ヒント：アラートやハイライトには暖かいクリームを使い、アクセシビリティを高めましょう。

メディア.ioで生成したフレッシュクリニックの画像例

13）サマーソルベ

HEX： #118AB2 #06D6A0 #C7F9CC #F1FAEE #FFD166

ムード： 明るい、若々しい、エネルギッシュ

最適な用途： スタートアップマーケやSNS用テンプレート

ソルベの盛り合わせのように明るく若々しく、エネルギーいっぱいだけれどクリーンな印象です。鮮やかなアクアとグリーンが見出しやステッカーに映え、淡いミントが背景を重く感じさせません。シンプルな黒タイポグラフィや丸みのある形状と組み合わせると、フレンドリーなブランドトーンに。ヒント：イエローはアイコンやプライスタグなどのアクセント程度に留め、涼しげなベースを邪魔しないようにしましょう。

メディア.ioで生成したサマーソルベの画像例

14）デニム＆ジェイド

HEX： #1E3A8A #0EA5A4 #34D399 #E0F2FE #0F172A

ムード： 自信、スポーティー、クリーン

最適な用途： スポーツブランドとアプリUIアクセント

デニムに翡翠のアクセサリーを合わせたように自信とスポーティさを感じさせ、ネオンに頼らず目立ちます。深いブルーで構造を作り、ティールやグリーンでハイライトやアクティブを演出。余白とシャープなタイポグラフィで、モダンでアスレチックな印象に。ヒント：グラデーションは最小限にし、小さなUI要素ではソリッド塗りで視認性を高めましょう。

メディア.ioで生成したデニム＆ジェイドの画像例

15）モダンスパストーン

HEX： #134E4A #2DD4BF #99F6E4 #F1F5F9 #A3A3A3

ムード： 禅、洗練、控えめ

最適な用途： ホテルブランディングとプレミアムスキンケア

滑らかな石と暖かい水辺のように禅的で洗練され、控えめで上質な印象を与えます。ダークなグリーンティールがラグジュアリーを、明るいアクアがフレッシュでモダンな印象を保ちます。ソフトグレーやリネン、ミニマルなセリフ体見出しと合わせると上品な仕上がりに。ヒント：中間のティールを小さなハイライトストロークに使い、デザインが静かで高級感を保つようにしましょう。

メディア.ioで生成したモダンスパストーンの画像例

16）オーシャンディープグラデーション

HEX： #001219 #005F73 #0A9396 #94D2BD #E9D8A6

ムード： 深み、なめらか、洗練

最適な用途： バックグラウンドグラデーションやヒーローセクション

透き通る海の深層を覗いたように深みとなめらかさを感じるこのセットは、グラデーション向きです。漆黒のようなブルーが奥行きを作り、ティールからミントへきれいに繋ぐことができます。暖かいクリーム色のハイライトやたっぷりの余白と組み合わせ、プレミアム感をプラス。ヒント：低価格ディスプレイでもグラデーションがバンド化しないように、僅かにノイズを足してみましょう。

メディア.ioで生成したオーシャンディープグラデーションの画像例

17）ネオンケルプHUD

HEX： #0B1320 #00BFA6 #00E5FF #2DD4BF #A7F3D0

ムード： 未来的、パンチ強め、ハイテク

最適な用途： ゲームオーバーレイやストリーミンググラフィックス

海中の光に照らされた発光HUDのように、これらの明るい色は暗い背景で即座に読み取れます。主な表示にはシアン、サブのメーターやフォーカスリングにはグリーン寄りのティールを使いましょう。ブルーグリーンの組み合わせは、モノスペース数字や細いラインアイコンと特にシャープに映えます。ヒント：グロー効果は控えめにし、まずコントラストでアクセシビリティを確保しましょう。

メディア.ioで生成したネオンケルプHUDの画像例

18）マリタイムエディトリアル

HEX： #0A2342 #2CA6A4 #BCECE0 #FAFAF9 #7C8DA6

ムード： クリーン、雑誌風、考え抜かれた

最適な用途： 雑誌レイアウトやブログの見出し

海洋誌のようにクリーンで思慮深いこの配色は穏やかで編集の行き届いた雰囲気。ネイビーで権威を持たせ、淡いティールが親しみやすさとモダンさを添えます。暖かいオフホワイト紙や細いグレールールと合わせて上質なエディトリアル感をプラス。ヒント：ティールはプルクォートやセクションラベルに活用し、コンテンツを主役にしつつ誘導してください。

メディア.ioで生成したマリタイムエディトリアルの画像例

19）アクアクラスルーム

HEX： #1D4ED8 #0EA5E9 #14B8A6 #A7F3D0 #F8FAFC

ムード： フレンドリー、明快、ポジティブ

最適な用途： 教育アプリや子ども向けUI

明るい教室の壁のようにフレンドリーでポジティブ、色味も明快で親しみやすいです。スカイブルーが見出しやナビを担当、ティール～ミントは補助的ハイライトや成功ステートに最適です。シンプルなイラストや丸みあるカードと組み合わせ、親しみやすさアップ。ヒント：長時間の表示画面では彩度をやや低めにし、目の疲れを防ぎましょう。

メディア.ioで生成したアクアクラスルームの画像例

20）サステナブルシーフォームパック

HEX： #0F766E #34D399 #BBF7D0 #F0FDF4 #1F2937

ムード： エコ、クリーン、信頼感

最適な用途： サステナブルなパッケージやDTC製品

新鮮なハーブやシーフォームのようにエコでクリーン、棚に並べても信頼感のあるセットです。濃いティールはロゴやキャップ、淡いグリーンはラベルの広い範囲に自然に馴染みます。クラフト紙のニュートラルやチャコールインクと合わせると、落ち着いたサステナブルな雰囲気に。ヒント：最も淡い色をラベルベースに使い、印刷コストや文字の鮮明さを維持してください。

メディア.ioで生成したサステナブルシーフォームパックの画像例

21）シーサイドウェディング

HEX： #0F5257 #5BC0BE #BFEDEF #FFF9F1 #D6CCC2

ムード： ロマンチック、エアリー、エレガント

最適な用途： 結婚式招待状とイベント一式

浜辺のセレモニーのようにロマンチックでエアリー、エレガントかつ柔らかな色合いです。ティールがモダンさを、アイボリーやサンドの温かみがクラシックな印象を与えます。繊細なセリフ体タイポグラフィやフローラルや波のミニマルなラインアートと組み合わせて。ヒント：フォイル加工はティールをやや濃いめにし、アイボリーを主役にするのが最適です。

メディア.ioで生成したシーサイドウェディングの画像例

ブルーグリーンと相性の良い色は？

ブルーグリーンはオフホワイトやクールグレー、チャコールなどのクリーンなニュートラルと自然に組み合わさり、モダンUIやエディトリアルレイアウトに最適です。ニュートラルがパレットの可読性を上げ、ティールトーンを圧迫感なく意図的に見せてくれます。

より暖かいコントラストが欲しい場合は、サンド・クリーム・テラコッタ・ピーチ・ソフトゴールドなどを試しましょう。暖かみあるアクセントはCTAやハイライトを目立たせつつも、ナチュラルな印象に。特に海をイメージした配色と好相性です。

よりシャープでテック感を出したいなら、ライム・シアン・エレクトリックミントなどの高彩度アクセントを少量加えてみてください。バッジや状態、アイコンなどのマイクロアクセントとして使い、全体のバランスを保ちましょう。

実際のデザインでブルーグリーンのカラーパレットを使う方法

まず役割分担を決めましょう：タイポグラフィと構造用に濃いティールかネイビーを1色、主要アクション用に中間ティール1色、そして表面・カード・セクション背景用に淡いミントを1～2色選びます。

アクセシビリティは早いうちから優先して考えましょう――ティールは暗く感じても「中間コントラスト」になりやすい色です。ボタンテキストや本文は選んだサーフェスでテストし、最も明るい色味はテキストではなく背景に使うのがおすすめです。

最後に「温度感」を決定しましょう：クールなパレットはクリニカルでモダン、クリーム・ピーチ・サンドを足すと同じティールでも親しみやすくライフスタイル志向に感じられます。

AIでブルーグリーンパレットのビジュアルを作成する

これらのブルーグリーンのHEXコードを実際のレイアウトに当ててみたいですか？AIプロンプトを使えば、マッチするUIモックアップやポスター、パッケージ、ブランドシーンを数分で生成できます。

Media.ioなら素早く試せるので、ティールのアンカーを入れ替えたり、彩度を調整したり、バリエーションを並べてブランドや製品に最適なパレットを作れます。

次へ： ネオングリーンカラーパレット