Modern Lake Tones: 20 Color Palettes with Hex Codes for Design Inspiration

湖の色は青と緑の間の絶妙な領域に位置しているため、デジタルや印刷デザインにおいて落ち着きや新鮮さ、現代的な雰囲気を感じさせます。

以下に、HEXコード付きの20種類の湖のカラーパレット組み合わせと、UI、ブランディング、パッケージなどに使える実用的なヒントを紹介します。

なぜ湖のパレットはとてもよく機能するのか

湖をイメージしたパレットは、クールなブルー（信頼感、明快さ）とグリーン寄りのティール（健康、落ち着き）を組み合わせているため、自然にバランスが取れています。このミックスにより、無機質ではなく清潔な印象になり、モダンなUIやブランディングにも使いやすいです。

また、湖のパレットはライト・ダーク両方のデザインシステムにマッチします。多くのパレットは背景用の淡いミスティートーンと、対比用の濃いブルーグリーンを含み、はっきりした黒を使わずに階層を作ることができます。

さらに、湖のトーンはニュートラルや暖色のアクセントと美しく調和します。少しだけ砂色や銅色、ゴールドを加えると個性が生まれ、水のトーンが全体の印象を落ち着かせつつプロフェッショナルさを保ちます。

20種類以上の湖カラーパレットアイデア（HEXコード付き）

1) 霧の朝

HEX: #d9eef2 #a9d4dd #6aa9b8 #2f6f7c #f2f7f7

雰囲気： 軽やかで穏やか

おすすめ用途： ミニマルなSaaSダッシュボードUI

このクールなアクアや柔らかなティールには、空気のような朝霧や淡い光が現れます。SaaSダッシュボード、ウェルネスアプリ、クリアなデータ表示など、明快さが重要な場面に最適です。パリッとした余白と濃いダークティールを組み合わせることで強調を作れます。使い方のコツ：最も濃い色を主要なCTAに使うと、コントラストが確保できます。

media.ioによる霧の朝イメージ例

Media.io

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

今すぐ無料で試す

2) 深い入り江

HEX: #0b1f2a #0f3a4a #145e6f #1c8a9a #d4e9ea

雰囲気： ムーディーでシネマティック

おすすめ用途： プレミアムなブランディングやヒーローバナー

夕暮れ時の濃い水面が、インキーなブルーや濃厚なティールで自信とシネマ風な雰囲気を演出します。深みや権威が必要なプレミアムブランドやランディングページ、テック系プロダクトにも。重みのあるベースと淡いブルーグリーンとを合わせると、見出しの余白になります。使い方のコツ：中間のティール間でさりげないグラデーションを加えると、洗練された現代的な輝きを生みます。

media.ioによる深い入り江イメージ例

3) 小石の岸辺

HEX: #f4f1ea #c7d0d2 #7d98a3 #2f5663 #1b2b34

雰囲気： 落ち着いて静か

おすすめ用途： エディトリアルレイアウトやブログ

使い古した小石や冷たい岸辺の空気が、落ち着きある控えめな雰囲気をもたらします。特にクリーム色が主役だとエディトリアルなレイアウトに洗練をプラスしつつ、冷たい印象になりません。湖のカラーパレットとしても、静かな階層と読みやすいコントラストが欲しい長文ページに最適です。使い方のコツ：本文はほぼ黒で、青みグレーはセクション区切りや引用に使いましょう。

media.ioによる小石の岸辺イメージ例

4) 松のリフレクション

HEX: #0f2c2e #1b4b4a #2f7b74 #89b8a8 #e7f2ee

雰囲気： フレッシュでアウトドア感覚

おすすめ用途： エコパッケージやナチュラルブランド

常緑樹のリフレクションや涼しい木陰が、シャープでアウトドアなエネルギーを与えます。グリーンがうるさくなく、清潔に感じられるのでエコパッケージやアウトドア用品、サステナブルなスキンケアにも最適。深いフォレストトーンと、暖かな非コート紙の質感を組み合わせるとプレミアムな自然感になります。使い方のコツ：最も濃い色は小さなブロックやアイコンに使い、クラフト紙にインクのにじみを防ぎましょう。

media.ioによる松のリフレクションイメージ例

5) 夕焼けの桟橋

HEX: #1d2b44 #2a5c73 #4aa3a2 #f0c28f #f6f3ea

雰囲気： 温かみがありノスタルジック

おすすめ用途： 旅行広告やSNSグラフィック

夕暮れの光が水面で温もりやノスタルジーをつくります。サンドカラーのアクセントでブルー系がコーポレートっぽくなりすぎず、旅行広告やライフスタイル投稿に最適です。エアリーな写真やシンプルなサンセリフ体と合わせると雰囲気がよりライトに。使い方のコツ：ピーチ系のハイライトはボタンや価格タグにごく少しだけ使い、注目を集めましょう。

media.ioによる夕焼けの桟橋イメージ例

6) スイレンパステル

HEX: #f7f5fb #cfe8f5 #9dc7dd #6aa2b8 #3d6a7a

雰囲気： 柔らかくロマンチック

おすすめ用途： ベビーシャワー招待状やステーショナリー

パウダーブルーと穏やかなスレートが、水面に浮かぶ花びらのような雰囲気。ベビーシャワーやブライダル招待状、上品なパッケージに最適です。淡く細いセリフ体とたっぷり余白を合わせて、パステルの詰まり感を避けましょう。使い方のコツ：最も濃いブルーで名前や要点を記載すると印刷がシャープになります。

media.ioによるスイレンパステルイメージ例

7) 嵐の流域

HEX: #1b2a33 #2f4b57 #4e7583 #7fa7b1 #e3ecee

雰囲気： クールで真面目

おすすめ用途： レポート・プレゼン・インフォグラフィック

曇り空とさざ波が真面目で安定感あるブルーに。レポートやスライド、インフォグラフィック等で厳しすぎない構造を作りたい時にぴったりです。ミディアムブルーグレーに細いラインアイコンを合わせるとプロっぽくなります。使い方のコツ：一番明るい色をベースに、一番濃い色をラベル等に使うと、グラフも見やすいです。

media.ioによる嵐の流域イメージ例

8) 澄んだ泉

HEX: #e8fbff #bfeaf2 #77c6d5 #2a8fa4 #0f5162

雰囲気： 明るくリフレッシュ

おすすめ用途： フィットネスアプリやスプラッシュ画面

冷たく澄んだ水と陽光の浅瀬で、明るく元気な印象に。フィットネスアプリ、オンボーディング、スプラッシュ画面など、クリアで活力ある印象が欲しいときに最適です。大胆な幾何学の形や濃いティールのナビバーと合わせると安定感がプラスされます。使い方のコツ：最も明るいアクアをメイン背景にすると、インターフェースが軽やかに。

media.ioによる澄んだ泉イメージ例

9) マリーナの夜

HEX: #08131d #0f2a3b #1c4c66 #2d7aa0 #9fd2e3

雰囲気： シャープでモダン

おすすめ用途： ダークモードUIやアナリティクス

深夜のマリーナライトで、真っ黒になりすぎずコントラストの効いた印象に。ダークモード対応のアナリティクスや金融ツール、デベロッパーダッシュボードなど、集中したい場面に最適です。明るいブルーをアクティブやリンクの強調色に。使い方のコツ：広い面積には一番暗い2色を使い、眩しさを抑えつつデータの強調が意図的に感じられます。

media.ioを使って生成したマリーナナイトの画像例

10) アルプス湖

HEX:#f2f9ff #b4d8ef #5aa7d6 #246a96 #123c58

雰囲気：さわやかで冒険的

おすすめ用途：アウトドアブランドとwebヘッダー

高地の空気と氷河のブルーが、このパレットをさわやかで冒険的な感じにします。明瞭さと勢いを求めるアウトドアブランド、webヘッダー、イベントグラフィックに使用してください。シャープな写真と最小限のアイコノグラフィーと組み合わせると、モダンなエクスプローラーの外観になります。使用法のヒント: 大きなバナーの場合は、スカイブルーからディープブルーにグラデーションを設定して、移行が自然に感じられるようにします。

media.ioを使って生成したアルパインレイクの画像例

11) 流木中立

HEX:#f1ede3 #d6d2c4 #a7b0ae #557377 #20383c

雰囲気：暖かくてバランスの取れた

おすすめ用途：インテリアムードボードとブログ

日焼けで漂白された木材と柔らかい水の色調が、暖かくバランスの取れたミックスを作り出します。中立的な基盤を必要とするインテリアムードボード、ライフスタイルブログ、落ち着いたeコマースページに最適です。リネンの質感や落ち着いた写真などの天然素材と組み合わせてください。使用法のヒント: 暖かいニュートラルが風通しの良いままになるように、ブルーグレーを見出しのアンカーカラーとして扱います。

media.ioを使って生成した流木ニュートラルの画像例

12) グラスティール

HEX:#e9fffb #b7f0e7 #5fd1c3 #1aa59a #0a5b5a

雰囲気：清潔で遊び心がある

おすすめ用途：美容プロモーションとモダンなパッケージ

ガラスのような表面水と明るいミントティールが、このミックスを清潔で遊び心があり、モダンに感じさせます。レイクカラーパレットとして、ネオンなしで新鮮さを必要とする美容プロモーションやドリンクラベル、スタートアップブランディングに効果があります。シンプルな黒または深いティールのタイポグラフィと組み合わせると、シャープで編集的なコントラストが得られます。使用法のヒント: ライトミントを背景に保ち、ステッカーやシールには飽和ティールを使用します。

media.ioを使って生成したグラスティールの画像例

13) セイルクロスブルー

HEX:#f7fafc #d0e4f3 #86b6d8 #3a78a6 #1f3d5a

雰囲気：航海的できちんとした

おすすめ用途：コーポレートサイトとナビゲーション

さわやかな帆布の白と頼りになるブルースが、すっきりとした信頼できる印象を与えます。企業の Web サイト、ナビゲーションが多いアプリ、明確さと落ち着きを必要とするサービス ブランドに適合します。細いストローク、明確な間隔、シンプルなアイコンと組み合わせると、洗練されたUIが得られます。使用法のヒント: 階層を明確に保つために、リンクにはミッドブルー、ヘッダーにはディープネイビーを使用します。

media.ioを使って生成したセイルクロスブルーの画像例

14) ファーニー・バンクス

HEX:#eaf4ee #bcd7c8 #6fa893 #2f6b5c #163a33

雰囲気：土のようで回復的な

おすすめ用途：植物のイラストとラベル

水線に沿った日陰のシダは、これらの緑に回復的で自然な落ち着きを与えます。ボタニカルイラスト、ガーデンラベル、スローリビングブランドに最適です。オフホワイトのペーパートーンや繊細な線画と合わせて職人感を演出。使用法のヒント: アウトラインは最も濃い緑色にして、中央の緑色が柔らかくオーガニックな状態を保つことができます。

media.io を使用して生成されたシダの銀行の画像例

15) 铜のブイ

HEX:#102a3a #1b5a6c #2ea3a9 #d08a5a #f1e2d2

雰囲気：大胆で現代的な

おすすめ用途：イベントポスター・音楽チラシ

銅のポップが入ったクールな青緑色の水は、大胆で現代的で、少しインダストリアルな感じがします。イベントポスター、音楽チラシ、クリエイティブスタジオブランディングに強力で、コントラストがありながらも洗練されています。凝縮されたタイポグラフィと大きなカラーブロックと組み合わせて、グラフィックエネルギーに寄りかかります。使用法のヒント: 銅を単一のアクセント シェイプまたはデート バッジとして使用して、パンチを保ちます。

media.ioを使って生成した銅ブイの画像例

16) 雪解け

HEX:#fbfeff #dff3ff #a5d7f5 #4f9ecb #205b7a

雰囲気：軽やかで楽観的

おすすめ用途：ヘルスケアサイトとオンボーディング

新鮮な雪解けと明るい日光は、これらのブルースを軽く、楽観的で、衛生的に感じさせます。これらは、安心感を感じなければならないヘルスケア サイト、オンボーディング フロー、サービス アプリに自然にマッチします。柔らかい丸みを帯びた形状とクリアなアイコノグラフィーと組み合わせると、フレンドリーなトーンになります。使用方法のヒント: インタラクティブな状態の場合は中型を青に保ち、明るい背景で本文テキストとして使用しないでください。

media.ioを使って生成した融雪の画像例

17) インディゴの深さ

HEX:#0b1020 #1a2340 #2c3f6d #4a6bb0 #c9d3f2

雰囲気：思慮深くドラマチック

おすすめ用途：クリエイティブなポートフォリオとケーススタディ

深い藍の層は思慮深く、ドラマチックで、少し神秘的に感じられます。クリエイティブなポートフォリオ、ケーススタディページ、スポットライトのようなコントラストが必要な製品ストーリーテリングに適しています。リンクのために、たくさんの空白と1つのペリウィンクルアクセントと組み合わせてください。使用法のヒント: 明るいラベンダーをセクションの背景として適用して、暗い色調が重く感じないようにします。

media.ioを使って生成したindigo depthsの画像例

18) ゴールデンリード

HEX:#123241 #1f6677 #3fb7b3 #d7b86d #f7f1e1

雰囲気：日当たりの良い自然

おすすめ用途：レストランのメニューとおもてなし

太陽に照らされた葦と澄んだ水が、クールなティールトーンに自然な暖かさをもたらします。これらの湖の色の組み合わせは、ホスピタリティのブランディング、レストランのメニュー、リラックスしたポリッシュを求めるブティックホテルに最適です。ゴールドにテクスチャーのある紙や微妙な木目を合わせることで、オーガニックな感触を増幅します。使用法のヒント: 見出しにはティールを使用し、アイコン、スペシャル、セクション マーカーなどのハイライトにはゴールドを使用します。

media.ioを使って生成したゴールデンリードの画像例

19) 都会の湖畔

HEX:#f5f6f7 #c9d4db #6c8a99 #2d4b59 #0f1e26

雰囲気：モダンで実用的

おすすめ用途：アプリuiキットとデザインシステム

コンクリートのパスと涼しい水の色調は、このセットにモダンで実用的なエッジを与えます。ニュートラルブルースがコンポーネント全体で柔軟性を維持する必要があるUIキットやデザインシステムに最適です。フラットな外観を避けるために、厳密な間隔とあなたのブランドからの単一の明るいアクセントと組み合わせてください。使用法のヒント: ホバー要素、アクティブ要素、および無効要素のグレーブルーのスロープをステップして状態を構築します。

media.ioを使って生成した都市湖畔の画像例

20) 静かなラグーン

HEX:#e8fff7 #bdebdc #6ec9b6 #2d8c84 #0f4a4d

雰囲気：静かでスパのような

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

静かなラグーンの雰囲気が、穏やかでスパのようで、優しく高揚感を与えます。ウェルネスブランディング、瞑想ランディングページ、クリーンなeコマースセクションに最適です。柔らかい写真、丸みを帯びた角、軽いセリフ見出しと組み合わせると、落ち着いたプレミアム感が得られます。使用法のヒント: ミントの背景のテキストに深いティールを使用して、コントラストを高く保ちます。

media.io を使用して生成された静かなラグーンの画像例

湖と相性の良い色は？

レイクトーン（ティール、アクア、ブルーグリーン、ディープブルー）は、ホワイト、クリーム、ソフトグレー、チャコールなどのクリーンなニュートラルと特によく合います。ニュートラルは、特にUIや編集レイアウトで、ウォーターシェードが風通しがよく読みやすい感じになります。

より個性が欲しい場合は、砂、桃、銅、または柔らかい金など、暖かいコントラストを追加してください。温かいアクセント 1 つで、レイク パレットはより人間的で「企業的」ではなく、洗練されたままに感じられます。

自然に向けた方向には、レイクブルースと落ち着いたグリーン（セージ、シダ、パイン）、紙のようなオフホワイトを組み合わせてください。これにより、パレットがオーガニックに保たれ、パッケージングやエコ ブランディングに適しています。

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

色だけでなく、役割から始めましょう。背景には最も明るい色調、二次表面にはミッドトーン、テキストと強力なUI要素には最も暗いトーンを使用します。これにより、推測することなくパレットをコンポーネント間で使用できます。

ブランディングのために、「シグネチャー」の湖の色 (多くの場合、彩度のあるティール) を 1 つ残し、残りの色を柔らかい色合いと深いアンカーでサポートさせます。これにより、ソーシャル投稿、ランディングページ、印刷物全体の一貫性が向上します。

印刷では、コントラストとインク密度に注意してください。深いティールは、コーティングされていないストックに重く印刷できます。小さな要素 (アイコン、ルール、見出し) には暗い色調を使用し、広い領域を明るいアクアまたはニュートラルに保ち、よりきれいな仕上がりにします。

AIで湖パレットのビジュアルを作成

すでに 16 進コードをお持ちの場合は、ダッシュボード、ポスター、パッケージ、メニュー、ランディング ページなどのモックアップを生成することで、ブランド内のビジュアルにすばやく変換できます。重要なのは、レイアウトと支配的なパレットムード (霧、深み、ミント、または嵐) を説明することです。

上記のプロンプトを再利用し、同じレイクトーンを維持しながら、ユースケース (たとえば、「モバイル オンボーディング画面」を「ウェブサイト ヒーロー バナー」に変更) を入れ替えてみてください。これにより、色の一貫性を失うことなく複数のスタイルを探索できます。

結果が気に入ったら、異なる照明、タイポグラフィ、または構図でいくつかのバリエーションを生成します。デザインシステムやキャンペーンのためのまとまりのあるアセットをすぐに手に入れることができます。

次へ： ハーベストゴールドカラーパレット