ブルーカラーパレット20選：おすすめ配色とHEXコード・使用ポイント

青はデザインにおいて最も柔軟性の高い色の一つであり、深みのあるネイビーの権威から、空のように淡い青の落ち着きまで、あらゆるものをカバーします。

ここでは、HEXコード付きの厳選された20のブルーカラーパレットのアイデアと、UI、ブランディング、印刷物のための実用的な組み合わせのヒントをご紹介します。

なぜブルーパレットがこれほど上手く機能するのか

青は信頼、明瞭さ、安定感と強く結び付けられており、そのため金融、テクノロジー、医療、企業ブランディングで頻繁に使われます。青は厳しさを感じさせず、プロフェッショナルさを伝えます。

ユーザビリティの観点からも、青はUIシステムで良いパフォーマンスを発揮します。リンクや選択されたタブ、プライマリーボタンなど、複数の状態で明確な階層を構築しつつ、明るい背景でも暗い背景でも可読性を保てます。

同様に重要なのは、青には広いトーンの幅があることです。暖色（デニム、サファイア）、寒色（アークティック、グレイシャー）、くすみ色（スレート）、エレクトリック（ネオン）などに振っても統一感を保てます。

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

1）ミッドナイト ハーバー

HEX： #0B1D39 #123A63 #2F5D8A #9CC7E6 #F2E9DA

雰囲気： ムーディー、海洋風、自信に満ちた

最適な用途： 金融ブランディングや高級感のあるウェブヘッダー

ミッドナイトハーバーの青は、都会の灯りの下に広がる深い水のように、確かな信頼感を漂わせます。ネイビーをアンカーに使い、淡いスカイブルーを背景や余白の多いレイアウトに活用しましょう。暖かみのあるサンド色は、CTAやバッジ、価格表示などに控えめな人間味を加えます。アクセシビリティのためにもコントラストを高く保ち、一番明るいブルーは図表や重要な状態のみに使いましょう。

media.ioで生成されたミッドナイトハーバーの画像例

Media.io

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

今すぐ無料で試す

2）コースタルブリーズ

HEX： #0E4D92 #1E88E5 #79C7FF #E8F6FF #FFD2A6

雰囲気： 爽やか、軽やか、前向き

最適な用途： 旅行広告や夏のSNSグラフィック

爽やかな海岸のトーンは、晴れた空や潮風、日差しを浴びた水面を思わせます。鮮やかなアジュールブルーと柔らかいアイスカラーを組み合わせると、明るさを保ったまま可読性もアップ。ピーチ色はボタンや割引タグなどの小さなアクセントに最適。洗練された印象を与えるにはミッドブルーを見出しに、最も淡い色をたっぷり使って余白を広くとりましょう。

media.ioで生成されたコースタルブリーズの画像例

3）デニムワークショップ

HEX： #1D3557 #2C6CB0 #6EA8DA #EAF2F8 #C8A27A

雰囲気： カジュアル、手作り感、信頼感がある

最適な用途： EC商品ページやライフスタイルブランド

カジュアルなデニムブルーは使い込まれたジャケットのように安心感があります。一番濃い色はナビゲーションに、パウダー調の薄い色は背景に使ってページを明るく。タンカラーのアクセントは価格表示や小アイコンに手作り感をプラスします。ブルーが商品画像を圧倒しないように、写真の周囲には余白をたっぷりとりましょう。

media.ioで生成されたデニムワークショップの画像例

4）グレイシャーカーム

HEX： #0D2B45 #1C77C3 #39A9DB #BEE9E8 #F7F9FB

雰囲気： クリーン、シャープ、落ち着きがある

最適な用途： ウェルネスアプリやスパブランディング

シャープで清涼感のあるブルーは、冷たい空気や澄んだ水、静かに落ち着ける気分を演出します。ほぼ白に近い色はコンテンツブロックの後ろに、明るいブルーは進捗やタブ、指標などのアクセントに使用。モダンさと癒しを両立したブルーパレットにしたい時はグラデーションを控えめにし、ティール寄りの明るい色で柔らかさを演出しましょう。ライトグレーのラインアイコンやゆったりとした余白で、穏やかな印象をキープします。

media.ioで生成されたグレイシャーカームの画像例

5）ロイヤルインク

HEX： #0B132B #1C2541 #3A506B #5BC0BE #F3C969

雰囲気： 威厳、ドラマティック、洗練

最適な用途： イベントブランディングや高級パッケージ

ベルベットのカーテンや舞台のサインを思わせる高貴なインク色。最も濃いネイビーは背景に、ティールはラベルやスタンプなど主役部分に。暖かいゴールドは箔押しのようなハイライトや、プレミアムな価格帯で少量使うのがおすすめ。パッケージではタイポグラフィを太めにし、深い色に対して細すぎる線は避けましょう。

media.ioで生成されたロイヤルインクの画像例

6）ストーミースカイライン

HEX： #0F172A #334155 #3B82F6 #93C5FD #E2E8F0

雰囲気： モダン、都会的、集中力アップ

最適な用途： SaaSダッシュボードやデータレポート

ストームカラーは高層ビルに広がる雲のようにシャープで効率的。スレートやネイビーブルーで全体の枠組みを作り、鮮やかなブルーで主要アクションや選択状態を示します。淡いブルーやクールグレーは表やグラフに重さを感じさせません。情報量が多いダッシュボードには鮮やかなブルーは1〜2箇所だけに留め、階層性を保ちましょう。

media.ioで生成されたストーミースカイラインの画像例

7）ネオンタイド

HEX： #001220 #0A4DFF #00D1FF #7C3AED #F8FAFC

雰囲気： エレクトリック、未来的、遊び心のある

最適な用途： ゲーム配信オーバーレイやテック系ローンチポスター

ネオンタイドの色は、夜の濡れた舗道に映るネオンの反射のような印象です。これらの青系の組み合わせはダークモードで特に映え、白はタイポグラフィやUIクロムに限定して使うとよいでしょう。パープルはセカンダリアクションに深みを与え、シアンはライブ状態やホバーエフェクトの強調にもぴったり。グラデーションは狭い範囲で使い、明るい色ばかりを一度に使いすぎて視覚的ノイズにならないようにしましょう。

media.ioで生成されたネオンタイドの画像例

8）パウダーナーサリー

HEX： #2B4C7E #7AA7D9 #CFE6FF #FFF7F0 #F6C4D2

雰囲気： やさしい、穏やか、安心感がある

最適な用途： ベビーシャワー招待やファミリーブログ

パウダー系は編み物のブランケットや朝の光、静かな子守唄のような安心感があります。深みのあるブルーは見出しに使い、パステル基調のベースで清潔感をキープ。クリームやピンクはボーダー、アイコン、小さなイラストに好相性。招待状はレイアウトをシンプルにし、明るいブルーを背景の主役に使いましょう。

media.ioで生成されたパウダーナーサリーの画像例

9）アークティックUI

HEX： #0A2540 #1D4ED8 #60A5FA #E0F2FE #F1F5F9

雰囲気： シャープ、正確、ハイテク感

最適な用途： 業務効率化アプリやフィンテックUI

際立つアークティック系青は、クリーンなガラスやシャープなタイポグラフィを連想させます。ネイビーはナビゲーションに、鮮やかなブルーはインタラクションやアラート用に使いましょう。淡いトーンは情報の多いパネルにも空間感を与えます。プライマリーボタンはロイヤルブルーで統一し、一番明るい青は控えめな強調時のみ使用しましょう。

media.io を使って生成された Arctic UI の画像例

10) サファイアセリフ

HEX： #0B2E4A #0F4C81 #2C7BE5 #A8D1FF #FFF4E6

雰囲気：エディトリアル、自信、洗練

最適な用途：雑誌レイアウトやオピニオンサイト

洗練されたサファイアトーンは、現代的な質感の紙にインクが乗ったような雰囲気を持っています。一番濃い色はマストヘッドや引用に、明るいブルーはリンクや注目ポイントに使います。柔らかいクリーム色はレイアウトを冷たくしすぎずに暖かみを加えます。長文には本文をほぼ黒に、淡いブルーはセクションの区切りやサイドバーに使いましょう。

media.io を使って生成された Sapphire Serif の画像例

11) レイクハウスモーニング

HEX： #12355B #2D6A9F #7FB7D7 #D9EEF9 #EADBC8

雰囲気：リラックス、フレンドリー、ナチュラル

最適な用途：ホスピタリティウェブサイトやコテージレンタル

リラックス感のあるレイクハウストーンは、静かな水面や使い込まれた木材、柔らかな霧のよう。中間のブルーはボタンに、淡いトーンは広い背景に最適です。暖かいベージュはライフスタイル写真と相性が良く、レイアウトに心地よさを加えます。ヘッダーには一番濃いブルーを低い不透明度で重ねて、写真の上でも読みやすくしましょう。

media.io を使って生成された Lakehouse Morning の画像例

12) スペースキャデット

HEX： #050A30 #0B2D9A #2B59C3 #7BAAF7 #F5F7FF

雰囲気：大胆、宇宙的、冒険的

最適な用途：サイエンスポスターや教育コンテンツ

宇宙を思わせるブルーは、星図、ロケットパネル、明るい計器ランプを連想させます。一番濃い色を夜空のベースに使い、ミッドブルーは図形やダイアグラム、データポイントに。淡いペリウィンクルブルーは繊細なグリッドや星座ラインにも最適です。十分な余白をとることで重くならず、色の鮮やかさが保てます。

media.io を使って生成された Space Cadet の画像例

13) オーシャングラス

HEX： #083344 #0E7490 #22D3EE #A5F3FC #ECFEFF

雰囲気：明るい、アクアティック、クリーン

最適な用途：ウォーターブランドやスキンケアラベル

アクアティックガラストーンは、澄んだ水に差し込む太陽のように、きらきらと清潔な印象です。濃いティールブルーは力強い文字に、淡いトーンは背景で活躍します。鮮やかなシアンはアイコンや成分の強調など、フレッシュ感の演出にぴったり。ラベルにはコントラストをしっかりつけ、余白を広めにしてプレミアム感を保ちましょう。

media.io を使って生成された Ocean Glass の画像例

14) ブルースプルース

HEX： #0B3C49 #0F766E #2A9D8F #8ECAE6 #F1FAEE

雰囲気：アウトドア、安心感、リフレッシュ

最適な用途：エコブランドや自然系ニュースレター

しっかりとしたスプルーストーンは、山の空気、常緑樹の木陰、澄んだ小川を表現します。ティール寄りのブルーはリサイクルペーパーやマットなテクスチャと相性抜群。明るい空色を背景に、グリーンはアクセントで取り入れてトロピカルになり過ぎないように。明るいアクアを少量アクセントに使うと、サインアップボタンや大事な数値が自然と目に入ります。

media.io を使って生成された Blue Spruce の画像例

15) ヴィンテージポストカード

HEX： #1F3A5F #4D7EA8 #A1C6EA #F2EFEA #C9B29B

雰囲気：ノスタルジック、暖かい、旅情

最適な用途：ウェディングステーショナリーやブティック系ブログ

ノスタルジックなポストカードブルーは、引き出しから見つけた海辺のメッセージのように、色褪せて魅力的です。ダスティブルーは枠線や見出しに使うとヴィンテージ感が出ます。クリームや温かいトープ色が加わると、セリフ体やフィルム風写真にもぴったりの柔らかさに。ステーショナリーには、さりげない紙のテクスチャやミニマルなアクセントがおすすめです。

media.io を使って生成された Vintage Postcard の画像例

16) ブループリントスタジオ

HEX： #071A52 #0B4F9E #1E96FC #B3D9FF #F8FAFC

雰囲気：テクニカル、知的、エネルギッシュ

最適な用途：建築ポートフォリオや製品ドキュメント

テクニカルなブループリントトーンは、シャープな線や整然としたグリッド、自信に満ちたプランニングを示唆します。この組み合わせは細いラインやクリアなスペース、規律ある階層構造に最適。最も明るいブルーはリンクや注釈、淡いトーンは図やコードブロックのサポートに使います。本文は濃色で、ブルーが主役になるようにしましょう。

media.io を使って生成された Blueprint Studio の画像例

17) インディゴベルベット

HEX： #1B0B3A #2D1E6B #3F37C9 #A29BFE #F6F2FF

雰囲気：ラグジュアリー、クリエイティブ、ドラマチック

最適な用途：ビューティーブランディングやアルバムアート

ベルベットのようなインディゴは劇場照明やリッチな生地を思わせ、大胆でありつつ派手になりすぎません。一番濃いパープルネイビーは背景に、明るいインディゴはボタンやタイトルに使います。ラベンダーのトーンは広いエリアを柔らかくし、デザインにエレガントさを与えます。ビューティーパッケージではメタリックのディテールと高コントラストの写真を組み合わせましょう。

media.io を使って生成された Indigo Velvet の画像例

18) レイニーデイミニマル

HEX： #0F172A #1E293B #475569 #94A3B8 #E2E8F0

雰囲気：ミニマル、静か、プロフェッショナル

最適な用途：履歴書サイトや企業テンプレート

静かな雨の日のトーンは、曇り空の光やきれいなコンクリートのように落ち着きと実用性があります。一番濃い色はヘッダーや主要タイトルに、グレーはサブテキストや区切り線に。淡いグレーブルー背景がセクションをやさしく分けます。モダンな印象にしたいときは、アクセントカラーをひとつだけ加えてポイントを強調しましょう。

media.io を使って生成された Rainy Day Minimal の画像例

19) セルリアンスポーツ

HEX： #001F54 #0A6CF1 #16C3FF #DFF6FF #FFB703

雰囲気：エネルギッシュ、スポーティ、高コントラスト

最適な用途：フィットネス広告やイベントチラシ

エネルギーあふれるセルリアントーンは、スタジアムの照明や速い動きをイメージさせます。明るいブルーとシアンは、太字タイポグラフィやバナー、ダイナミックなシェイプに使いましょう。黄色オレンジのアクセントはカウントダウンや価格、重要なアクションにぴったり。ベースのネイビーを広い範囲に使い、暖色アクセントは短くパンチを効かせて使いましょう。

media.io を使って生成された Cerulean Sport の画像例

20) ダスクトゥドーン

HEX： #0B1026 #1F3C88 #4B88FF #9AD7FF #FFE8D6

雰囲気：夢のよう、シネマティック、高揚感

最適な用途：アプリのオンボーディング画面やヒーローセクション

映画のワンシーンのようなダスクトゥドーントーンは、夜明け前の地平線の移ろいを感じさせます。ディープなベースは没入感あるヒーローエリアに、明るいブルーはステップや強調箇所のアイキャッチに使いましょう。柔らかなピーチはカラーパレットを暖め、親しみやすいイラストにもよく合います。オンボーディングはコピーを短く、パネルや進行状況マーカーには一番明るいブルーで余白を持たせましょう。

media.io を使って生成された Dusk to Dawn の画像例

青と相性の良い色は？

ブルーは、ホワイトやチャコール、クールグレーなどのニュートラルカラーと合わせることで、現代的なUIやエディトリアルレイアウトにきれいに馴染みます。これらの組み合わせはコントラストを安定させ、ブルーを意図的かつ支配的になりすぎずに使えます。

暖かみを出したい場合は、サンド、クリーム、ベージュ、ソフトピーチなどを加えてクールなブルーとバランスを取ります。ブランド構築でもよくある手法で、フレンドリーさと信頼感を両立できます。

エネルギーを出したいときは、イエローやゴールド、オレンジなど高コントラストのアクセントを少量使ってみましょう。ダークモードデザインでは、シアンやパープルも未来的な雰囲気を壊さずアクセントになります。

ブルーパレットを実際のデザインで使う方法

まず役割分担を決めましょう。構造用にダークブルー（ナビやヘッダー）、主なアクション用に中間/明るめのブルー、背景やセクション用に淡色を使うことで、ページやコンポーネントをまたいでも一貫したシステムになります。

印刷の場合はインクの濃度と可読性に注意しましょう。濃いネイビーは細い文字だと潰れることがあります。オフホワイトや暖かみのある紙を使うことで、強いコントラストを和らげつつ高級感も演出できます。

アクセシビリティのためには、特に淡いブルーを白に重ねる場合は、テキストやインタラクティブな状態でコントラストを確認しましょう。一番明るいブルーは重要なアクション専用にして、階層が明確になるようにします。

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

すでにHEXコードがあれば、モックアップやポスター、パッケージ、UIシーンなどをパレットに合わせてすぐ生成できます。これにより、全面的なデザイン実装前に雰囲気やコントラストを確認できます。

レイアウト（ヒーローセクション、チラシ、ダッシュボード）を言葉で説明し、スタイル（フラットベクター、スタジオ写真、ミニマルなど）を指定して、同じプロンプト構造を繰り返し使うことで一貫した出力になります。

Media.io なら、アクセントの変更やダークモードのテスト、別パターンのブルートーンもすぐ試せるので、ブランドの方向性を崩さずに素早く検証・展開が可能です。

次へ： イエローグレーのカラーパレット