水中カラー パレット 20選｜配色アイデア・HEX コード付き

水中のカラーパレットは、海の光の奥行き、静けさ、そしてコントラストを捉えています——清潔感がありながら没入感のある雰囲気が必要なインターフェース、ブランディング、アートワークに最適です。

以下には、すぐにコピーできるHEXコード付きの海から着想を得た20の水中カラーパレットと、実用的な使用ヒントや、AIでビジュアルを素早く生成するためのプロンプトを紹介します。

なぜ水中パレットがこんなに効果的なのか

水中トーンは、自然と静けさと透明感のバランスを持っています。ディープネイビーは構造を作り、ティールやアクアは鮮やかさを足しながらも過度に彩度が高くなりません。そのため、UI、パッケージング、編集レイアウトなどさまざまな用途で使いやすいのです。

また、強いヒエラルキー（階層構造）も演出できます。ダークな「深み」の色はテキストやナビゲーションの錨として機能し、淡い色合いは水を通した光のよう——背景やカード、ネガティブスペースに最適です。

さらに、海をテーマにしたパレットは、グラデーション、柔らかいシャドウ、ミニマルなアイコンといった現代的なデザイントレンドとも相性抜群。高級感や静けさを保ちつつ、ゴールドやコーラル、レッドのアクセントひとつで一気に注目を集めることもできます。

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

1) アビサル・ドリフト

HEX： #061827 #0B2D3D #0F4C5C #3A8D9A #D7F2F0

雰囲気： ダークで集中、モダン

最適な用途： フィンテックのダッシュボードUIやデータ量の多いWebアプリ

ムーディーな深みと穏やかな流れが、控えめながらも自信のある現代的な雰囲気を作ります。特に濃いネイビーに白系テキストのコントラストが重要なダッシュボードにおすすめ。シンプルなラインアイコン、大きめの余白と合わせることで、中間のティール色がごちゃつかずに活きます。ヒント：淡いアクアはハイライトや成功表示専用にしてUI全体の落ち着きをキープしましょう。

media.ioで生成したアビサル・ドリフトの画像例

Media.io

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

今すぐ無料で試す

2) ケルプ・フォレスト

HEX： #0B1F1A #124B3A #2F7D5A #7FC8A9 #E6F3EA

雰囲気： アーシー、フレッシュ、リフレッシュ

最適な用途： エコブランドのアイデンティティやサステナブル商品のラベル

土っぽいグリーンと柔らかなシーフォームで、海藻が光に揺れる情景を思わせ、ナチュラルな雰囲気を演出します。エコブランドやリフィルパッケージ、ウェルネスラベルなど、落ち着いた責任感ある印象が大切な場合にぴったり。温かみのあるオフホワイトの紙テクスチャやクラフト系ニュートラルと組み合わせると本物感が出ます。ヒント：ロゴには一番濃いグリーン、シーフォームはベースフィールドカラーに使いタイポグラフィの視認性を高めましょう。

media.ioで生成したケルプ・フォレストの画像例

3) パール・ラグーン

HEX： #F7F5F0 #D9E7E8 #A6CFD3 #3C7E8A #143844

雰囲気： クリーン、エアリー、スパ風

最適な用途： ウェルネス系サイトやミニマルなエディトリアルレイアウト

エアリーなパール色と柔らかなラグーンブルーが、上品で清潔感あるスパのような雰囲気を生み出します。ウェルネスサイトやルックブック、ホワイトスペースを活かした落ち着いたエディトリアルに最適。細身のセリフ体やライトサンセリフフォントと合わせると、柔らかなコントラストと調和します。ヒント：一番濃いティールをタイトルや仕切り線専用に使い、ページ構成を明確に。

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

4) サンケン・トレジャー

HEX： #0A1B2A #1F3A5A #2F6F73 #C2A24B #F1E2B7

雰囲気： 冒険的、プレミアム、シネマティック

最適な用途： ゲームポスターや冒険テーマのブランディング

シネマティックなネイビーと海で磨かれたティールが沈没船の発見を思わせ、ブラスゴールドが高級感を加えます。ゲームアートや探検系ブランド、ドラマチックなポスター用に最適。テクスチャ付きグラデーションや微細なグレインで古びた金属や深海の雰囲気を表現しましょう。ヒント：ゴールドはボタンやバッジ、主要見出しなど限られたアクセントに留めて。

media.ioで生成したサンケン・トレジャーの画像例

5) タイドプール・グラス

HEX： #0B3A4A #0F6B7B #4CC3D9 #A7F0F5 #F2FBFF

雰囲気： 明るい、遊び心、リフレッシュ

最適な用途： 夏のイベントフライヤーや水上スポーツ系プロモ

明るいガラスのようなブルーが潮だまりに反射する太陽光をイメージさせ、鮮やかでリフレッシュ感のある雰囲気を演出します。夏のフライヤーや水泳イベント、若者向けプロモなど、明快さとエネルギーが大事な場面におすすめ。丸みのあるフォントやシンプルな幾何学ウェーブと組み合わせ、親しみやすさを強調しましょう。ヒント：一番明るい色をベースに使い、ビビッドなシアンが主役カラーとして際立つように。

media.ioで生成したタイドプール・グラスの画像例

6) リーフ・ランタン

HEX： #081A24 #103E4A #1F8A8A #F2C14E #FEF3D6

雰囲気： 温かい、招き、海岸風

最適な用途： シーフードレストランのメニューや海岸ホスピタリティのブランディング

リーフティールにランタンのようなゴールドが映え、夕暮れの桟橋ディナーのように温かく心地良い雰囲気。メニューやホスピタリティブランディング、サインにおすすめ。クリーム系の背景やシンプルなノーチカルラインアートと合わせて清潔な仕上がりに。ヒント：ゴールドは特別メニューやセクション見出しのような目立たせたい表示に使い、視線誘導に活用しましょう。

media.ioで生成したリーフ・ランタンの画像例

7) ミッドナイト・カレント

HEX： #030B12 #0A2233 #123A5A #2B6EA6 #97C6E8

雰囲気： シャープ、テクノロジック、夜間的

最適な用途： SaaSのランディングページやセキュリティ関連のブランディング

シャープなミッドナイトブルーにエレクトリックな海色のハイライト。速い流れと静かな深みを想起させ、テック系の雰囲気に最適です。SaaSランディングページやセキュリティプロダクト、権威と洗練さを必要とするプレゼンテーションにも。シャープなアイコンやさりげないグラデーションを使い、奥行き感をプラスしてもごちゃつかずにまとまります。ヒント：明るいブルーはリンクや主要CTAのみに使って、全体を高級感のある印象に。

media.ioで生成したミッドナイト・カレントの画像例

8) シーフォーム・ミスト

HEX： #E9FBF6 #BCEEE3 #69CBBD #2D7B78 #134A4D

雰囲気： 柔らかい、癒し、海辺

最適な用途： 美容パッケージや癒し系SNSテンプレート

柔らかなシーフォームとミスティティールが、清潔で優しい海辺の癒しを演出します。美容パッケージやスキンケア投稿、セルフケアテンプレートのような「やわらかさ重視」の用途に。細身の罫線・大きな余白・温かみのあるペーパーニュートラルを加えることで、クリーンになりすぎず柔らかさを強調できます。ヒント：一番濃いティールでテキストを締め、パステル色の可読性を維持しましょう。

media.ioで生成したシーフォーム・ミストの画像例

9) ノーチラス・シェル

HEX： #F6EFE4 #E1D2B8 #C2B29A #6E7C80 #1C3A4A

雰囲気： ニュートラル、タイムレス、上質

最適な用途： ライフスタイル系ブログや高級文房具

クリーミーなシェルニュートラルにスレートとディープブルーグレーを組み合わせ、古びた陶器や流木を思わせるタイムレスな雰囲気。ライフスタイル系ブログや高級文具、結婚式ペーパーアイテムなど、さりげないラグジュアリーを求めるシーンに。エンボス加工や細い罫線、見出しだけに濃い色を効かせるのがコツ。ヒント：本文にはネイビーグレーを使い、最も明るいクリームとのコントラストを高めましょう。

media.ioを使用して生成したオウムガイの殻の画像例

10）ブルーグロット

HEX： #071B2D #0B3B66 #166AA6 #1BB3C8 #D2F3FF

雰囲気： 鮮やか、シャープ、冒険的

最適な用途： 旅行広告とスキューバツアーポスター

鮮やかなグロットブルーとクリーンなアクアのハイライトは、隠された入江の真昼のようにシャープで冒険的な雰囲気。旅行広告や、遠くからでも即座に認識できるツアーポスター、バナーに最適です。太字のサンセリフ見出しや、高コントラストのフォトマスクやベクトル波と組み合わせてください。ヒント：最も薄いブルーを余白に使うと、シアンが鮮明で読みやすくなります。

media.ioを使用して生成したブルーグロットの画像例

11）ハーバーストーン

HEX： #111B21 #2E3A42 #56646E #8EA1A8 #E5ECEF

雰囲気： 無機質、静か、信頼できる

最適な用途： 建築プレゼンおよび企業レポート

クールな港のグレーは、桟橋近くの濡れた石や鉄のレールのように工業的で頼りがいがあります。中立性がコンテンツを引き立てたい建築資料や企業レポート、ポートフォリオに使用できます。現代的なアクセントが必要な時は、ひとつだけティールまたはブルーを加えると良いでしょう。ヒント：最も明るいグレーをセクション背景に使うと、濃い線を使わずに構造を作れます。

media.ioを使用して生成したハーバーストーンの画像例

12）マーメイドシルク

HEX： #1D1B2F #3F2E56 #6A4E7A #2AA6A3 #CFEEEa

雰囲気： 夢のよう、ラグジュアリー、少し神秘的

最適な用途： ビューティーブランディングとブティックのSNSキャンペーン

人魚のようなティールのきらめきを含むドリーミーなバイオレットシャドウは、弱い光を受けたサテンのようにラグジュアリーでわずかに神秘的。エレガントさと個性を両立したいビューティーブランドやクリエイティブなプロモに最適です。艶やかなグラデーションやソフトなぼかし効果と合わせることでシルク感を増幅できます。ヒント：ティールはアイコンや小さなグラフィックのハイライト色として使い、パープルが主役となるようにしましょう。

media.ioを使用して生成したマーメイドシルクの画像例

13）アークティックフィヨルド

HEX： #0A2330 #14485A #2A7F88 #A8D4D8 #F3FBFC

雰囲気： 冷たい、クリーン、広々とした

最適な用途： 医療テクノロジーUIとミニマルプレゼンテーション

冷たいフィヨルドブルーと空気のような氷のティントは、冬の息吹のようにクリーンで広がりを感じさせます。クリアさが求められる医療テックやサイエンス資料、ミニマルUIとの相性抜群です。細い仕切り線とシンプルなチャートを組み合わせることで、クリニカルでありつつも親しみやすいインターフェースにできます。ヒント：ほぼ白のアイスティントをメインのキャンバスに使い、ナビやラベルには濃いブルーを使い分けましょう。

media.ioを使用して生成したアークティックフィヨルドの画像例

14）プランクトングロウ

HEX： #061316 #0A3A3E #16A085 #B7FFCF #F0FFF8

雰囲気： エネルギッシュ、モダン、生物発光

最適な用途： 音楽ビジュアルおよびナイトライフポスター

生物発光グリーンとディープティールの影は、プランクトンが夜の水泳を照らすようなエネルギッシュな雰囲気。音楽ビジュアルやナイトライフポスター、デジタルバナーに最適で、ネオン的な煩さを避けつつ新鮮な印象を与えます。黒やほぼ黒の背景と合わせるのがおすすめです。ヒント：一番明るいミントは重要なテキストやフォーカルポイントのみに使うことで、全体のバランスが保てます。

media.ioを使用して生成したプランクトングロウの画像例

15）ディープダイブデニム

HEX： #0B1020 #1C2B4A #2F4F7B #4F86C6 #D9E6F7

雰囲気： 自信、親しみやすさ、クラシック

最適な用途： アプリのオンボーディング画面や教育向けプロダクト

クラシックなデニムブルーは、親しみやすく自信に満ち、深みもあります。オンボーディングフロー、教育プロダクト、クリーンなWeb UIなど、信頼性とフレンドリーさを両立させたい時に重宝します。ラウンドカードやシンプルなイラストを添えると軽やかさも演出できます。ヒント：ミッドブルーを主役にして、もっとも濃いトーンは見出しや重要なUIだけに限定しましょう。

media.ioを使用して生成したディープダイブデニムの画像例

16）サイレンシグナル

HEX： #071A22 #0B4C5F #168C9A #E64B4B #F2F5F6

雰囲気： ボールド、警告、高コントラスト

最適な用途： CTA重視ランディングページやプロモバナー

鋭いレッドシグナルと深いティールが合わさり、霧の中のビーコンのように緊急感とコントロール感を同時に演出します。目立つCTAが重要なLPやバナーに最適です。ホワイトスペースとミニマルなアイコンで赤の意図を明確にし、ノイズにならないようにしましょう。ヒント：赤は主要ボタンやクリティカルなバッジだけに使い、残りはティールトーンでまとめてください。

media.ioを使用して生成したサイレンシグナルの画像例

17）シーグラスニュートラル

HEX： #F2F0E7 #D6DCC8 #9AB39A #4D6B5E #1F3A33

雰囲気： ナチュラル、穏やか、控えめ

最適な用途： ホームグッズのブランディングとミニマルパッケージ

柔らかなシーグラスニュートラルは、麻や粘土、沿岸植物のようにナチュラルで控えめです。ホームグッズやミニマルパッケージ、暖かみを大切にしたいライフスタイルブランドに適しています。非コート紙やさりげないエンボス等、触感素材との組み合わせで高級感もUP。ヒント：最も濃いグリーンは小さな文字やバーコードに使い、他のトーンは空気感を保ちましょう。

media.ioを使用して生成したシーグラスニュートラルの画像例

18）サブマリンプラス

HEX： #0A1A1F #123843 #2F6A78 #B08D57 #F2E6D6

雰囲気： ヴィンテージ、精巧、航海風

最適な用途： クラフトビールラベルやヘリテージブランドマーク

深いサブマリンカラーにブラスの温かみが加わることで、リベットや計器、磨かれた金属のような精巧かつヴィンテージな雰囲気です。クラフトビールやヘリテージパッケージ、ノスタルジックな雰囲気をプラスしたい時に最適。セリフ体やバッジ風エンブレムと組み合わせるとレトロ感が高まります。ヒント：クリームはラベルのベースに、ブラスはポイントに絞って使いましょう。

media.ioを使用して生成したサブマリンプラスの画像例

19）コーラルフリッカー

HEX： #0B2A33 #0E5564 #19A1A6 #FF6B5A #FFE3D7

雰囲気： 活発、トロピカル、目を引く

最適な用途： SNS広告や夏の新商品ローンチ

サンゴがきらめくリーフティールは、波間の色の閃きのようにトロピカルで目を引きます。この海中カラーパターンは、SNS広告や夏のローンチに最適で、ひとつのボールドなアクセントカラーが主役になります。シンプルなレイアウトと淡いピーチ色の余白で、サンゴ色の上質さを引き立ててください。ヒント：コーラルは1つか2つの要素（値札やボタンなど）だけに使うのが効果的です。

media.ioを使用して生成したコーラルフリッカーの画像例

20）ソルトウォーターインク

HEX： #05080D #0E1A24 #19344A #2C6F80 #D0E8EA

雰囲気： シリアス、エディトリアル、洗練

最適な用途： 出版系ブランドやロングリードWeb記事

インクのようなブラックとディープオーシャンブルーが、信頼感のあるロングリード記事を思わせるエディトリアルな雰囲気を生み出します。出版系や記事テンプレ、タイポグラフィ主体のポートフォリオに最適です。やわらかいオフホワイト背景と控えめなアクセントブロックでナビゲーションを整えると良いでしょう。ヒント：淡いアクアはプルクォートやハイライトパネルに使い、テキストが密でも視認性が保たれます。

media.ioを使用して生成したソルトウォーターインクの画像例

水中カラーと相性の良い色は？

海中パレットは、砂や塩、泡に似たニュートラルカラーと組み合わせるのが最適です――温かみのあるオフホワイト、クリームベージュ、柔らかなグレーが理想です。これらは構成に呼吸感を与え、ティール系配色も“デジタル感”を抑えます。

コントラストをつけたい場合は、水中の信号のように目立つアクセントをひとつ加えましょう：コーラル、ブラスゴールド、あるいはレッド。CTAやバッジ、重要なデータポイントなど、限られた箇所で使えば色のヒエラルキーを即座に作れます。

よりエディトリアルまたはプレミアムな雰囲気が欲しい場合は、インクのような黒と青みグレーを導入しましょう。タイポグラフィー主体のレイアウトの土台になり、グラデーションや写真、UI要素も引き締まります。

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

テキストやナビ、アウトラインにはダーク（ネイビー/インク）をいちど選び、広い面は中間ティール、背景は淡いアクアまたは氷色ティントで仕上げれば読みやすさも維持できます。

ブランディングでは、海中カラーの組み合わせは「主役色」をブルーグリーン系に限定し、暖色アクセント（コーラル／ゴールド／レッド）はアイコン・シール・ボタン1種など、再利用しやすい少量要素に絞ると効果的です。

UIデザインでは、初期段階からコントラストテストを行いましょう。多くのアクアはホワイトと合わせると明るいがコントラストが低くなりがちなので、オフホワイトの背景、繊細なボーダー、濃いティールラベルでアクセシビリティを高められます。

AIで水中パレットのビジュアルを作成する

これらの海の配色をポスターやパッケージ、ランディングページ、SNS広告でプレビューしたい場合は、AIで手軽にモックアップを生成しましょう。上記プロンプトを活用し、対象（メニュー・ダッシュボード・フライヤー）だけ変えればプロジェクトにマッチできます。

Media.ioなら反復が簡単です：比率を変えたり、ライティングを調整したり、アクセントカラー（コーラル・ゴールド）を試しながら理想的なバランスを追求できます。

方向性が決まったら、お気に入りをエクスポートし、ここで紹介したHEXコードをFigmaやCanva、お好きなデザイントゥールで色体系として再現しましょう。

次へ： レッドコーラルカラーパレット