おすすめ海洋ボートブルーパレット20選【色コード付き】

オーシャンボートブルーは、深いネイビーブルーと明るいシーブルーの中間に位置する絶妙な色合いです。信頼感があり、シャープでモダンな印象を与えるため、落ち着いた自信を必要とするブランディングに最適です。

下記は HEX コード付きのオーシャンボートブルーカラーパレット20選と、白・サンド・ティール・暖色アクセントとの実用的な配色のヒントです。

オーシャンボートブルーパレットが優れている理由

オーシャンボートブルーは頼りがいがあり、落ち着いた印象を与えるため、マリンブランドや旅行、テクノロジー、企業UIで幅広く使用されています。ネイビーの権威感を持ちながら、ほぼ黒のブルーよりも開放的で親しみやすい色味です。

沿岸のニュートラルカラー、たとえばセイルホワイトや泡のようなオフホワイト、サンド、ロープのようなベージュとの相性も良く、デザインを冷たくしすぎずクリーンに保てます。見出しにはダーク、アクションには中間のブルー、背景には淡い色と、階層作りもしやすい色合いです。

また、コーラル・ブラス・サンイエロー・ピーチといった鮮やかなアクセントを加えても可読性を損ないません。コントラストや明瞭さが必要なときに、オーシャンボートブルーは安定感のあるアンカーカラーとして活躍します。

20種類以上のオーシャンボートブルーカラーパレットアイデア（HEXコードつき）

1）ハーバードーン

HEX： #0B3C5D #1E6FA8 #58A6D6 #E7F3FA #F2E2C4

雰囲気： フレッシュ、コースタル、ポジティブ

おすすめ用途： 旅行パンフレットの表紙デザイン

爽やかな朝の空気と静かなマリーナが思い浮かぶ、優しい白やサンディベージュがブルーを柔らかくしています。観光系レイアウトやコースタルイベント、クリーンな信頼感と温かみが求められるデザインと相性抜群です。ネイビーの細い線や空白を大切に使うことで、ライトブルーが映えます。ベージュはバッジや価格などの小さなアクセントに抑えると海のトーンが主役になります。

media.ioで生成したハーバードーンの画像例

Media.io

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

今すぐ無料で試す

2）ディープキール

HEX： #041A2B #0D4D7A #1E6FA8 #5AA1C8 #A7C7DA

雰囲気：シリアス、マリン、コンフィデント

おすすめ用途：コーポレートサイトのヒーローセクション

ダークな水面とスチールブルーが落ち着きとプロフェッショナルさを演出。中間のブルーが明快さを加えつつ遊び心は抑えめで、企業サイトや物流、テクニカルサービス向きです。ほぼ黒のネイビーとライトブルーの大きな面積で階層を作るのがおすすめ。本文は一番薄いブルー、見出しやCTAは一番ダークな色でまとめると心地よいです。

media.ioで生成したディープキールの画像例

3）シーグラスデッキ

HEX： #0F4C5C #1E6FA8 #63C7C2 #B8E3E0 #F6F7F2

雰囲気：リラックス、爽やか、モダンコースタル

おすすめ用途：スパ・ウェルネスブランドアイデンティティ

セアグリーンやクリーンなブルーが穏やかなデッキの風を思い起こさせます。優しいオフホワイトが全体をまろやかに仕上げ、ウェルネスやスキンケア、マインドフルなライフスタイルブランドに最適。シンプルなサンセリフ体や丸みを帯びたモチーフと合わせて癒しの雰囲気を強化します。アクアはアイコンや区切りのアクセントとして使い、大きなテキストブロックには用いないのがポイント。

media.ioで生成したシーグラスデッキの画像例

4）キャプテンズジャケット

HEX： #0A2239 #173B63 #1E6FA8 #AFC5DA #D9B36C

雰囲気：クラシック、ノーティカル、洗練

おすすめ用途：ヨットクラブ招待カード

きちんとした制服のようなブルーとブラスゴールドがクラシックかつ上質な印象を演出。ヨットクラブやフォーマルディナー、伝統を重んじるプレミアムホスピタリティにおすすめです。テクスチャ入りの紙やスモールキャップタイポ、細いラインボーダーと合わせて上品にまとめましょう。ゴールドはモノグラムや日付など、注目したいディテールにだけ絞るとエレガントさが際立ちます。

media.ioで生成したキャプテンズジャケットの画像例

5）フォーム＆ロープ

HEX： #123B5A #1E6FA8 #79B9E4 #F5FBFF #D7C6A5

雰囲気：クリーン、エアリー、ビーチ風

おすすめ用途：EC商品ページレイアウト

白い泡と日差しで色あせたロープが軽やかで親しみやすい雰囲気を与えます。ブルーは明るくフレンドリー、ベージュが自然で温かみをプラス。製品ページや信頼感と分かりやすさを求めるマーケットプレイスにおすすめ。主な背景はニュートラルホワイト、大きなボタンや価格強調には濃い青を使いましょう。

media.ioで生成したフォーム＆ロープの画像例

6）コースタルチャート

HEX： #0E2F44 #1E6FA8 #3B8CC4 #86D1C5 #F4D35E

雰囲気：冒険的、明るい、エネルギッシュ

おすすめ用途：夏のイベントポスターデザイン

地図風のブルーにサンイエローのアクセントが加わり、アウトドアの高揚感を演出します。遠くからも目立つコントラストが必要なポスターやフェスティバル、プロモーションに最適。幾何学的なシェイプや簡略化したアイコン（ピン・波・ブイ）と組み合わせがおすすめ。イエローは見出しや日付等の要所に使うと、視認性とパンチを両立できます。

media.ioで生成したコースタルチャートの画像例

7）ミッドナイトウェイク

HEX： #020E18 #08304A #1E6FA8 #2F7FB8 #8BBFE3

雰囲気：ムーディー、シネマティック、洗練

おすすめ用途：テックスタートアップ ランディングページUI

夜のインクのような色味とシャープなブルーがシネマライクな高級感を生みます。テック・フィンテック・SaaSブランドで、単色になりすぎず威厳を出したいときにおすすめ。繊細なグラデーションや細いラインアイコンと合わせて上品に。最も薄いブルーはホバーステートやマイクロインタラクションに使うと、UIが生き生き感じられます。

media.ioで生成したミッドナイトウェイクの画像例

8）ラグーンキャンバス

HEX： #084C61 #1E6FA8 #2FB8B2 #B2F0E8 #FFF7E6

雰囲気：トロピカル、ライト、遊び心

おすすめ用途：ビーチリゾートSNSテンプレート

ラグーンティールとやさしいクリームが、バケーションにぴったりの明るさをもたらします。ブルーは爽やかで、ミントトーンがライフスタイル系に楽しい印象。丸ステッカーや波形モチーフ、大きめ写真をクリームで囲むなど、遊び心ある使い方がおすすめ。ティールはアクセントやオーバーレイのみで使うと、人物や写真の色味を自然に保てます。

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

9）ストーミーピア

HEX： #1B2631 #2D4D63 #1E6FA8 #6C8FA7 #C9D6DF

雰囲気：クール、控えめ、都市型コースタル

おすすめ用途：エディトリアルマガジンのスプレッドレイアウト

くすみ感のあるスレートブルーと安定感のあるミッドブルーが、ストーミーな桟橋の雰囲気を表現。現代的で少し無骨な印象は、エディトリアルデザインや建築特集、ドキュメンタリー風ブランディングにおすすめ。シャープなグリッドやハイコントラストのブラック書体、広めの余白と合わせると良いです。画像は寒色寄りに調整するとグレーやダスティブルーと調和しやすくなります。

media.ioを使用して生成された嵐の桟橋の画像例

10) ブルーブイ

HEX： #062743 #1E6FA8 #2CA6E0 #F2F7FB #FF6B6B

雰囲気： 太字、スポーティー、目を引く

おすすめ用途： ウォータースポーツ製品の広告クリエイティブ

スポーティなブルーにサンゴ色が映え、明るい水面に浮かぶブイのような印象です。これらのオーシャンボートブルーの配色は、広告、アウトドアギア、エネルギッシュなキャンペーンに最適で、明確なフォーカルポイントを与えます。サンゴ色はシンプルな形状や短い見出しと組み合わせ、視覚的な乱雑さを避けましょう。使用のコツ：サンゴ色はレイアウトにつき1か所、CTAボタンやプロモバッジなどにのみ使うことでインパクトを最大化します。

media.ioで生成されたブルーブイの画像例

11) セイルクロス・ウィスパー

HEX： #1A3552 #1E6FA8 #9BC7E8 #EAF4FB #EDE3D1

雰囲気： 柔らかい、エレガント、そよ風のよう

おすすめ用途： 結婚式用Webサイトとステーショナリー

明るい帆布のトーンとパウダーブルーがロマンチックで軽やかな印象を与えます。クリームベージュが温かみをプラスし、招待状やメニュー、式場案内に最適です。繊細なセリフ体や控えめなラインアートの花柄と合わせると、洗練された海辺の雰囲気になります。使用のコツ：最も淡いブルーを背景に、濃いネイビーを名前や主要見出しに使いましょう。

media.ioで生成されたセイルクロス・ウィスパーの画像例

12) マリーナ・ネオン

HEX： #052038 #1E6FA8 #00B0FF #00D1C1 #F8F8FF

雰囲気： エレクトリック、モダン、ナイトライフマリーナ

おすすめ用途： 音楽フェスティバルのチケットUI

深いネイビーにネオンの海色が夜の水面に映る光のような印象を与えます。明るいシアンとアクアが瞬時にエネルギーを加え、チケットやイベントアプリ、大胆なデジタル製品に最適です。コンデンスタイプやハイコントラストなブロックと組み合わせると、現代的な雰囲気を演出できます。使用のコツ：一番濃いネイビーを背景にし、ネオン色はQRコードエリアやアイコン、アクティブ時のみに使いましょう。

media.ioで生成されたマリーナ・ネオンの画像例

13) タイドプール・インク

HEX： #071B2E #134A6A #1E6FA8 #4FB7B3 #CDEFEF

雰囲気： クール、クリエイティブ、海洋的

おすすめ用途： ポッドキャストカバーアートワーク

深いインクブルーと潮だまりのティールが、海辺でスケッチしているような思索的で創造的なムードを演出します。ポッドキャスト、書籍の表紙、静かで深みのあるブランドに適しています。イラストテクスチャーや太いタイトルと相性が良いです。使用のコツ：一番明るい色にタイトルを載せ、暗いベースにも可読性を保ちましょう。

media.ioで生成されたタイドプール・インクの画像例

14) アンカーブラス

HEX： #0B2D45 #1E6FA8 #4D9CCB #C7A34B #F3EFE4

雰囲気： ヘリテージ、暖かなノーティカル、プレミアム

おすすめ用途： クラフト飲料ラベルデザイン

真鍮の暖かみとマリンブルーが、ヴィンテージなボートの金具のような雰囲気を与えます。クリームの背景はラベル向きで、文字もくっきり見えます。彫刻調ラインアートとクラシックなセリフ体を合わせると、伝統感のある見た目に。使用のコツ：真鍮色は枠線やエンブレムのディテールに、ブルー系はブランドのメイン部分に利用しましょう。

media.ioで生成されたアンカーブラスの画像例

15) ポーラー・カレント

HEX： #0F2A3D #1E6FA8 #6FBCEB #D9F1FF #FFFFFF

雰囲気： 氷のようにシャープ、クリスプ、ミニマリスト

おすすめ用途： 分析用ダッシュボードUI

氷のような明るいブルーと純白はシャープで清潔感があり、非常に読みやすいです。データ表示に空間と明暗のコントラストをもたせる分析用ダッシュボードに最適。細い区切り線や一貫したアイコンの太さと組み合わせると整然としたシステムに。使用のコツ：中間ブルーはチャートに、最も濃い色はナビや主要ラベルのみに使いましょう。

media.ioで生成されたポーラー・カレントの画像例

16) ブルー・ホライズン

HEX： #002B49 #1E6FA8 #4B9BD1 #A6D4F2 #F9C784

雰囲気： 日差し、フレンドリー、海岸モダン

おすすめ用途： レストランメニューのデザイン

明るいホライズンブルーとピーチ色の暖かみが、浜辺でのゴールデンタイムの食事のような親しみやすい印象を演出します。これらのオーシャンボートブルーはメニュー、カフェのブランディング、ホスピタリティ分野のレイアウトに最適で、清潔感と食欲を引き立てます。シンプルなアイコンと余白を多めに使い、爽やかに仕上げましょう。使用のコツ：ピーチはセクション見出しのハイライトに、ブルーは本文や構造に使いましょう。

media.ioで生成されたブルーホライズンの画像例

17) ウェーブクレスト・ミニマル

HEX： #0A2A43 #1E6FA8 #6AAFE0 #E9F2F9 #2E2E2E

雰囲気： ミニマル、モダン、デザイン重視

おすすめ用途： ポートフォリオウェブサイトUIキット

クリアなブルートーンにチャコールのアンカーが現代的で計算された印象を与えます。ほぼ白のブルーでレイアウトは軽やかに、グレーがエディトリアルなシャープさを加えますが、重たくなりません。大きめの文字、シンプルなグリッド、1色のみのアクセントボタンとの相性が良いです。使用のコツ：チャコールはテキストのみに使い、ミッドブルーはリンクやトグルなどインタラクティブ要素に使いましょう。

media.ioで生成されたウェーブクレスト・ミニマルの画像例

18) ポートサイド・パステル

HEX： #1D4E89 #4EA5D9 #8BD3EA #F7F7FF #F6C1C7

雰囲気： 柔らかく、陽気、コンテンポラリー

おすすめ用途： ベビーシャワー招待状デザイン

優しいポートサイドブルーとブラッシュのアクセントが甘く軽やかで祝祭的な印象。オーシャンボートブルーのカラーパレットはベビーシャワー、春のイベント、遊び心と洗練さを兼ねるステーショナリーにぴったりです。丸みのあるイラスト、ソフトグラデーション、やさしいサンセリフ体と組み合わせましょう。使用のコツ：ブラッシュは名前や日付など1か所の注目要素のみに使うと全体がエアリーに仕上がります。

media.ioで生成されたポートサイド・パステルの画像例

19) リーフシャドウ

HEX： #061827 #0F3B57 #1E6FA8 #1FA2A6 #7CE8D3

雰囲気： ディープ、アクアティック、ビビッド

おすすめ用途： スキューバツアーパンフレットデザイン

リーフの影と鮮やかなアンダーウォーターティールが冒険的で生き生きとしたムードを作ります。ダークブルーが深みを与え、ミントのハイライトは水中の陽射しのよう。高コントラストの写真フレームやシンプルなインフォグラフィックス（ルートやダイブレベル）と好相性。使用のコツ：一番明るいミントはアイコンや強調箇所に使い、ダークネイビーの上でディテールを際立たせます。

media.ioで生成されたリーフシャドウの画像例

20) スキッパーズデニム

HEX： #0C2340 #1E6FA8 #3F7FBF #9AB6D6 #E8E0D5

雰囲気： カジュアル、信頼感、クラシック

おすすめ用途： アウトドアアパレルのルックブックレイアウト

デニムのようなブルーと暖かなニュートラルが親しみやすく、丈夫で着回しやすい印象を与えます。明るいブルーで親近感を、ディープネイビーで見出しやセクション分けにメリハリをつけましょう。シンプルな商品グリッドと余白たっぷりでカタログ風に。使用のコツ：暖色のニュートラルは価格やサイズ表示の背景パネルに使うと読みやすくなります。

media.ioで生成されたスキッパーズデニムの画像例

オーシャンボートブルーと相性が良い色は？

オーシャンボートブルーは、クリスプな白やクールなオフホワイト（泡、氷、帆布）との組み合わせが最適です。これらの明るいニュートラルは新鮮さを与え、UIの読みやすさを保ちます。

温かみを出したい場合は、サンド、ロープベージュ、真鍮、ピーチ、ソフトクリームがおすすめ。少量ならおもてなしや高級感を加えられます。より海っぽさを出したい場合は、ミント、シーグラスティール、ターコイズのアクセントを。彩度を抑えた使い方でパレットのバランスを保ちます。

高コントラストなモダンデザインなら、チャコールやブラックに近いネイビーを追加すれば、タイポグラフィの強調やCTA・ナビゲーションの視覚的なヒエラルキーを構築できます。

オーシャンボートブルーのカラーパレットを実際のデザインで活用する方法

UIデザインでは、オーシャンボートブルーを主要アクションカラー（ボタン、リンク、アクティブ時）に、淡いブルーの系統は背景やカードに、最も濃いネイビーはヘッダーやキーラベル用に使うことでレイアウトが整理されます。

印刷やブランディング用途では、テクスチャのあるニュートラル（クリームやサンド）を合わせて無機質さを避けましょう。細いライン、シンプルなアイコン（波・アンカー・ピン）、広めの余白でノーティカルな明快さを強調します。

キャンペーンや広告では、コーラル、サンイエロー、真鍮など大胆なアクセントを一つだけ（バッジやCTAなど）追加し、全体を把握しやすくクリーンに保つのがおすすめです。

AIでオーシャンボートブルーパレットのビジュアルを作成する

これらのオーシャンボートブルーのカラーバリエーションを素早くプレビューしたい場合は、AIでモックアップを生成してから本格的なデザインシステムを組むのがおすすめです。フォーマットごとのコントラスト・雰囲気・タイポグラフィのテストが簡単にできます。

Media.ioなら、短いプロンプトからクリーンなポスターやUIセクション、ラベル、招待状、SNSテンプレートが作成でき、HEXカラーやレイアウトスタイルを差し替えて試行を重ねられます。

次へ： ブルー ライトブルー カラーパレット