ディープ・パープルに合う色は？深紫の存在感を引き立てる配色例【#881B98】

ディープ・パープル（■#881B98）は、赤みを含む紫に深さを加えた色です。Webサイトでは、採用サイトや募集職種ページで、職種名、セクション見出し、主要な「応募する」ボタンなどに使うと、明るい紫よりも存在感を出しながら落ち着いた画面へまとめやすくなります。ただし、紫系を背景・見出し・ボタンへ広く使いすぎると、募集要項や社員写真よりUIの色が強く見えたり、募集中・募集終了などの状態が色だけで示されたりしやすくなります。ここでは、ペールラベンダー、チャコールプラム、ミューテッドアクアを合わせ、深紫を主役にしながら採用情報を整理しやすい配色を考えます。

ペールラベンダーを土台にし、アクアで深紫に静かな色相差を作る

■#881B98には、背景用のペールラベンダー■#F6F3F7、本文や補助文字用のチャコールプラム■#3A3540、アクセント用のミューテッドアクア■#AFC9C6を合わせる例が考えられます。

■#F6F3F7はごく薄い紫みを含む明色で、ディープ・パープルとのつながりを残しながら募集要項や社員紹介カードの面を明るくできます。■#3A3540は紫みをわずかに含む低彩度の濃色なので、仕事内容、勤務地、応募条件などを主役色より控えめに整理できます。■#AFC9C6は青緑寄りの低彩度色で、紫から色相を離しつつ鮮やかさを上げすぎないため、深紫の存在感を残しながら静かな変化を加えられます。

採用サイトでは、ディープ・パープルを職種名と応募導線に集める

実装では、募集要項や社員紹介カードの広い背景を■#F6F3F7にし、職種名、部門見出し、主要な「応募する」ボタン背景などへ■#881B98を使います。仕事内容や勤務地、補足条件は■#3A3540へ分けると、深紫を要点と主要操作へ限定できます。UI（ユーザーが操作するボタンや選択欄などの画面部品）の補助操作には、濃い■#881B98の面に■#AFC9C6の小さな副ボタンやラベルを置き、その文字を■#3A3540にする方法があります。

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

存在感を活かすなら、募集状態と選択状態を紫だけで伝えない

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

また、「募集中」「募集終了」や職種フィルターの「選択中」などは、色だけで区別せず、状態名の文字、アイコン、太めの枠線なども併用します。社員写真やオフィス写真に紫系が多い場合は、ページ全体へさらに紫を増やすより、■#F6F3F7の余白を十分に残す方が写真と操作を分けやすくなります。HueRollでは■#881B98をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。