カデットブルーのカラーパレット21選とHEXコード一覧

カデットブルー（#5F9EA0）は、落ち着きがあり、現代的で信頼できる印象を与える控えめな青緑色です。冷たく見えすぎず、UIやブランディング、印刷のベースカラーとしてとても相性が良いです。暖色・寒色のアクセントともよく調和します。

以下では、カデットブルーのカラーバリエーションとHEXコード、そして実際のデザインでの活用方法のポイントを、開放的なコースタルミニマリズムからハイコントラストなダークモードまでご紹介します。

カデットブルーのカラーバリエーションがうまく機能する理由

カデットブルーは、青と緑の中間に位置し、海っぽさや新鮮さを感じさせつつ、プロフェッショナルかつ安定した雰囲気を演出します。そのバランスにより、レイアウトを圧迫しない「メインブランドカラー」として最適です。

ナチュラルな控えめさが特徴のカデットブルーは、インターフェースや印刷物のビジュアルノイズを軽減します。長文の読み物やデータ重視のダッシュボード、明快さが重要な商品ページにぴったりです。

組み合わせも簡単：クリーンな白で明るさをプラス、クリームやメタリックで温かみを、チャコールやネイビーで深みを出すなど、現代的でコントラストのある演出にも対応できます。

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

1) ハーバーミスト

HEX： #5F9EA0 #EAF4F4 #C9D6D8 #8FB3B7 #2F3E46

ムード： 落ち着き・エアリー・コースタル

おすすめ用途： SaaSダッシュボードやアナリティクスUI

落ち着きと海辺感のあるカデットブルーは、静かな港に流れる海霧のよう。淡いブルーグレーは面積の大きい部分に、ヘッダーやナビゲーションには濃いスレート色でレイアウトを引き締めましょう。クリーンな白やさりげないラインアイコンと組み合わせると、現代的でノイズの少ないインターフェースになります。ヒント：最も濃い色は主要なCTAに使うことで、コントラストを高められます。

media.ioで生成されたハーバーミストの画像例

Media.io

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

今すぐ無料で試す

2) ブラスブループリント

HEX： #5F9EA0 #D4A373 #FAEDCD #3D405B #1B263B

ムード： 洗練・ヴィンテージ・自信

おすすめ用途： ブランドアイデンティティ・名刺

洗練されたヴィンテージ感漂うカデットブルーミックスは、設計図や真鍮、インクの印象を呼び起こします。カデットブルーをメインに、真鍮の色味をロゴや箔加工、アイコンなどでアクセント使いしましょう。ネイビーやインディゴはタイポグラフィをシャープかつプロフェッショナルに見せつつ、厳しくなりすぎません。ヒント：クリーム色は非コート紙に印刷すると、触感と現代×クラシックの仕上がりに。

media.ioで生成されたブラスブループリントの画像例

3) シーサイドリネン

HEX： #5F9EA0 #F7F3E9 #D6E2E4 #B7B7A4 #6B705C

ムード： 優しい・ナチュラル・リラックス

おすすめ用途： ライフスタイルブログ・エディトリアルレイアウト

柔らかく自然体な印象で、海辺の漂白されたリネンや流木を思わせます。このカラーパレットは、温かみのあるニュートラルカラーをページの大半に使い、ブルーは見出しや引用、リンクの強調に使うのがベスト。上品なセリフ体フォントと余白をたっぷりとり、自然なリズムに。ヒント：微細なグレインテクスチャを加えると、淡い色でも平坦に感じません。

media.ioで生成されたシーサイドリネンの画像例

4) ストーミーピア

HEX： #5F9EA0 #354F52 #2F3E46 #84A98C #CAD2C5

ムード： ムーディー・安定・アウトドア

おすすめ用途： アウトドアブランド・プロダクトランディングページ

ムーディーで落ち着いたカデットブルーは、濡れた木や海風が吹く嵐の気配を感じさせます。太いヒーローセクションにはチャコールグリーンを使い、ボタンやバッジ、ハイライトの縁取りにはカデットブルーで柔らかさをプラスしましょう。セージや淡い霧色で抜け感とナチュラル感を演出。ヒント：暖かみのある写真や、半透明オーバーレイを使って奥行きを大切に。

media.ioで生成されたストーミーピアの画像例

5) コーラルシグナル

HEX： #5F9EA0 #FF6B6B #FFE66D #F7FFF7 #4ECDC4

ムード： ポップ・晴れやか・エネルギッシュ

おすすめ用途： SNSグラフィック・プロモーション

遊び心があり明るいこのカデットブルーカラーは、ビーチのパラソルやサンゴのサイン、まぶしい午後の光を思わせます。カデットブルーとシーフォームをベースに使えば、コーラルとイエローのアクセントがうるさくならず、意図的なポイントになります。プロモタイルやストーリー用テンプレート、イベント告知など、素早い視認性が求められるときに最適。ヒント：コーラルの使用は1つの主役エレメントに限定するとバランスよく仕上がります。

media.ioで生成されたコーラルシグナルの画像例

6) インクシーグラス

HEX： #5F9EA0 #0B1320 #1C2541 #A9D6D3 #F0F7F6

ムード： スタイリッシュ・モダン・ハイコントラスト

おすすめ用途： ダークモードUI・フィンテックアプリ

スタイリッシュかつ現代的、インクのように暗い水と、磨かれたシーグラスが光を受ける感触です。深いネイビーは背景やコンテナに、カデットブルーはインタラクティブ要素やフォーカスリングに使いましょう。ミント系のトーンは、グラフやデータハイライトで明瞭さを出しつつ、ネオンカラーほど派手ではありません。ヒント：本文テキストはややくすんだオフホワイトにして、ダークモードでのまぶしさを抑えましょう。

media.ioで生成されたインクシーグラスの画像例

7) モダンノーティカルアクセント

HEX： #5F9EA0 #FFFFFF #111827 #F59E0B #E5E7EB

ムード： シャープ・モダン・アクセントが効いた印象

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

シャープで現代的、清潔感のあるセイル、グラファイトカラーのタイプ、日差しのような琥珀色のアクセントを連想させます。白を主役に、黒は強調したタイポグラフィ、アンバーは唯一の目立たせたいポイントに限定して使用しましょう。特にSaaSホーム、価格表、機能紹介で効果的です。ヒント：1画面につきアンバーは1つの主アクションのみ使い、階層を明確に保ちます。

media.ioで生成されたモダンノーティカルアクセントの画像例

8) フォギーモノクローム

HEX： #5F9EA0 #7AAFB2 #A7CBCD #D6E8E9 #F6FBFB

ムード： 静か・やさしい・ミニマル

おすすめ用途： ウェルネスアプリ・落ち着いたUI

静かで穏やかなこのカデットブルーカラーは、朝の霧がかったグラデーションのようです。最も薄い色は背景やカードに、濃淡のティールは区切り線や控えめな強調に。丸みのあるUIコンポーネントや低彩度イラストとも相性抜群。ヒント：カラーを増やさず、文字の太さや余白で階層感を出すと洗練された印象に。

media.ioで生成されたフォギーモノクロームの画像例

9) デザートマリーナ

HEX： #5F9EA0 #E9C46A #F4A261 #E76F51 #264653

ムード： 暖かい・冒険的・サンライト

おすすめ用途： 旅行ポスター・キャンペーンクリエイティブ

温かく冒険的なキャデットブルーの配色は、港町の青と砂漠の太陽、クレイのトーンが組み合わさっています。深いブルーグリーンをタイトルのアンカーに、ゴールドやテラコッタはイラストや図形に活用してください。この組み合わせは旅行キャンペーン、イベントポスター、大胆な季節のローンチに理想的です。コツ：グラデーションは控えめに、フラットなシェイプを選ぶことで温かいアクセントが鮮明に保てます。

media.ioで生成された砂漠のマリーナの画像例

10) アールデコハーバー

HEX： #5F9EA0 #D4AF37 #2B2D42 #7B2CBF #F8F4E3

ムード：グラマラス、ドラマティック、ラグジュアリー

おすすめ用途：イベント招待状やガラチラシ

グラマラスかつドラマティックで、ベルベットの夜服、真鍮のライト、会場外の冷たい海風を連想させます。このようなキャデットブルーの配色は、大胆なジオメトリー、高コントラストの文字、ゴールドを高級感のあるディテールとして控えめに使うことで最も映えます。アールデコのパターン、細いラインワーク、広い余白と組み合わせれば上品な仕上がりになります。コツ：背景は象牙色か濃いチャコール、どちらか一方を使い、両方を同じ作品に使わないことで視覚的なごちゃごちゃを防げます。

media.ioで生成されたアールデコハーバーの画像例

11) ボタニカルコンセルバトリー

HEX： #5F9EA0 #2D6A4F #95D5B2 #D8F3DC #F1FAEE

ムード：フレッシュ、ボタニカル、リストラティブ

おすすめ用途：エコブランドやスキンケアパッケージ

新鮮でリフレッシュされる、このキャデットブルーの配色は曇ったガラス、葉の茎、明るい温室を思わせます。キャデットブルーで構造と信頼感を示し、グリーンを重ねて天然成分や穏やかなエネルギーを伝えましょう。シンプルなサンセリフ体やボタニカルのラインイラストと相性抜群です。コツ：マットな仕上げを選び、ライトグリーンが艶やかにならず柔らかく保ちましょう。

media.ioで生成されたボタニカルコンセルバトリーの画像例

12) ウィンタースパ

HEX： #5F9EA0 #E0FBFC #C2DFE3 #9DB4C0 #5C6B73

ムード：クール、クリーン、癒し

おすすめ用途：医療系ウェブサイトや予約ページ

清潔感のあるクールな印象で、曇ったガラス、畳まれたタオル、静かな冬の朝を思い起こさせます。アイシーな色味を多くの面積に使い、キャデットブルーは主要なUI要素ややさしい強調で用いてください。スティールグレーはタイポグラフィやフォームアウトラインにぴったりで、きつくなりません。コツ：余白を多くし、角を丸くすれば癒しの雰囲気が強くなります。

media.ioで生成されたウィンタースパの画像例

13) クレイスタジオ

HEX： #5F9EA0 #DDBEA9 #CB997E #FFE8D6 #6B705C

ムード：居心地良い、手作り、ナチュラル

おすすめ用途：クラフトショップやハンドメイド商品ページ

温かく手作り感があるキャデットブルーのトーンは、陶器のクレイやリネンエプロン、涼しげなブルーの釉薬を感じさせます。暖かいクリームやタンは背景や商品写真のフレームに使い、キャデットブルーをリンクや小ラベルに使いましょう。オリーブグレーはヘディングの安定感やパレットが甘くなりすぎるのを防げます。コツ：控えめな紙の質感を使い、純白は避けることでアーティザナル感を保ちましょう。

media.ioで生成されたクレイスタジオの画像例

14) レトロプールサイド

HEX： #5F9EA0 #073B4C #FFD166 #EF476F #F8F9FA

ムード：レトロ、明るい、夏らしい

おすすめ用途：フェスティバルポスターやグッズグラフィック

レトロで元気なキャデットブルーの配色は、プールタイルや麦わら帽、鮮やかなネオンサインの雰囲気がありながら、きつくなりません。ディープティールは文字やアウトラインに使い、キャデットブルーは大きな図形を埋めることでクラシックなアクアティック感を出します。黄色とピンクは日付、ステッカーやアイコンのディテールの小さな高エネルギーアクセント。コツ：太い線とシンプルな図形でヴィンテージポスターの雰囲気に合わせましょう。

media.ioで生成されたレトロプールサイドの画像例

15) テックオニキス

HEX： #5F9EA0 #0F172A #1F2937 #94A3B8 #E2E8F0

ムード：シャープ、真面目、テック志向

おすすめ用途：B2BソフトウェアUIとドキュメント

シャープで真面目な印象はポリッシュされたオニキスに、涼しく信頼できるブルーのハイライトを感じさせます。暗色はナビゲーションやコードブロックに、キャデットブルーはリンクやトグル、アクティブ状態に活用しましょう。優しいスティールトーンはテーブルやドキュメントページが長時間でも読みやすくなります。コツ：アイコンは単色にし、ブルーは状態変化の伝達専用で使いましょう。

media.ioで生成されたテックオニキスの画像例

16) ミニマルステーショナリー

HEX： #5F9EA0 #F8FAFC #E2E8F0 #64748B #334155

ムード：ミニマル、整然、プロフェッショナル

おすすめ用途：履歴書テンプレートやプレゼン資料

ミニマルで整然とした印象は、シャープな紙、きれいな余白、自信に満ちた細やかなディテールを感じさせます。ほぼ白に近い色をベースに、セクション見出しや主要なハイライトにはキャデットブルーを使ってください。スレート系はチャートや区切り線を支えつつ、内容を邪魔しません。コツ：スライド全体でアクセントの使い方を統一し、意図的なデザインを印象づけましょう。

media.ioで生成されたミニマルステーショナリーの画像例

17) コッパータイド

HEX： #5F9EA0 #B87333 #F3E9DC #7D8597 #2B2D42

ムード：温かい、海沿い、高級感

おすすめ用途：レストランブランドやメニュー

温かく高級感があり、コッパーの調理器具が涼しい海風にさらされる背景を連想させます。このキャデットブルーの配色は、読みやすさと高級アクセントを両立したいメニューに特に最適です。キャデットブルーとクリームをメインに、コッパーはセクション区切りや価格の強調、スタンプに活用しましょう。コツ：コッパーはフラットカラーやメタリックインクで印刷し、10％未満の面積に使って上品に。

media.ioで生成されたコッパータイドの画像例

18) オーチャードブリーズ

HEX： #5F9EA0 #6A994E #C8E6C9 #FFF3B0 #FFB703

ムード：新鮮、陽気、春らしい

おすすめ用途：ファーマーズマーケットチラシや季節のプロモーション

新鮮で春らしく、果樹園にそよ風と日の光が溢れる果実スタンドのそばにいるような気分です。キャデットブルーは暖かい黄色をクールダウンし、グリーンはバッジやアイコン、カテゴリラベルに活用しましょう。手描きイラストやシンプルで親しみやすいタイポグラフィと相性抜群です。コツ：黄色は日付やCTAのハイライトとして使い、視認性を保ちましょう。

media.ioで生成されたオーチャードブリーズの画像例

19) ミッドナイトアクアリウム

HEX： #5F9EA0 #001219 #005F73 #0A9396 #E9D8A6

ムード：深い、没入感、映画的

おすすめ用途：音楽カバーアートや配信サムネイル

深く映画的なキャデットブルーの配色は、水族館の夜と水中を通す光のきらめきを感じさせます。ほぼ黒や深いティールでドラマチックな背景を作り、キャデットブルーとアクアがフォーカルやハイライトを担います。サンドトーンは小さな文字やロゴマークのワンポイントに最適。コツ：柔らかなグロー効果は控えめに使うことで、パレットの洗練度を保てます。

media.ioで生成されたミッドナイトアクアリウムの画像例

20) ソフトウェディングコースト

HEX： #5F9EA0 #FFFFFF #FDF0D5 #FAD2E1 #D6E2E4

ムード：ロマンチック、軽やか、エレガント

おすすめ用途：結婚式招待状やRSVPカード

ロマンチックで軽やかな雰囲気は、海沿いの結婚式と頬を染める花、そよ風に舞う軽やかな生地を連想させます。クリームや白は紙のメイントーン、キャデットブルーは名前や枠線、小さなモチーフに使いましょう。ブラッシュピンクは彩りを加えつつ、静かなブルーグリーン基調を邪魔しません。コツ：繊細なラインイラストが似合い、重いフラットカラーは避けて上品な印刷仕上げに。

media.ioで生成されたソフトウェディングコーストの画像例

21) ノルディックレイクハウス

HEX： #5F9EA0 #F2F5F7 #BFC8D0 #8A9BA8 #2A3A44

ムード：北欧、静か、バランスが良い

おすすめ用途：インテリアデザインムードボード

北欧的で静かな印象は、湖畔の朝と涼しい空気、ペイントされた木材に差し込む柔らかな光を映します。ほぼ白や淡いグレーを広範囲に使い、キャデットブルーはテキスタイルやタイトルの特長アクセントとして活用。より深いスレートはラベルやグリッド線に最適で、ボードが整理された印象に。コツ：イメージは彩度控えめに保ち、パレットを主役にしましょう。

media.ioで生成されたノルディックレイクハウスの画像例

カデットブルーと相性の良い色は？

キャデットブルーはシャープな白や柔らかなブルーグレーと相性抜群で、軽やかでモダンなレイアウトが作れます。落ち着いたミニマル感を狙うなら、クールなニュートラルと穏やかなティールのトーンでまとめましょう。

暖かいコントラストを加えたい場合は、クリーム、サンド、ブラス、コッパー、テラコッタと組み合わせてください。これらのアクセントが全体のパレットを上品に保ちながら、エネルギーを加えます。強調を際立たせたい場合はコーラルや明るいイエローを小さなアクセントとして使いましょう。

ダークUIに仕上げるなら、キャデットブルーはネイビー、チャコール、スレートと相性抜群です。ミントや淡いアクアをデータハイライトやアクセシブルなコントラストとして加えましょう。

カデットブルーカラーを実際のデザインに活用する方法

まず役割を割り当ててください：明るいトーンは背景やカードに、キャデットブルーはインタラクティブ要素（リンク、ボタン、フォーカスリング）に、より深いスレートやネイビーは文字やナビゲーションに使います。これで階層が明確になり、余計な色を足さずに済みます。

ブランディングの面では、キャデットブルーは信頼感や落ち着きを演出できるため、テック、ウェルネス、エコ、海沿いのライフスタイルに最適です。暖かいアクセント（ゴールド、コッパー、コーラル）はアイコンやスタンプ、主要なCTAなど小規模に留めて、見た目のリズムを整理しましょう。

印刷物ではソフトで高級感を出すなら、明るすぎる白は避けましょう。クリーム紙やマット仕上げを選ぶとキャデットブルーの自然な風合いが際立ちます。特に中間トーンのティールではコントラストを試し、見出しや小さな文字の読みやすさを常にチェックしてください。

AIでカデットブルーパレットのビジュアルを作成

キャデットブルーの配色が実際のレイアウトでどう見えるか試したい場合は、ポスター、UI画面、招待状、パッケージなどの簡易モックアップを作成し、最終デザインファイルに進む前にパレットの適用を確認してみましょう。実際に使うことで、最適なアクセント色やコントラストのレベルを選びやすくなります。

選んだHEXセットをガイドとして、デザインタイプ、背景トーン、キャデットブルーが主役になる場所（ボタン、見出し、図形や文字）を記述してください。気分や読みやすさを比較できるバリエーションが迅速に得られます。

次へ： ホワイト・グリーン・イエローのカラーパレット