ディープ・ブルーに合う色は？濃い青を知的に見せる組み合わせ【#1B3A98】

ディープ・ブルー（■#1B3A98）は、鮮やかさを残しながら明るさを抑えた濃い青です。Webサイトでは、開発者向けのAPIドキュメントや技術資料ページで、ページタイトル、機能見出し、主要な「APIキーを取得」ボタンなどに使うと、明るいブルーよりも落ち着きを残しながら知的な方向へまとめやすくなります。API（Application Programming Interface）は、アプリやサービス同士がデータをやり取りするための仕組みです。ただし、青やネイビーを背景・見出し・ボタンへ広く使いすぎると、説明文やコード例との強弱が曖昧になり、選択中の言語タブなども色だけで示されやすくなります。ここでは、クールオフホワイト、グラファイトスレート、ダスティクレイを合わせ、濃い青を主役にしながら技術情報を整理しやすい配色を考えます。

クールオフホワイトを土台にし、ダスティクレイで青へ穏やかな温度差を加える

■#1B3A98には、背景用のクールオフホワイト■#F4F6FA、本文や補助文字用のグラファイトスレート■#343B49、アクセント用のダスティクレイ■#D8B2A8を合わせる例が考えられます。

■#F4F6FAはわずかに青みを含む明色で、ディープ・ブルーとのつながりを残しながら本文やコード説明の面を明るくできます。■#343B49は青みを少し含む低彩度の濃色なので、本文、注記、パラメーター説明などを基準色より控えめに整理できます。■#D8B2A8は赤みを含む低彩度色で、青から色相を離しつつ鮮やかさを上げすぎないため、寒色中心の技術ページへ穏やかな温度差を加えられます。

APIドキュメントでは、ディープ・ブルーをページ名と主要操作に集める

実装では、本文や仕様カードの広い背景を■#F4F6FAにし、ページタイトル、機能見出し、主要な「APIキーを取得」ボタン背景などへ■#1B3A98を使います。本文や注記、入力値の説明は■#343B49へ分けると、ディープ・ブルーを要点と主要操作へ限定できます。UI（ユーザーが操作するボタンや選択欄などの画面部品）の補助操作には、濃い■#1B3A98の面に■#D8B2A8の小さな副ボタンやラベルを置き、その文字を■#343B49にする方法があります。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#1B3A98と■#F4F6FAは約9.22:1、■#343B49と■#F4F6FAは約10.39:1、■#343B49と■#D8B2A8は約5.81:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、■#1B3A98と■#D8B2A8は約5.16:1なので、濃い青の面に置く意味のあるUI部品を識別するための視覚情報として必要な3:1以上も確保できます。

知的に見せるなら、選択状態やエラーを青だけで伝えない

■#D8B2A8と■#F4F6FAのコントラスト比は約1.79:1です。そのため、明るい背景上の通常文字には使わず、ボタンや入力欄の存在をこの2色の境界だけで伝える使い方も避けます。明るい面で操作要素を区切る場合は、■#1B3A98や■#343B49の枠線・文字を組み合わせます。

また、コード例の言語タブの「選択中」や入力内容の「エラー」などは、青やクレイの色だけで区別せず、太めの枠線、下線、アイコン、状態を示す文字なども併用します。知的に見せたい場合でも、青の面積を増やすほど効果が高まるとは限りません。■#F4F6FAの余白やカードを十分に残し、ディープ・ブルーを見出しと操作へ集めると、情報の階層を整理しやすくなります。HueRollでは■#1B3A98をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。