モダンウルトラマリンカラー：おすすめ20色の配色パターン

ウルトラマリン（#120A8F）は深く自信に満ちた青で、インターフェースやポスター、ブランドシステムに瞬時に構造を与えます。高級感と現代的な印象があり、デジタルや印刷物でも幅広く応用できます。

以下は厳選されたウルトラマリンのカラーパレットミックスです。HEXコード、雰囲気の説明、実用的なペアリングのコツがまとめられているので、あなたのメッセージやレイアウト条件に合ったスキームを選べます。

ウルトラマリンパレットが優れている理由

ウルトラマリンは自然な権威を持っています。レイアウトをしっかり支えられる暗さと、意図的かつエネルギッシュに感じる十分な彩度。そのバランスが、階層を必要とするシステムの頼れる「アンカーカラー」となります。

UIでは、ウルトラマリンはナビゲーションやアクティブ状態、ヒーローエレメントを太い境界線なしで分けるのに役立ちます。ブランドデザインでは、自信と信頼を示しつつ、アンバーやテラコッタ、ゴールドなど暖色のアクセントも使えます。

寒色系（シアン、シーフォーム、ペリウィンクル）と暖色系（オレンジ、ピンク、ベージュ）の両方と相性が良いので、ウルトラマリンのカラースキームは、ミニマルなラグジュアリーから大胆なキャンペーンまで雰囲気を変えても統一感を失いません。

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

1）ミッドナイトセイル

HEX： #120A8F #0B1D39 #2E5AAC #F4F1E8 #C9B18C

雰囲気： マリン・自信・洗練

最適： ブランドアイデンティティやヒーローセクション

マリンで自信に満ち、クリーンなスポットライトの下の夜の水のような印象。このウルトラマリンパレットは、プレミアムなブランド、ランディングページ、ナビゲーションバーに最適です。深い青と砂色、クリーミーホワイトを組み合わせることで、読みやすくエレガントなコントラストを保ちます。使用のコツ：アイコン、バッジ、重要なCTAなど、小さなハイライトにゴールドベージュを使いましょう。

media.ioによるミッドナイトセイルの画像例

Media.io

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

今すぐ無料で試す

2）モダンデルフト

HEX： #1E3A8A #3B82F6 #93C5FD #F8FAFC #F59E0B

雰囲気： フレッシュ・ブライト・フレンドリー

最適： アプリUI・ダッシュボード

フレッシュで明るく、陶器のタイルや晴れた日の印象。層状のブルーがUIの階層を自然に作り、温かいアンバーが瞬時に注目を集めます。最も明るいブルーとオフホワイトをベースに、深いウルトラマリンをヘッダーやアクティブタブに。コツ：オレンジは一画面に主要アクションひとつに絞り、視覚のノイズを避けましょう。

media.ioによるモダンデルフトの画像例

3）ベルベットオペラ

HEX： #1A0B6E #7C3AED #F472B6 #111827 #F9FAFB

雰囲気： ドラマティック・ラグジュアリー・アーティスティック

最適： イベントポスター・アルバムアート

ドラマティックで高級感があり、ベルベットのカーテンとステージライトのイメージです。深いインディゴとチャコールがムードを作り、バイオレットとピンクがヘッドラインの強いインパクトを加えます。淡いホワイトはタイトル周りの余白に使って、明るいアクセントが強すぎないようにしましょう。コツ：ピンクは重要なフォーカルポイント（日時・アイコン・グラデーション線など）に限定して。

media.ioによるベルベットオペラの画像例

4）コースタルインク

HEX： #162B75 #0EA5E9 #14B8A6 #E2E8F0 #0F172A

雰囲気： シャープ・モダン・コースタル

最適： SaaSサイト・インフォグラフィック

シャープで沿岸感があり、インクラインやシーグラス、クリーンな空気を連想させます。明るいシアンとティールが濃いブルーの重さを和らげ、SaaSページやデータビジュアルに最適。ライトグレーはセカンダリーパネルに、ほぼ黒はテキスト用に使います。コツ：シアンはホバーや選択状態などインタラクティブな部分だけに。

media.ioによるコースタルインクの画像例

5）ギャラリースポットライト

HEX： #1D2D8C #E5E7EB #FFFFFF #D4AF37 #111111

雰囲気： ミニマル・プレミアム・ハイコントラスト

最適： ラグジュアリー商品広告

ミニマルでプレミアム、静かなギャラリーにスポットライトが当たるような印象です。ウルトラマリンと黒が権威を示し、ホワイトやソフトグレーがシャープで編集的な雰囲気を保ちます。ゴールドは注目させたい場所（ロゴや価格表示など）だけに。コツ：背景はクリーンにして深い青が意図的な印象になるように。

media.ioによるギャラリースポットライトの画像例

6）アストラルシトラス

HEX： #1B2A9B #F97316 #FDE68A #0F172A #F8FAFC

雰囲気： ボールド・エネルギッシュ・フューチャリスティック

最適： キャンペーンバナー・CTA

ボールドでエネルギッシュ、夜空に鮮やかなシトラスの光が走る印象です。即座にコントラストと明確なCTAが必要なキャンペーンバナーに最適。深い青とチャコールを背景にし、オレンジをボタンやハイライトに。コツ：淡い黄色はヘッドラインの後ろのソフトなグローに、本文には使わないように。

media.ioによるアストラルシトラスの画像例

7）ボタニカルミッドナイト

HEX： #15206B #0F766E #84CC16 #F3F4F6 #334155

雰囲気： アース・穏やか・夜間

最適： ボタニカルイラスト・ラベル

アースで穏やか、雨上がりの庭の深い青空のような印象。グリーンはナイトトーンのベースと組み合わせることで自然かつ現代的な印象となり、プラントブランドやエコメッセージ向けにぴったりです。オフホワイトはラベルスペースに、スレートはタイポグラフィやラインワークに。コツ：鮮やかなリーフグリーンはヒーローリーフやアクセントのスタンプだけに。

media.ioによるボタニカルミッドナイトの画像例

8）ペーパーピグメント

HEX： #2431A5 #E11D48 #F1F5F9 #A3A3A3 #0B0F1A

雰囲気： 編集・パンチ・モダン

最適： 雑誌カバー・SNS投稿

編集的でパンチの効いた印象。新しいインクがクリアな紙に乗ったような雰囲気。ホットレッドが強調を即座に生み、ウルトラマリンがレイアウトをモダンに支えます。ライトグレーは十分な余白、ほぼ黒はキャプションの読みやすさ重視に。コツ：レッドはワンポイントやアンダーラインなど、一つか二つの要素だけに留め、階層の整理感を保ちます。

media.ioによるペーパーピグメントの画像例

9）レトロアーケード

HEX： #2B18FF #FF2D95 #00D1FF #0B1021 #F8FAFC

雰囲気： プレイフル・ネオン・ハイエナジー

最適： ストリームオーバーレイ・プロモーション

プレイフルでネオンライク、暗い部屋のアーケードライトの印象。エレクトリックブルーとシアンでテック感、ホットピンクが楽しく若々しいパンチを加えます。ほぼ黒をメインのキャンバスにし、鮮やかな色をコントロール。コツ：ネオンカラーはストロークやグローのハイライトに使い、面として使いすぎないことで読みやすさを保ちます。

media.ioで生成されたレトロアーケードの画像例

10）静かな図書館

HEX： #1F2A7A #6B7280 #D1D5DB #F5F3E7 #8B5E34

雰囲気： 落ち着いた、学究的、時代を超えた

最適： 出版サイトやポートフォリオ

落ち着きと学究的な雰囲気で、布製の本や柔らかな読書ランプを思い出させます。深い青がデザインを支え、温かみのあるクリームとブラウンが静かで人間味のある印象を加えます。グレーは副次的なUIや集中を妨げない長文レイアウトに使用してください。ヒント: ブラウンは小さな区切りやアイコンに限定し、控えめな味わいに保つことで、見出し色と競合しないようにしましょう。

media.ioで生成された静かな図書館の画像例

11）セラミックブルーム

HEX： #253494 #F43F5E #FB7185 #FFF7ED #22C55E

雰囲気： 明るい、花柄、創造的

最適： 招待状やステーショナリー

明るく花柄で、絵付けの陶器や春のブーケのような印象を与えます。鮮やかな青が構図を安定させ、ローズトーンが温かみと祝祭感を加えます。クリームの背景は文字の可読性を保ち、緑は小さな植物のアクセントとして使います。ヒント: ピンクを名前の後ろのリボン型として使い、テキストや枠線にはウルトラマリンを活用すると良いでしょう。

media.ioで生成されたセラミックブルームの画像例

12）ナイトマーケット

HEX： #0F1A5A #F59E0B #DC2626 #F1F5F9 #111827

雰囲気： 鮮やか、都会的、食欲をそそる

最適： フードチラシやレストランプロモーション

鮮やかで都会的な印象を与え、提灯や看板、深夜屋台を連想させます。暗めの青に温かみのあるアンバーと赤が鮮やかに映え、フードプロモーションや大胆な見出しに最適です。オフホワイトはメニューのテキストブロックに、ほぼ黒は細かい文字に使ってください。ヒント: アンバーを主要なハイライトカラーにして、赤は特別や期間限定タグでのみ使いましょう。

media.ioで生成されたナイトマーケットの画像例

13）マウンテンシャドウ

HEX： #1C2C6B #64748B #94A3B8 #E2E8F0 #16A34A

雰囲気： アウトドア、安定感、涼しげ

最適： 旅行ブログや地図UI

アウトドアで安定感があり、松の気配が漂う山陰のような印象です。スレートブルーは地図やナビゲーション、コンテンツの多いページの構造をしっかり支えます。淡いグレーブルーをキャンバスにし、緑は位置ピンやステータスマーカーに限定してください。ヒント: アクセシビリティのために、白文字は最も濃い青の上でのみ使い、緑は長文には避けましょう。

media.ioで生成されたマウンテンシャドウの画像例

14）ラグジュアリーミニマル

HEX： #1A237E #F5F5F4 #D6D3D1 #0A0A0A #C4A484

雰囲気： 高級感、静けさ、建築的

最適： パッケージやプレミアムブランディング

高級感と静けさがあり、大理石やインク、温かみのある真鍮のディテールを思わせます。このウルトラマリンカラーパレットは、コントラストと抑制が重要な高級パッケージに最適です。深い青は柔らかなストーンニュートラルと組み合わせ、タンは金属風のアクセント（封印、枠線、小さなアイコンなど）に使ってください。ヒント: ウルトラマリンは大きな面で印刷し、アクセントは細い線に限定して高級仕上げにしましょう。

media.ioで生成されたラグジュアリーミニマルの画像例

15）プリズムグラデーション

HEX： #0B0F6A #2563EB #38BDF8 #A78BFA #F8FAFC

雰囲気： クリーン、デジタル、楽観的

最適： テックランディングページやグラデーション

クリーンで楽観的、ガラスに光が屈折するような印象です。青系の段階と柔らかなバイオレットは、モダンなグラデーションやチャート、ヒーローイラストに最適です。オフホワイトで余白を確保し、中間ブルーとシアンをブレンドし深みを出してください。ヒント: バイオレットはセカンダリのグラデーションストップとして配色し、プレミアムなポイントを演出しましょう。

media.ioで生成されたプリズムグラデーションの画像例

16）ソラーポスター

HEX： #1E2A9E #FACC15 #F43F5E #0F172A #FAFAF9

雰囲気： 大胆、晴れやか、グラフィック

最適： フェスティバルポスターや告知

大胆で晴れやか、ウルトラマリンの空とポップアートの太陽の印象です。これらのウルトラマリンの配色は、大きく目立たせたいポスターに適しています。深い色調は大きな形状に使い、黄色はタイトルや日付などのスポットライト要素へ、ピンクはセカンダリとして活用してください。ヒント: オフホワイトは小さなテキストブロックのみ使い、もっとも明るい色は強調として限定しましょう。

media.ioで生成されたソラーポスターの画像例

17）スレートシーフォーム

HEX： #18206F #5EEAD4 #0F766E #CBD5E1 #1F2937

雰囲気： 涼しげ、バランス、すっきり

最適： ウェルネスブランドやウェブセクション

涼しげでバランスが良く、暗い岩に打ち寄せるシーフォームを思わせます。ミント系ティールが深い青を和らげ、ウェルネスやライフスタイルページにふさわしい落ち着きと信頼感を演出します。明るいスレートをメイン背景にして、見出しには最も濃い色調を使いましょう。ヒント: ミント色はホバーやアクティブ状態に用い、控えめな動きを付加してください。

media.ioで生成されたスレートシーフォームの画像例

18）エディトリアルネイビー

HEX： #151B54 #E5E7EB #9CA3AF #B91C1C #FFFFFF

雰囲気： 厳格、報道的、権威ある

最適： レポートや編集レイアウト

厳格で権威のある印象を持ち、ウェブ向けに再構築された新聞の雰囲気です。ネイビーとグレーは大量のコンテンツを支え、深い赤がリンクや強調にクラシックな編集アクセントを加えます。マージンには白、区切りやキャプションはグレーを使いましょう。ヒント: 赤はアラートやセクションタグなど、システム上の役割を一つに限定し、一貫性ある視認性を保ちましょう。

media.ioで生成されたエディトリアルネイビーの画像例

19）オーキッドナイト

HEX： #1B0F8A #C026D3 #F0ABFC #0B1320 #F5F3FF

雰囲気： 神秘的、夢幻的、華やか

最適： ビューティーブランディングとSNS広告

神秘的で夢幻的、暗い部屋で発光する蘭のイメージです。紫とピンクの範囲は華やかですが、深い青が現代的で落ち着いた印象も与えます。淡いラベンダーは柔らかな背景に、マゼンタは商品名やステッカーなどのハイライトに使います。ヒント: ウルトラマリンとバイオレットの間で控えめなグラデーションを加え、余分な色を足さずに深みを出しましょう。

media.ioで生成されたオーキッドナイトの画像例

20）ウォームテラコッタ

HEX： #1D2A8F #C2410C #FB923C #FDEBD0 #374151

雰囲気： 温かみ、落ち着き、手作り感

最適： ホームデコブランドとルックブック

温かく落ち着いた雰囲気で、粘土やリネン、深い青の釉薬を連想させます。テラコッタの色調は青をより豊かで親しみやすく見せ、ホームデコや手作り商品に最適です。クリームはページの主背景に、チャコールはテキストや枠線に使いましょう。ヒント: オレンジはボタンやタグなど小さなディテールに使い、青は見出しや枠を支える役割にしましょう。

media.ioで生成されたウォームテラコッタの画像例

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

ウルトラマリンはオレンジ、アンバー、テラコッタ、ゴールドなど温かみのある補色と美しく組み合わせられます。即座にコントラストが生まれ、CTAや価格、重要なラベルへの注目を集めます。

より穏やかで現代的な配色には、シアンやティール、シーフォーム、ソフトバイオレットなどのクールなアクセントをウルトラマリンに組み合わせると良いでしょう。デジタルで空気感のある雰囲気を保ちつつ、ベースブルーの深みを残せます。

ミニマルかつプレミアムに仕上げたい場合は、ウルトラマリンと白、オフホワイト、ライトグレー、ほぼ黒を組み合わせましょう。そしてメタリック（タンやゴールド）風のアクセントを少量加えることで、洗練された仕上がりになります。

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

ウルトラマリンは構造色として活用してください：見出し、ナビゲーション、セクション区切り、ヒーローパネルなど。最も明るいアクセント（オレンジ/ピンク/イエロー）はアクションやハイライトに用いて、ユーザーの注目を一つに誘導しましょう。

可読性のために本文は明るいニュートラル上に配置し、ウルトラマリン上の白文字は短い要素（ボタン、ナビラベル、バッジ）に限定してください。チャートをデザインする際は、ウルトラマリンを「主要系列」に割り当て、より淡いカラーは副系列に使いましょう。

印刷（ポスター、パッケージ、ステーショナリー）では、ウルトラマリンは広い面積、細いアクセントラインで使うのが最適です。ブルーが意図的で高級感ある印象になる一方、重く見えすぎることを防げます。

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

既にHEXコードがあれば、レイアウトやタイポグラフィ、形状などの構成を記述し、パレット色を指定することでバナーアイデアやポスター、UIモックアップを素早く作成できます。

一貫した成果を得るには、どの色が主要色か、どれが背景ニュートラルか、どれを「小さなハイライト」に限定すべきかを明記しましょう。アスペクト比（16:9や3:4など）を追加すると、画像が用途に合いやすくなります。

Media.ioのテキスト-画像生成を活用すれば、同じウルトラマリン配色を様々なフォーマット（SNS、広告、ヒーローセクションなど）で繰り返し使うことができ、ゼロから作り直す必要がありません。

次へ： ビタースイートカラーパレット