ディープ・インディゴに合う色は？深い青紫を重厚にまとめる配色【#2A1B98】

ディープ・インディゴ（■#2A1B98）は、青の冷静さと紫の深さをあわせ持つ濃い青紫です。Webサイトでは、大学や研究機関の研究プロジェクト紹介ページで、研究テーマ名、セクション見出し、主要な「論文を見る」ボタンなどに使うと、明るい青よりも重みを残した構成へまとめやすくなります。ただし、青紫やネイビー系を広い面積へ重ねると、研究概要や図表よりUIの色が強く見えたり、研究分野フィルターの選択状態が色だけで示されたりしやすくなります。ここでは、ウォームパーチメント、グラファイトネイビー、ミューテッドブラスを合わせ、深い青紫を重厚に見せながら研究情報を整理しやすい配色を考えます。

ウォームパーチメントを土台にし、ブラスで青紫へ穏やかな温度差を加える

■#2A1B98には、背景用のウォームパーチメント■#F5F1E8、本文や補助文字用のグラファイトネイビー■#343744、アクセント用のミューテッドブラス■#C4B58Aを合わせる例が考えられます。

■#F5F1E8は黄みをわずかに含む明色で、インディゴとの明度差を大きくしながら、真っ白よりもやわらかな情報面を作れます。■#343744は青みを少し含む低彩度の濃色なので、研究概要、著者名、更新日などを主役色より控えめに整理できます。■#C4B58Aは黄みを含む低彩度色で、青紫から色相を離しつつ鮮やかさを上げすぎないため、重い寒色の中へ穏やかな温度差を加えられます。

研究プロジェクト紹介では、インディゴを研究テーマと主要操作に集める

実装では、研究概要や成果カードの広い背景を■#F5F1E8にし、研究テーマ名、分野見出し、主要な「論文を見る」「成果を読む」ボタン背景などへ■#2A1B98を使います。本文や著者情報、更新日は■#343744へ分けると、ディープ・インディゴを要点と主要操作へ限定できます。UI（ユーザーが操作するボタンや選択欄などの画面部品）の補助操作には、濃い■#2A1B98の面に■#C4B58Aの小さな副ボタンやラベルを置き、その文字を■#343744にする方法があります。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#2A1B98と■#F5F1E8は約10.90:1、■#343744と■#F5F1E8は約10.49:1、■#343744と■#C4B58Aは約5.81:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、■#2A1B98と■#C4B58Aは約6.04:1なので、濃いインディゴの面に置く意味のあるUI部品の境界として必要な3:1以上も確保できます。

重厚さを保つなら、研究分野の選択状態を色だけで伝えない

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

また、研究分野フィルターの「選択中」や資料の「公開済み」などの状態は、色だけに意味を持たせず、文字、チェックマーク、太めの枠線なども併用します。重厚に見せたい場合でもページ全体を暗い青紫へ寄せる必要はありません。■#F5F1E8の余白や情報カードを十分に残し、インディゴを見出しと操作へ集めると情報の階層を作りやすくなります。HueRollでは■#2A1B98をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。