ブリリアント・パープルに合う色は？鮮やかな紫をドラマチックに引き立てる配色例【#E464F7】

ブリリアント・パープル（■#E464F7）は、赤みを含む明るく鮮やかな紫です。ストーリーボード（動画や映像のシーンを順番に並べ、構成を考える編集画面）では、選択中のシーン、主要な「シーンを追加」ボタン、現在編集中のショット番号などに絞って使うと、鮮やかな紫をドラマチックに引き立てながら台詞や尺、メモを整理しやすくなります。ここでは、クールライラックホワイト、インクプラム、ディープティールを組み合わせます。

クールライラックホワイトを土台にし、濃いプラムとティールで紫を整える

■#E464F7には、編集キャンバスや未選択シーンの背景用のクールライラックホワイト■#F8F7FB、シーン名・台詞・尺・主要ボタン文字用のインクプラム■#211B2A、プレビューやシーン設定などの補助操作用のディープティール■#2F6170を合わせる例が考えられます。

■#F8F7FBは紫みをわずかに含む明色で、複数のシーンカードやメモ欄を軽く保てます。■#211B2Aは紫みをわずかに含む低彩度の濃色なので、シーン名、台詞、尺、撮影メモなどを主役の紫より落ち着いて整理できます。■#2F6170は青緑寄りの低彩度色で、紫から色相（赤・青・緑など色みの違い）を離しながら鮮やかさを抑えているため、「プレビューを見る」「シーン設定を開く」などの補助操作を主要な追加操作と分けやすくなります。

ストーリーボードでは、ブリリアント・パープルを選択中シーンと主要操作に使う

実装では、編集キャンバスと未選択のシーンカード背景を■#F8F7FBにし、シーン名、台詞、尺、担当者、メモを■#211B2Aにします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約15.69:1です。

選択中のシーンカード、主要な「シーンを追加」ボタン背景、現在編集中のショット番号へ■#E464F7を使い、その上の文字とアイコンを■#211B2Aにすると約5.95:1です。通常サイズの文字に必要な4.5:1以上を確保できます。一方、■#E464F7と■#F8F7FBの差は約2.64:1なので、明るい背景上では紫の塗りだけで選択カードやボタンの境界を示さず、■#211B2Aの枠線やチェックアイコンを併用します。この枠線とページ背景の差は約15.69:1です。

「プレビューを見る」「シーン設定を開く」などの補助ボタンは■#2F6170を背景にし、その上の文字を■#FFFFFFにすると約6.85:1です。ディープティールとページ背景の差も約6.42:1あります。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字に4.5:1以上が必要です。また、意味のあるUI（ユーザーが操作するボタンや選択欄などの画面部品）やグラフィックを識別するために必要な視覚情報には、隣接色との3:1以上が基準になります。

ドラマチックに見せるなら、白文字や紫とティールだけの状態表示に頼らない

■#E464F7と■#FFFFFFのコントラスト比は約2.81:1なので、紫背景へ通常サイズの白文字を置く使い方は避けます。主要ボタンの文字には■#211B2Aを使います。

また、■#E464F7と■#2F6170の差は約2.44:1なので、「未着手」「編集中」「確認待ち」「完成」をこの2色だけで分けるのは避けます。状態名の文字、ショット番号、チェックマーク、レビューアイコンなども併用します。HueRollでは■#E464F7をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。