イエロー×ダークブルー配色見本｜HEXコード＆使い方のポイント

イエローとダークブルーは、使用できる最もクリアな高コントラストの組み合わせの1つです。注目を集めるほど大胆ですが、プロフェッショナルに感じられるほど構造化されています。

ブランディング、UI、プリントでは、深い青が信頼と読みやすさをもたらし、黄色がハイライト、行動の呼びかけ、重要な情報にエネルギーを追加します。

ダークブルーとイエローの組み合わせがうまく機能する理由

濃い青と黄色の組み合わせは、温度とコントラストのバランスをとるため機能します。青は安定して深みがあり、黄色は明るく即座に感じられます。これらは一緒になって、多くの余分な色を必要とせずに自然な視覚的階層を作成します。

ダークブルーは、特に読みやすさと「信頼できる」トーンが必要な場合に、タイポグラフィと UI コンポーネントの信頼性の高いベースも提供します。黄色は、ハイライト、通知、行動の呼びかけに最適なアクセントになります。

控えめに使用すると、濃い青と黄色の組み合わせは、大きな音ではなくプレミアムに見える可能性があります。特に、ソフトニュートラル (クリーム、オフホワイト、グレー) を追加して目を休ませる場所を与える場合はそうです。

20 以上のダークブルーとイエローのカラー パレットのアイデア (十六進コード付き)

1) 日当たりの良い港

十六進：#0b1f3b #123a63 #f6c445 #fff2c6 #2f5f8f

気分：新鮮、航海的、楽観的

最適な場合:トラベルブランディングとヒーローバナー

新鮮で海のような雰囲気で、さわやかな空気と澄んだ水の静かなドックで早朝の太陽のように感じられます。見出しとナビゲーションにはネイビーのトーンを使用し、暖かい黄色で CTA とキー バッジを強調します。たっぷりのホワイトスペースと組み合わせると、清潔で海岸のような外観になります。ヒント: 最も明るい黄色を小さくて衝撃の強い要素に保ち、大きな音ではなくプレミアムと読み取るようにします。

media.ioを使って生成した太陽に照らされた港の画像例

メディア.io

Media.io は、ブラウザでビデオ、画像、オーディオを作成および編集するためのオンライン AI スタジオです。

今すぐ無料でお試しください

2) ミッドナイトマスタード

十六進：#071a2e #0f2d4a #d4a017 #f1e7c7 #3b6a93

気分：ムーディーで洗練されたハイコントラスト

最適な場合:プレミアムパッケージと製品広告

ムーディーで洗練された、キャンドルに照らされた部屋と真夜中の壁に磨かれた真鍮を思い出させます。濃い青と黄色の色の組み合わせとして、最も濃い青が背景を運び、マスタードがコントロールされたアクセントとして機能する場合に優れています。ラベルと成分パネルに呼吸室のための温かいクリームを追加します。ヒント: マットなディープブルーの表面と光沢のあるマスタードのハイライトを 1 つ使用して、デザインに触感を与えます。

media.ioを使って生成したミッドナイトマスタードの画像例

3) 航海ビーコン

十六進：#0a2440 #1b4f72 #ffd24a #f7f9fc #2d2a32

気分：明快、自信、エネルギッシュ

最適な場合:スポーツグラフィックとチームグッズ

透き通って自信があり、海の霧を切り裂く灯台のビームのように感じられます。数字、ストライプ、行動の呼びかけには明るい黄色を保ち、深い青がベースの衣服を固定します。ほぼ白は、小さなテキストとステッチの詳細の読みやすさをサポートします。ヒント: チャコールをアウトラインカラーとして予約して、余分な色合いを追加せずにエッジをシャープにします。

media.ioを使って生成した航海ビーコンの画像例

4) 博物馆のスポットライト

十六進：#0d1b2a #1b263b #f2b705 #e0e1dd #415a77

気分：ドラマチック、厳選された、エレガント

最適な場合:展覧会ポスター・編集表紙

ドラマチックでキュレーションされたこの作品は、1 つのアートワークに温かいスポットライトが当たるギャラリー ホールを思い起こさせます。この黄色のダークブルーのカラーパレットは、深いブルーが大きく静かなフィールドを形成し、ゴールデントーンがタイトルや日付をマークするときに最も効果的です。ソフトグレーを紙のようなネガティブスペースとしてキャプションやクレジットに使用してください。ヒント: 黄色を狭い垂直バーとして設定して、即時の焦点線を作成します。

media.ioを使って生成したミュージアムスポットライトの画像例

5) 海岸沿いのタクシーウェイ

十六進：#082032 #2c394b #ffcc29 #f4f4f4 #334756

気分：モダン、構造化された、主張的な

最適な場合:ダッシュボードUIとデータの多いアプリ

モダンで構造的で、滑走路のマーキングと鮮明な方向標識を示唆しています。サイドバーとデータテーブルには最も濃い青を使用し、アクティブな状態とアラートには明るい黄色を使用します。オフホワイトはチャートを読みやすくし、インターフェイスの重さを防ぎます。ヒント: 主ボタンなどの 1 つの UI ロールに黄色を制限して、ユーザーがパターンを即座に学習できるようにします。

media.ioを使って生成した沿岸誘導路の画像例

6) デニム ダフォディル

十六進：#102a43 #243b53 #fbd34d #fff8db #486581

気分：フレンドリー、カジュアル、日当たりの良い

最適な場合:ソーシャルテンプレートとライフスタイルブログ

フレンドリーでカジュアルで、ポケットに水仙を押し込んだデニムのような感触です。中央のブルーがボディテキストとフレームを処理し、柔らかい黄色がハイライトとステッカーを持ち上げます。淡いクリームは、長い読書やカルーセル投稿のために全体的な外観を風通しがよく保ちます。ヒント: 忙しいレイアウトの硬いエッジを柔らかくするために、最も明るいトーンで微妙な丸みを帯びた形状を追加します。

media.ioを使って生成したデニム水仙の画像例

7) 产业安全

十六進：#001d3d #003566 #ffc300 #e5e5e5 #000814

気分：大胆で、実用的で、警告準備ができている

最適な場合:建設ブランディングと安全標識

大胆で実用的で、ハザードテープをスチールや夜間の作業ライトに対してチャネリングします。標識の背景に最大限のコントラストを与えるには、ほぼ黒と深い青を使用し、明るい黄色をアイコンとキー指示に適用します。ニュートラルグレーは、競合することなくセカンダリノートを読みやすく保ちます。ヒント: ダークブルーよりも黄色のテキストの文字間隔をわずかに大きくして、振動を軽減し、遠くでの読みやすさを向上させます。

media.ioを使って生成した産業安全の画像例

8) エクリプスレモネード

十六進：#0b1320 #1c2541 #ffdd57 #f6f3ea #3a506b

気分：映画的で、滑らかで、少し遊び心がある

最適な場合:イベントチラシと音楽プロモーション

映画のようで滑らかで、炭酸ガスのレモネードのひねりを加えた日食の輝きのように見えます。深いブルーにチラシを作って夜空をベースにし、レモンイエローにラインナップとチケットリンクをスポットライトさせます。クリーミーなオフホワイトは、小さなテキストが鮮明になることなく鮮明に保ちます。ヒント: 2 つのブルーの間に柔らかいグラデーションを使用して、ブランドを維持しながら深みを追加します。

media.ioを使って生成したeclipse lemonadeの画像例

9) ロイヤルワークショップ

十六進：#0a1f44 #1f3c88 #f7c948 #f0f4ff #2a6f97

気分：賢く、独創的で、楽観的

最適な場合:スタートアップのランディングページと機能セクション

スマートで独創的な、アイデアが所定の位置にクリックする明るいワークショップのように感じます。これらの黄色と濃い青の色の組み合わせは、ランディングページで輝きます。構造と信頼性のために深い青を使用し、黄色を控えめに適用して製品の価値に注意を向けます。淡い青白により、コンテンツブロックは軽やかでスキャン可能に感じられます。ヒント: アイコンは 1 つの一貫した青に保ち、インタラクティブな状態のみに黄色を予約します。

media.ioを使って生成したロイヤルワークショップの画像例

10）ストーミーマリーゴールド

十六進： #0b2545 #13315c #f9a826 #eef2f3 #1f7a8c

気分： 冒険的、沿岸、風が強い

最適な場合: アウトドア用ギア広告とルックブック

冒険心があり風になびくようなイメージで、嵐雲が暖かなマリーゴールド色の地平線にかかる様子を思い出させます。濃いブルーはジャケット、タイポグラフィ、ハイコントラストなヘッダーに使用し、オレンジイエローはタグや価格表示にアクセントとして活用します。クールなオフホワイトは商品詳細や技術的な情報を支えます。ポイント：ティールはステッチや小さなUIパーツなどに控えめに使い、パレットの一体感を保ちましょう。

media.ioを使って生成したストーミーマリーゴールドの画像例

11）シティトラムグロウ

十六進： #0f172a #1e3a8a #fbbf24 #f8fafc #334155

気分： 都会的、クリスプ、エネルギッシュ

最適な場合: 案内標識と公共情報グラフィック

都会的でクリアな雰囲気は、夜の濡れた舗道に反射するトラムの光のように感じられます。ディープネイビーとスレートは情報のヒエラルキーを強調し、アンバーヤローが停車場やアラートを一目でわかるようにします。ほぼ白の色はマップやラベルに使い、細部が鮮明に保たれます。ポイント：複雑な図では視覚的混乱を防ぐため、アイコンのような1つのシンボルファミリーだけにイエローを使いましょう。

media.ioを使って生成したシティトラムグロウの画像例

12）ブルーアワーピクニック

十六進： #101935 #23395d #f2d95c #f7f3e3 #406e8e

気分： 穏やか、ノスタルジック、優しい

最適な場合: 結婚式の招待状やステーショナリー

穏やかでノスタルジックな雰囲気は、ランタンの灯りと柔らかな笑い声がひびく暮れなずむピクニックを想起させます。ディープブルーは名前やフォーマルな部分に使い、バターイエローを枠や封蝋モチーフ、小さな花模様に添えます。温かいクリーム色の紙感がロマンチックで印刷向きです。ポイント：テクスチャ入りの用紙を選び、イエローは控えめに使うと上品なインク仕上げになります。

media.ioを使って生成したブルーアワーピクニックの画像例

13）ヴィンテージステーショナリー

十六進： #0b2239 #2b4c7e #e8b339 #f3e9dc #6b7c93

気分： 伝統、学術的、暖かい

最適な場合: 書籍カバーや文房具セット

伝統的で学術的な雰囲気は、年月を重ねたノートやインクスタンプ、真鍮のデスクツールを思わせます。深いブルーはタイトルや背表紙に合い、控えめなイエローは派手すぎずアンティークな箔のように読めます。パーチメント調のクリームは大きな背景に、グレイッシュブルーはサブテキスト用に。ポイント：中間のブルーで細い枠をつけるとレイアウトが引き締まりヴィンテージ感を強調します。

media.ioを使って生成したヴィンテージステーショナリーの画像例

14）ゴールデン天文台

十六進： #06121f #0b3c5d #f9c74f #f1faee #1d6a96

気分： 好奇心旺盛、宇宙的、洗練された

最適な場合: サイエンスポスターや学会スライド

好奇心と宇宙的な広がりを感じさせる配色で、温かいゴールドのマーカーが星座をたどる天体地図を想起させます。一番暗いブルーは背景や図に使い、イエローで重要ポイントや強調を。クールなオフホワイトは情報量の多い内容を眩しさなく支えます。ポイント：イエローのデータポイントが際立つよう、中間のブルーでグラフの格子を引きましょう。

media.ioを使って生成したゴールデン天文台の画像例

15）キャンパスクレスト

十六進： #0a1931 #185adb #ffc947 #f6f6f6 #2e3a59

気分： 力強い、大学風、活気がある

最適な場合: クラブブランディングやキャンパスポスター

力強く大学らしい色味は、クレストやバナー、明るいスタジアムの灯りを思い起こさせます。このイエローダークブルーのカラーパレットは遠くからでも一目で目立つ必要がある学生団体のブランディングに最適です。ロイヤルブルーは大きな形状に、イエローは印象的な見出しに、淡いグレーはポスターのベースに。ポイント：ロイヤルブルーはアンコート紙だと色味が変わるので、小さな試し刷りを先に行いましょう。

media.ioを使って生成したキャンパスクレストの画像例

16）ナイトマーケットサイン

十六進： #0b132b #1c2541 #f8c630 #eaeaea #5bc0be

気分： 活気がある、ネオン調、ストリートテイスト

最適な場合: レストランメニューやプロモカード

活気がありストリート感のあるパレットで、賑やかな夜市の上に輝く看板のような雰囲気です。濃いブルーはメニュー背景や写真枠に、イエローは価格や特集コールアウトを目立たせるのに使います。ライトグレーは密集したセクションでもテキストを読みやすく保ちます。ポイント：ティールはスパイスレベルなどの小さなマーカー専用にし、主役カラーと競合しないようにしましょう。

media.ioを使って生成したナイトマーケットサインの画像例

17）オータムセイルクロス

十六進： #0b2d39 #1d4e89 #f0b429 #fff3d6 #1a936f

気分： アーシー、アウトドア、信頼感

最適な場合: キャンピングブランドや季節キャンペーン

アースカラーで自信を感じさせる配色は、帆布や松の葉、秋遅くの太陽を連想させます。ディープブルーはロゴやバナーのしっかりしたベースに、ゴールデンイエローはバッジや限定オファーに温かみをプラス。クリームは通気性のある背景に、グリーンは自然のニュアンスを控えめに。ポイント：グリーンはレイアウトの10％未満に抑え、青と黄の印象を保ちましょう。

media.ioを使って生成したオータムセイルクロスの画像例

18）ギャラリーナイトフォール

十六進： #050a30 #1b2cc1 #fcbf49 #f5f5f5 #2d2d2a

気分： アートな、高エネルギー、現代的

最適な場合: クリエイティブエージェンシーブランディングやリールカバー

アートで高エネルギーな雰囲気は、ギャラリーオープンで鮮烈な光とシャープな影を思わせます。エレクトリックブルーがモダンなインパクトを、暖かいイエローが親しみやすさと人間味も加えます。白は余白で使い、チャコールはタイポグラフィの細部に。ポイント：一番明るいブルーはロゴなど各フレームで1点だけにし、イエローのアクセントを邪魔しないように。

media.ioを使って生成したギャラリーナイトフォールの画像例

19）アスレチッククラシック

十六進： #0a2342 #2ca6a4 #f6bd60 #ffffff #1d3557

気分： クリーン、スポーティ、前向き

最適な場合: フィットネスアプリUIやオンボーディング

クリーンでスポーティな雰囲気は、新しいユニフォームや明るいトレーニングコーンのようなイメージです。一番濃いブルーはヘッダーやナビに使い、暖かなイエローは進捗や報酬に用います。白はインターフェースに抜け感を与え、素早いスキャンに役立ちます。ポイント：ティールはサブアクションにのみ配し、メインの黄色いアクセントの役割を際立たせましょう。

media.ioを使って生成したアスレチッククラシックの画像例

20）クワイエットライブラリーランプ

十六進： #0b1d39 #1c3f60 #ffd166 #f6f1e9 #4f6d7a

気分： 穏やか、勉強熱心、温かい

最適な場合: 教育ブログや講義スライド

穏やかで勉強に集中できる優しい配色は、深夜の静かな図書館で温かいデスクランプにつつまれる雰囲気です。こうしたイエローダークブルーの組み合わせは、強いコントラストながらも痛くならない見やすさで、レッスンやチュートリアルに最適です。構造や見出しにブルーを使い、イエローはキーワードやチェックポイントに控えめに。ポイント：長文はソフトなブルーグレーにすると、目の疲れを軽減できます。

media.ioを使って生成したクワイエットライブラリーランプの画像例

イエローダークブルーと相性の良い色は？

ニュートラルな色（白、クリーム、ライトグレー）は組み合わせやすく、イエローもダークブルーも息苦しくならず読みやすく保てます。印刷では暖かいオフホワイトを選ぶとイエローがより豊かで柔らかな印象に。

アクセント「色」が欲しいときは、ティールやシーフォーム系を使うことで、イエローとブルーの間を橋渡しでき、沿岸やスポーティな雰囲気も出せます。チャコールやブラックに近い色は輪郭や影、細かい文字用におすすめです。

高級感を目指すなら、抑えたゴールドやブラス（金属風イエロー）と、クールなスレートブルー（石板色）をUIやグラフの背景にどうぞ。

黄色のダークブルーのカラーパレットを実際のデザインで使用する方法

まずはダークブルーを基盤に使いましょう：背景・ヘッダー・ナビゲーションや大きな図形など。構造ができて、意図したデザインがうるさく感じにくくなります。

イエローはスポットライトのように使いましょう：メインボタン、重要な数字、バッジやラベルなど。役割を1つに絞ると（CTAやアラート、ハイライトなど）、UIが覚えやすく、レイアウトもスキャンしやすくなります。

中立的なパネルカラー（クリームやオフホワイト）を本文やフォーム、長文ブロックに使用してください。視覚疲労を抑えて、さまざまなデバイスや照明でもアクセシビリティを保てます。

AIで黄色ダークブルーのパレットビジュアルを作成

イエロー＆ダークブルーのパレットをポスターやランディングページ、パッケージやUIで試したいときは、素早くモックアップを作ればコントラストや雰囲気をすぐ確認できます。

Media.ioのテキストから画像生成ツールを使えば、プロンプトを貼り付けて、レイアウトや色の強弱を数秒で試作可能。レモンのような明るいイエロー、マスタード、ゴールドなど最適な黄色を素早く決められます。

次へ： シャンパンゴールドのカラーパレット