ウルトラマリンブルーの配色20選とHEXコード一覧

ウルトラマリンブルーは、深く鮮やかな青色で、自信、クラフト感、現代の洗練を即座に印象づけます。アクセントによっては、王室のようなドラマチックさや、クリーンでミニマルな雰囲気も演出できます。

以下に、HEXコード付きで今すぐ使えるウルトラマリンブルーの配色アイデア20選と、ブランドデザインやUI、印刷物に活用するための実用的なヒントをご紹介します。

ウルトラマリンブルーパレットがうまく機能する理由

ウルトラマリンブルーは、クラシックとコンテンポラリーの間の絶妙な位置にあります。十分な彩度で高級感がある一方、現代的なUIにも合うクリーンさを備えています。そのため、ヒーローセクションからパッケージデザインまで、幅広い用途で頼れる主要カラーになります。

暖色にも寒色にも自然にマッチします。ゴールド、クリーム、テラコッタを加えると贅沢で温かみのある雰囲気、アイシーホワイトやスレートグレー、シアンと組み合わせれば、クリアでテック感のあるムードを作れます。

何よりもウルトラマリンはコントラスト表現に優れています。オフホワイトやダークニュートラルとバランスよく使えば、強い階層感と視認性が得られ、全体を黒一色に頼らずに済みます。

20種類以上のウルトラマリンブルーカラーパレットアイデア（HEXコード付き）

1）ウルトラマリンナイトフォール

HEX： #120A8F #0B1026 #F5F1E8 #C8A24A #E55D73

雰囲気： ドラマチック＆ラグジュアリー

最適用途： 高級ブランドのヒーローセクション

ドラマチックでラグジュアリー、ベルベットのカーテンやゴールドの縁取り、そして仄かに赤みの差す夜空のような印象です。深いブルーを基調に、クリーム色で余白を作り、ゴールドで高級感を演出しましょう。高級ランディングページ、香水ブランド、ブティックホテルのビジュアルに最適です。ヒント：ピンクは小さめのアクセントとしてコールトゥアクションに留め、洗練された印象を保ちましょう。

media.ioで生成したウルトラマリンナイトフォールのイメージ例

Media.io

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

今すぐ無料で試す

2）オーシャニックスレート

HEX： #1A2B8A #2F3A4A #8FA3B8 #E7EDF4 #F2A65A

雰囲気：落ち着きとプロフェッショナルさ

最適用途： SaaSダッシュボードUI

落ち着きがありプロフェッショナルな印象で、曇り空の下に広がる海と、温かなオレンジ色のブイを思わせます。ナビゲーションや主ボタンにスレート×ウルトラマリンを使い、背景には薄いグレイッシュブルーを活用。分析ツールや管理画面、B2B製品に最適で、冷たくなりすぎず明快さが出せます。ヒント：オレンジはアラートや主要指標のみに使用し、意味を明確にしましょう。

media.ioで生成したオーシャニックスレートのイメージ例

3）ポーセリン＆ウルトラマリン

HEX： #1D1FA3 #FFFFFF #F3E7D3 #B9C7E6 #2A2A2A

雰囲気：ロマンティック＆シャープ

最適用途： ウェディング招待状一式

ロマンティックでシャープ、絵付けされた磁器や手書きの誓い、リネンに灯るやわらかなロウソクを思わせます。十分な白と温かみのあるクリームを加えることで、このウルトラマリンブルーの配色は招待状にタイムレスな印象をもたらします。活字はチャコール、淡いペリウィンクルは繊細な枠線やモノグラムの背景に最適。ヒント：未塗装の紙を選ぶと、青が光りすぎず、上品に仕上がります。

media.ioで生成したポーセリン＆ウルトラマリンのイメージ例

4）ネオンアーケードブルー

HEX： #2A00FF #101225 #00E5FF #FF2D95 #EDEDED

雰囲気：大胆＆フューチャリスティック

最適用途： ゲーム配信オーバーレイ

大胆で未来感があり、アーケードの輝きやシンセビート、黒いガラスに映る反射を思わせます。背景はほぼ黒にし、ウルトラマリンとシアンをパネルやフレーム、ステータスバッジに重ねましょう。マゼンタはアラート、新規フォロー、ライブ表示などのアクセントが最適。ヒント：ラベルには薄いグレーを使い、ネオン感を損なわず高い可読性を保ちましょう。

media.ioで生成したネオンアーケードブルーのイメージ例

5）コースタルミュージアム

HEX： #1627B8 #0F172A #D7E3F1 #9DB6C8 #D9A441

雰囲気：知的＆マリン風

最適用途： ミュージアム展示サイン

知的でマリン風、航海地図や磨かれた真鍮、静かなギャラリー照明を彷彿とさせます。ウルトラマリンとほぼ黒で案内用ヘッダーを、淡いブルーで読みやすいパネルを。真鍮ゴールドはセクション番号などに使うと上品な印象。ヒント：本文は明るい背景上に、ゴールドを大きく使いすぎず抑制を効かせましょう。

media.ioで生成したコースタルミュージアムのイメージ例

6）シトラスポップコントラスト

HEX： #1B2AE0 #F7F7F2 #FFB000 #3A3A3A #A7B4D6

雰囲気：エネルギッシュ＆清潔感

最適用途： SNSプロモーションテンプレート

エネルギーにあふれ、白いカウンタートップに並ぶシトラスと鮮やかな青の縁取りのような印象。即座に目を引きたい時に最適なウルトラマリン配色で、ビビッドな赤を使う必要がありません。見出しやフレームにウルトラマリン、CTAはオレンジ、サポートテキストは中間グレーでレイアウトはクリーン＆モダンに。ヒント：中間グレーの活用でシンプルさを保ちましょう。

media.ioで生成したシトラスポップコントラストのイメージ例

7）インク＆パーチメント

HEX： #1417A6 #2B2B2B #F2E8D8 #B6A48A #8FA6C9

雰囲気：クラシック＆エディトリアル

最適用途： 雑誌特集スプレッド

クラシックで編集的な印象、質感ある紙に広がるインクと仄かなアンティーク調の温もり。ウルトラマリンは引き立つ引用や区切りに、パーチメントとタンは親しみやすいレイアウトに最適。じっくり読ませる記事やポートフォリオ、ルックブックにもおすすめ。ヒント：やわらかな青で細いルールやキャプションを加え、静かに視線を誘いましょう。

media.ioで生成したインク＆パーチメントのイメージ例

8）ウィンタースカイ・ミニマル

HEX： #1A33CC #EAF1FF #FFFFFF #B9C9E6 #111827

雰囲気：ミニマル＆エアリー

最適用途： ミニマルロゴ＆ブランドキット

ミニマルで空気感のある印象、冷たい日差しや新雪、氷上のシャープな影を思わせます。ウルトラマリンはワンポイントやアイコンのみに用い、大半はホワイトや淡青で明るく。ほぼ黒のカラーはタイポグラフィやブランドガイドラインに最適でコントラストが効きます。ヒント：グラデーションは控えめにし、フラットなシェイプで現代的な雰囲気に。

media.ioで生成したウィンタースカイ・ミニマルのイメージ例

9）ボタニカルインディゴブルーム

HEX： #1C2BC7 #2E3A59 #F7F2EA #7DB6A6 #E9A6B6

雰囲気：やわらか＆ボタニカル

最適用途： 水彩フローラルイラスト

やわらかでボタニカル、押し花や藍染、穏やかな温室の朝を思い描かせます。濃い青は茎や輪郭、影に使い、クリーム紙の色で全体を調和。セージやブラッシュを加えるとハンドメイド感のある今風アレンジに。ヒント：色の移り変わりは水彩らしくラフにし、手描き感を活かしましょう。

media.ioを使用して生成されたボタニカルインディゴブルームの画像例

10) テックカンファレンスパルス

HEX： #1829F0 #0A0F1F #E6ECFF #6EE7FF #FFC857

雰囲気：自信とエネルギッシュ

最適用途：カンファレンスポスターとフライヤー

自信がありエネルギッシュ、キーノートのスポットライトと高速で流れるデータストリームのような雰囲気です。ほぼブラックとウルトラマリンを土台にして、シアンで動きのあるラインやUI風のディテールを加えましょう。暖かみのあるイエローは日付や会場、チケットボタンなど重要な情報を強調するのに最適です。アドバイス：文字サイズを大きくし、グリッドに揃えて視覚的なノイズを避けましょう。

media.ioを使用して生成されたテックカンファレンスパルスの画像例

11) インディゴデニムデイズ

HEX： #1A2AA8 #35424A #D9D2C3 #FFFFFF #C46D5E

雰囲気：カジュアルで安定感

最適用途：アパレルブランドランディングページ

カジュアルで安定感があり、使い込まれたデニム、キャンバストートバッグ、温かいテラコッタのディテールの印象です。ウルトラマリンブルーはコーポレート感ではなく、親しみやすさを出したいライフスタイルブランドに最適です。ブルーはオフホワイトやサンドと組み合わせて背景に、テラコッタはバッジやセールタグに使用します。アドバイス：ホワイトスペースを多くとり、自然体なタイポグラフィでデニムのリラックス感を保ちましょう。

media.ioを使用して生成されたインディゴデニムデイズの画像例

12) セラミックタイルキッチン

HEX： #1830B5 #F6F4EF #C7D2E9 #8DA2B8 #7A5C4A

雰囲気：家庭的で洗練された

最適用途：インテリアデザインムードボード

家庭的で洗練された雰囲気で、艶やかなセラミックタイル、暖かみのある木材、柔らかな昼光のイメージです。ウルトラマリンをアクセントに使い、クリームやクールグレーを重ねて空間の開放感を演出。ブラウンはパレットを引き締め、家具のメモや素材ラベルにぴったりです。アドバイス：ブルーはアクセントウォールやバックスプラッシュとして使い、全面塗装にはしないでください。

media.ioを使用して生成されたセラミックタイルキッチンの画像例

13) ディープスペースオンボーディング

HEX： #1B24FF #0B1020 #1F2A44 #B9C7FF #F4F6FF

雰囲気：洗練され没入感がある

最適用途：ダークモードアプリのオンボーディング画面

洗練され没入感があり、深い影に柔らかな光が浮かぶ宇宙船のインターフェースのようです。鮮やかなウルトラマリンはプライマリーアクションや進捗を示し、ネイビーやチャコールは背景に使います。淡いペリウィンクルやほぼ白の色合いで、ダークなムードを壊さずテキストを読みやすく保ちます。アドバイス：グラデーションは小さなハイライトにのみ使い、OLED画面での色むらを防ぎましょう。

media.ioを使用して生成されたディープスペースオンボーディングの画像例

14) マリタイムフラッグシップ

HEX： #1227D5 #0E1A2B #FFFFFF #BFD2EA #E0B44C

雰囲気：シャープで航海に適した

最適用途：海洋系ウェブサイトヘッダー

シャープで航海に適した雰囲気で、信号旗や磨かれた金属、遠くに見える水平線を連想させます。ウルトラマリンとネイビーで力強いヘッダーとナビゲーションを作り、ホワイトでデザインに抜け感を加えます。ゴールドを少量使うことで格式を感じさせつつも堅苦しくなりすぎません。アドバイス：淡いブルーはホバーや微細な区切り線に使い、軽やかさを保ちましょう。

media.ioを使用して生成されたマリタイムフラッグシップの画像例

15) ロイヤルベルベットコスメ

HEX： #1A21B8 #2B0F2F #F6E9F0 #D6B2C6 #D4AF37

雰囲気：華やかで豪華

最適用途：コスメ製品広告

華やかで豪華、ベルベットのパッケージや香水のノート、柔らかなパウダーフィニッシュのイメージです。ウルトラマリンとプラムでリッチな背景を作り、ブラッシュやモーブで繊細なタイポグラフィやハイライトを合わせましょう。ゴールドはキャップやシール、小さなラインに少量使うと上質感が出ます。アドバイス：黒系の色も立体的に見せるよう、ソフトで指向性のあるライティングを心掛けましょう。

media.ioを使用して生成されたロイヤルベルベットコスメの画像例

16) ファイナンスクラリティ

HEX： #1626C9 #111827 #F9FAFB #C7D2FE #10B981

雰囲気：信頼できて明快

最適用途：年次報告書チャート

信頼できて明快、整理されたスプレッドシートやシャープな印刷物、落ち着いた意思決定のイメージです。チャートの主要シリーズにはウルトラマリン、ミントグリーンは成長マーカーや主要KPIに使いましょう。ほぼブラックとオフホワイトは表を読みやすく、プロフェッショナルに仕上げます。アドバイス：グリッド線は薄く、ブルーで階層感を調整しましょう。

media.ioを使用して生成されたファイナンスクラリティの画像例

17) サンセットアフターストーム

HEX： #1520D6 #2B2D42 #F8F3E7 #F77F5A #CDB4DB

雰囲気：映画的でムーディー

最適用途：アルバムカバーアートワーク

映画的でムーディー、嵐があけて暖かな光が地平線を照らすような印象です。ウルトラマリンの組み合わせは音楽ブランドに特に相性が良く、オレンジが青を引き立てつつ感情を加えてくれます。アーティスト名や曲リストはクリーム色で、ラベンダーでダークとウォームを自然につなぎます。アドバイス：文字はシンプル＆中央揃えでカラーストーリーを主役にしましょう。

media.ioを使用して生成されたサンセットアフターストームの画像例

18) プレイルームプライマリーミックス

HEX： #1E2BFF #FFD166 #06D6A0 #EF476F #F8F9FA

雰囲気：遊び心があり明るい

最適用途：子ども向け絵本カバーイラスト

遊び心があり明るい、ブロックやクラフト紙、放課後のエネルギーを感じさせます。ウルトラマリンをタイトルカラーに、イエロー・グリーン・ピンクはキャラクターやシンプルな形に使い分けましょう。教育教材や子供ブランドで親しみやすさを演出できます。アドバイス：輪郭は最小限、フラットカラーでモダンな印象に。

media.ioを使用して生成されたプレイルームプライマリーミックスの画像例

19) アーキテクチュラルブループリント

HEX： #0F1FDB #0B1220 #E8EEF9 #9FB2D0 #6B7280

雰囲気：精密でモダン

最適用途：建築ポートフォリオレイアウト

精密でモダン、製図のラインや精緻な計測、洗練されたプレゼンボードの雰囲気です。ウルトラマリンはセクションタイトルや図面の線画によく合い、淡いクールカラーでページ全体を軽快に仕上げます。グレーはキャプションやメタデータに使うことで、技術的でありつつも洗練された印象に。アドバイス：線の太さは統一し、明度の高いブルーはキーポイントに。

media.ioを使用して生成されたアーキテクチュラルブループリントの画像例

20) ソフトラベンダーダスク

HEX： #1C2AE8 #2A2A3A #F5F3FF #C7B8FF #F2B5D4

雰囲気：優しく夢のよう

最適用途：ウェルネス用ランディングページ

優しく夢のよう、黄昏の空や穏やかな日常を連想させます。キーとなるボタンやセクションヘッダーにはウルトラマリン、感情的なレイヤーにはラベンダーやブラッシュを配して癒しを演出します。オフホワイトの背景で呼吸感を持たせ、特に長いスクロールページに最適です。アドバイス：丸みのあるUI要素や余白をたっぷりと使い、リラックス感を高めましょう。

media.ioを使用して生成されたソフトラベンダーダスクの画像例

ウルトラマリンブルーに合う色は？

暖色系のニュートラル（クリーム、パーチメント、サンド）はウルトラマリンをより触感的で高級に見せ、エディトリアルデザインやパッケージに最適です。真鍮やゴールドなどの金属調カラーを少量使うと、より高貴なキャラクターが際立ちます。

デジタルデザインでは、ウルトラマリンはクールグレーやほぼブラックと特に相性が良く、構造を強く保ちつつもハードにはなりません。シアンやペリウィンクルを加えると未来的・インターフェース的な雰囲気が出て、配色の一体感もキープできます。

感情のコントラストが欲しい場合は、コーラル、テラコッタ、ブラッシュ、ソフトラベンダーを試してみてください。これらのウォーム～パステルアクセントでウルトラマリンの存在感はそのままに、全体の印象をより親しみやすく表現豊かにできます。

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

まずウルトラマリンを背景色にするかアクセントにするか決めましょう。背景ならタイポグラフィは明るく（オフホワイトや淡いペリウィンクル）、鮮やかなアクセントはCTA用の“信号色”1色に絞るのがコツです。

UIでは、ウルトラマリンを一次アクションや主要ナビゲーションに割り当て、グレーや淡い色はカードや区切りなどサーフェスに使いましょう。これで階層性を維持し、ブルーの強調が“全部が主張してうるさい”状態になるのを防げます。

印刷なら、仕上げの用紙で見え方が変わるので要テスト。非光沢紙ではウルトラマリンがやわらかく、グロス仕上げではより鮮やかに出ます。本文や細部は中間色のグレーやチャコールで読みやすさを保ちましょう。

AIでウルトラマリンブルーパレットのビジュアルを作成する

HEXコードが分かっていれば、モックアップ（ポスター、ランディングページ、パッケージ、SNSテンプレなど）を自動生成するのが試す最速方法です。大きな面積で適用したときのコントラスト、雰囲気、バランスチェックも短時間でできます。

Media.ioのテキストから画像生成ツールなら「ウルトラマリンのヒーローセクション クリームの余白 ゴールドアクセント」などのプロンプトを貼り付けて、ブランドに合うまでスピーディーにパレットを調整できます。

方向性が決まったら、ダークモード版・ライトモード版・コントラスト強調のキャンペーン版などバリエーションを保存しましょう。これでWebやアプリ、印刷媒体に柔軟に展開できます。

次： ダークグレーカラーパレット