おすすめのグリーン×ライトブルーパレット21選【Hexコード・デザイン例付】

グリーンライトブルーは、ミンティなグリーンと軽やかなブルーの間に位置しており、最もデザインしやすい色ファミリーの一つです。コントラストやアクセント次第で、海岸風でリラックスした雰囲気、清潔感のあるクリニカルな印象、大胆でテクノロジー的な雰囲気にも変化します。

以下はHEXコード付きのグリーンライトブルーカラーの20種類以上の組み合わせと、UI、ブランディング、印刷での実用的な使い方です。

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

グリーンライトブルーパレットは、自然に落ち着き、明快さ、そして清潔感を伝えます。ブルーの信頼感とグリーンのフレッシュさを取り入れているため、ウェルネスブランディングからモダンなソフトウェアUIまで幅広くマッチします。

また、さまざまなサーフェスにも柔軟に適応します。淡い色合いは広い背景にも重たくならず使用でき、深みのあるティールやネイビーはタイポグラフィやCTAを確実なコントラストで引き締めます。

最も重要なのは、グリーンライトブルーはアクセントも自在に調整できること。一色でミニマルにまとめるも良し、ウォームカラー（サンド、コーラル、シトラスなど）を加えて活気を出しつつ、ベースの癒しを損なわずに使えます。

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

1）コースタルミントブリーズ

HEX： #D7F4F1 #9EE7E4 #66D1D8 #2FA7B3 #1F3B4D

ムード： 軽やか、新鮮、海岸風

おすすめ用途： ウェルネス系ランディングページUI

軽やかで海岸風、この配色は淡い砂に海の霧がかかったような、爽やかで清潔感のある仕上がりです。ウェルネスブランドやスキンケア、穏やかなオンボーディング画面におすすめ。余白と深いスレートをタイポグラフィに合わせてコントラストを確保しましょう。ヒント：一番濃い色はボタンやCTAに使い、グラデーションは控えめに。

media.ioで生成したコースタルミントブリーズの画像例

Media.io

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

今すぐ無料で試す

2）シーフォームスタジオ

HEX： #E9FBF7 #BFF3EA #86DAD0 #4CB7B6 #2B5A63

ムード： クリーン、モダン、スパのよう

おすすめ用途： スキンケア商品のパッケージ

クリーンでスパの雰囲気、新鮮なシーフォームと磨かれたストーンの印象です。ミニマルなラベル、原材料リスト、上質な箱に最適。背景にマットなクリーム色を加え、ブランドマークにはティールの中間色がおすすめ。ヒント：一番濃い色を小さな法定文などに使うと印刷で薄くならず安心です。

media.ioで生成したシーフォームスタジオの画像例

3）グラスラグーン

HEX： #E6FFFB #A7F3E8 #6EE7D8 #34C6C3 #164E63

ムード： 明るい、トロピカル、洗練された

おすすめ用途： アプリダッシュボードUI

明るく洗練されており、クリアなラグーンの水と先進的なテック感をイメージさせます。淡い色がダッシュボードの読みやすさを保ち、深いブルーグリーンがナビエリアの基準色に。表やアイコンにはニュートラルグレーを合わせ、アクア色でアクティブ状態を目立たせましょう。ヒント：グラフのアクセントは2色以内に絞ると見やすくなります。

media.ioで生成したグラスラグーンの画像例

4）ミントとスカイのペアリング

HEX： #EAFCFB #B8F1F0 #79D4E0 #3AA8C1 #1D2D44

ムード： 高揚感、爽やか、楽観的

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

高揚感と爽やかさ、高い空の下の開けた水辺のようです。トラベルフライヤー、夏のキャンペーン、フレッシュ感が欲しいイベントヘッダーに最適。太めのサンセリフ書体を併用し、画像は淡くして配色が主役になるように。ヒント：ネイビーの色はヘッドラインに使うと印刷でもコントラストが明瞭です。

media.ioで生成したミントとスカイのペアリング画像例

5）アクアペブルニュートラル

HEX： #F3FFFE #CFEFEB #94D9D5 #5FB9B8 #3B3F46

ムード： バランスが良い、落ち着く、プロフェッショナル

おすすめ用途： 企業向けピッチデック

バランスよく落ち着いた色合いで、アクアガラスと滑らかな小石グレーが印象的。ニュートラル基調が資料をプロ仕様にし、ティールのアクセントが信頼感と明瞭さをプラス。区切り線やアイコンはライトグレー、シンプルな構成を推奨。ヒント：中間色はセクションヘッダー、濃いグレーは本文に。

media.ioで生成したアクアペブルニュートラル画像例

6）アークティックプール

HEX： #F0FAFF #CDEFFF #8DD6F3 #3FB1D6 #0F3D4C

ムード： クール、すっきり、リフレッシュ

おすすめ用途： テックブログのヘッダー画像

クールでシャープ、北極のプールに日差しがキラキラ反射するような雰囲気。淡いブルーがヘッダーを軽快に、深いティールがタイポグラフィのコントラストとなります。モノクロのラインアイコンや、アクセントボタンをひとつ使えば現代的なエディトリアルに。ヒント：背景は白を生かし、彩度の上げすぎに注意。

media.ioで生成したアークティックプール画像例

7）ラグーンサイトラスポップ

HEX： #E8FFFB #9FF2E3 #4FD3C4 #2D93AD #FFD166

ムード： ポップ、活発、夏らしい

おすすめ用途： SNS向け広告クリエイティブ

ポップで夏らしく、ラグーンの水にシトラスを絞ったかのような明るさ。ウォームなアクセントが冷たい色味に明るさをプラス、目を引く広告に最適。大胆なシェイプや短いコピーと合わせ、色で印象付けましょう。ヒント：黄色はポイント使いでバッジや値札などに。

media.ioで生成したラグーンサイトラスポップ画像例

8）ハーバルウォーターカラーミスト

HEX： #F4FFFC #D6F7ED #A8E2D1 #6DC2B6 #2D6A6A

ムード： 穏やか、ボタニカル、癒し

おすすめ用途： 春の植物イラスト

穏やかでボタニカル。朝露を浴びたハーブを思わせる配色。淡い色合いは春のイラストやパッケージアクセント、ライフスタイル系ブログアートにも最適。紙のテクスチャや繊細なラインでオーガニックな雰囲気に。ヒント：一番濃いグリーンブルーは茎や小さな影のみに使い奥行きを出します。

media.ioで生成したハーバルウォーターカラーミスト画像例

9）モダンクリニックカーム

HEX： #F7FFFE #D8F4F2 #A7E0E0 #63BFBF #134E5E

ムード： 安心感、衛生的、落ち着き

おすすめ用途： 医療予約UI

安心感があり衛生的で、フレンドリーな雰囲気の真っ白なクリニックのように感じられます。このグリーンライトブルーの配色は、フォームやカレンダー、ステータス表示を視覚的ストレスなくサポートします。丸みを帯びたUI要素や、サブテキスト用のニュートラルグレーと組み合わせてください。ヒント：エラーメッセージや重要なアクションには最も濃い色相を使うことで、明瞭さを保てます。

media.ioで生成されたモダンクリニックの穏やかなイメージ例

10) 雨の港

HEX： #E9F6FA #BFDDE7 #7FB8C9 #3D8FA3 #22313F

ムード：ムーディー、洗練、海洋

おすすめ用途：エディトリアル雑誌の見開き

ムーディーで洗練された雰囲気は、スチールブルーの水面と暗い船体のある雨の港を思わせます。抑えたトーンは、画像と文字が共存するエディトリアルレイアウトに最適です。オフホワイトの紙色や一本のアクセントラインと組み合わせて構造を作りましょう。ヒント：本文はチャコール色にすると、ページが淡くならず引き締まります。

media.ioで生成された雨の港のイメージ例

11) プールタイルコントラスト

HEX： #F2FFFD #B9F3EA #6FE1D8 #1FB6B0 #0B1320

ムード：大胆、クリーン、ハイコントラスト

おすすめ用途：SaaS料金プランページUI

大胆でクリーンな印象は、深夜の影に映える光沢あるプールタイルのようです。そのコントラストで料金プランや特徴が直感的に分かります。シンプルなアイコンや十分なスペーシングと組み合わせることで、洗練された雰囲気を保ちます。ヒント：ほぼ黒の色は見出しやボタンのみに使うと、ページ全体が軽やかに仕上がります。

media.ioで生成されたプールタイルコントラストのイメージ例

12) アイスミントミニマル

HEX： #FBFFFF #DFFAF6 #B4EEE7 #7FD2D2 #2F4858

ムード：ミニマル、軽やか、現代的

おすすめ用途：ブランドアイデンティティムードボード

ミニマルで空気感のある印象は、静かなミントグリーンの入った曇りガラスのようです。このグリーンライトブルーの配色は、アイデンティティボードや文具、シンプルなロゴ検討に最適です。暖かみのあるホワイト紙や抑えた書体と組み合わせてエレガントさを維持します。ヒント：ロゴにはグラデーションを使わず、フラットな塗りつぶしのみで統一感を持たせましょう。

media.ioで生成されたアイスミントミニマルのイメージ例

13) マリンクレイバランス

HEX： #E7FAF7 #AEE8DE #5FC6C0 #2D8F95 #C97C5D

ムード：落ち着き、職人風、現代的

おすすめ用途：陶器ブランドパッケージ

落ち着いた職人風で、マリンの爽やかさにクレイの暖色アクセントをミックスしています。寒色が現代的な印象を与え、テラコッタ色が手作り感をプラスします。未加工の紙やシンプルなスタンプグラフィックと合わせると本格的に。ヒント：暖色はシールや小さな柄にだけ使うと、特別感が際立ちます。

media.ioで生成されたマリンクレイバランスのイメージ例

14) オーロラスイム

HEX： #E8FFFE #B8FFF3 #75E7D6 #35B7C5 #1D3557

ムード：新鮮、輝き、スポーティー

おすすめ用途：フィットネスアプリのオンボーディング画面

新鮮で輝きのある雰囲気は、オーロラの下で朝泳ぐ感覚です。これらの色調は、エネルギッシュだけどきつすぎない演出が必要なオンボーディングフローに最適。シンプルなイラストや濃紺見出しと組み合わせて読みやすく。ヒント：進捗インジケータは明るいティールにして動き感を出しましょう。

media.ioで生成されたオーロラスイムのイメージ例

15) ジェントルグレイシャー

HEX： #F5FFFE #D2F1F4 #A0D6E2 #5FA7C5 #2B2D42

ムード：穏やか、涼しい、控えめ

おすすめ用途：プレゼンテーションテンプレートテーマ

穏やかで冷たい印象は、薄い雲越しに差し込む氷河の光を思わせます。グラフやアジェンダ、スピーカーノートが落ち着いて見えるスライドテーマに最適です。細い区切り線やモノクロアイコンと合わせてシステムを整頓しましょう。ヒント：セクションバーにはミッドブルーを使い、ストーリーの進行を誘導します。

media.ioで生成されたジェントルグレイシャーのイメージ例

16) ティールコットンキャンディ

HEX： #EFFFFB #B9F7E9 #63D6D0 #2B9FB8 #FFB4A2

ムード：陽気、若々しい、親しみやすい

おすすめ用途：カフェメニューポスター

陽気でフレンドリーな印象は、抹茶と淡いキャンディアクセントを並べたような感覚に。遊び心のあるコントラストは、カフェメニューや季節限定、軽やかなポスターにぴったりです。丸み書体やシンプルなイラストを合わせて親しみやすく。ヒント：暖色アクセントは価格や強調部分のみに使い、ベースカラーのクールさを引き立てましょう。

media.ioで生成されたティールコットンキャンディのイメージ例

17) ベイサイドコンクリート

HEX： #F1FBFF #CFEAF2 #8EC9D9 #4A9AB0 #5B6770

ムード：都会的、リラックス、現代的

おすすめ用途：不動産パンフレット

都会的でリラックス感のある雰囲気は、ベイサイドの空気と滑らかなコンクリートを想起させます。配色で物件パンフをモダンにしつつ、目に優しい仕上がりです。たっぷりとした余白や鮮明な写真と合わせて高級感を。ヒント：グレーは一貫してキャプション用に使うと、複数物件でも統一感が生まれます。

media.ioで生成されたベイサイドコンクリートのイメージ例

18) タイドプールネオンヒント

HEX： #E6FFFA #A7FCE0 #4FE3C1 #00B8D4 #102A43

ムード：ビビッド、テック系、自信

おすすめ用途：スタートアップ製品ヒーローセクション

ビビッドでテクノロジー感のある雰囲気は、鋭い日差しに照らされた潮だまりをイメージさせます。ヒーローセクションなど、クリーンなエネルギーと強いコントラストが必要なプロダクトUIにおすすめ。ダークモードブロックや明るいハイライト1色だけ組み合わせると効果的。ヒント：グラデーションは背景のみにして、UI部分はクリーンなまま残しましょう。

media.ioで生成されたタイドプールネオンヒントのイメージ例

19) ソフトアクアリウム

HEX： #F2FFFE #D1F7F4 #9CE6E7 #5FCBD0 #2C7A7B

ムード：やわらかい、親しみやすい、教育的

おすすめ用途：子ども学習アプリUI

やわらかく親しみやすい印象は、穏やかな光と静かな水の水族館を思い出させます。パステル系で子どもにも親しみやすく、それでいて現代的な雰囲気です。シンプルなキャライラストや丸みのあるカードで歓迎感を演出。ヒント：最も濃いティールはナビゲーションや重要なフィードバック用のみに使いましょう。

media.ioで生成されたソフトアクアリウムのイメージ例

20) リバーストーン＆ライム

HEX： #ECFFFB #B8F2E6 #5BC8AF #3A86FF #A7C957

ムード：冒険的、アウトドア、明るい

おすすめ用途：アウトドアイベントポスター

冒険心とアウトドア感があり、川石のような水にライムグリーンがアクセント。これらのグリーンライトブルー配色は、トレイルイベントやクリーンエネルギーキャンペーン、大胆なポスターロゴに最適です。太い文字やシンプルな等高線パターンでテーマを補強しましょう。ヒント：明るいブルーは2次アクセントのみにし、グリーン主体を保ちます。

media.ioで生成されたリバーストーン＆ライムのイメージ例

21) カームメリディアン

HEX： #F6FFFD #D9F8F0 #AEE7E0 #6EC5C2 #254E5F

ムード：落ち着き、信頼感、洗練

おすすめ用途：ファイナンスアプリUI

落ち着きがあり信頼感のある印象は、穏やかな水面の上を進むコンパスの糸のようです。安心感がありつつ冷たすぎないファイナンスUIにこの配色を活用してください。控えめな影や抑えたアイコン塗りで高級感を演出。ヒント：成功状態には中間のティールを、警告はニュートラルにして視覚的なストレスを避けましょう。

media.ioで生成されたカームメリディアンのイメージ例

グリーンライトブルーに合う色は？

グリーンライトブルーは、白やアイボリー、やわらかいグレーなどのクリーンなニュートラルと組み合わせると、レイアウトが軽やかで読みやすくなります。テキストや構造にはネイビー、スレート、チャコールなどの濃色で強いコントラストが得られますが、きつすぎる印象にはなりません。

コースタルな雰囲気がほしい場合は、砂色、ベージュ、流木ブラウンを追加してください。よりエネルギーを出すなら、コーラル、ピーチ、シトラスイエローのアクセントを少量使い、視線のポイントを作ります。

モダンなテック系にしたい場合は、グリーンライトブルーにほぼ黒と鮮やかなハイライト（エレクトリックシアンやネオンミント）を合わせます。これで配色がクリーンかつ動きを感じる仕上がりになります。

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

まず色ごとに役割を決めましょう：背景には一番明るい色味、カードやセクション、UI塗りには中間のティール、見出しやナビ・主ボタンにはダークブルーグリーンを使います。画面・ページ全体の階層が一貫します。

印刷の場合は広い面積を明るく保ち、濃色は本文用に使うことで仕上がりが濁りません。暖色アクセントを入れたい場合は、価格やバッジ、「新着」タグなどの要所だけに使い、全体は落ち着いたままにできます。

ブランディングシステムでは、バックグラウンド、表面、ボーダー、プライマリ、アクセントの少数トークンを作ると良いでしょう。ウェブ・SNS・パッケージ・テンプレート問わず、グリーンライトブルー配色を展開しやすくなります。

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

レイアウトにグリーンライトブルー配色をプレビューしたいなら、AIで簡易なモックアップを生成してください。ムードやコントラスト、アクセント位置を量産設計の前に把握できます。

同じパレットでシーン（UI/パッケージ/ポスター）やライティング・スタイル（フラットベクターかリアルなスタジオ）を変えて何パターンか作ってみましょう。リードさせる色、サポートする色がすぐ分かります。

次へ： ブルーエメラルドカラーパレット