リッチ・バイオレットに合う色は？深い紫を華やかに引き立てる色合わせ【#6614B8】

リッチ・バイオレット（■#6614B8）は、青みと赤みを併せ持つ深い紫です。Webサイトでは、展覧会や舞台イベントの特設ページで、イベント名、選択中の日程、主要な「チケットを申し込む」ボタンなどに使うと、暗く沈ませすぎずに紫の華やかさを見せやすくなります。ただし、紫を背景や見出し、ボタンへ一度に広げると、写真や開催情報より色の存在感が強くなりやすいため、明るい面と低彩度の補助色を組み合わせて役割を分けることが大切です。ここでは、ペールライラック、インクネイビー、ウォームサンドを合わせ、深い紫を華やかに引き立てる配色を考えます。

ペールライラックを土台にし、黄みのあるサンドで紫に温度差を加える

■#6614B8には、背景用のペールライラック■#FAF7FC、本文や補助文字用のインクネイビー■#2A2430、補助操作用のウォームサンド■#D8C3A5を合わせる例が考えられます。

■#FAF7FCはごく淡い紫みを含む明色で、リッチ・バイオレットとの色相のつながりを残しながら大きな明度差を作れます。■#2A2430は青紫をわずかに含む濃色なので、開催日時、会場名、料金、注意事項などを落ち着いて整理できます。■#D8C3A5は黄みを含む低彩度のベージュで、紫から色相を離しながら鮮やかさを抑えているため、深い紫を主役にした画面へ温かい変化を加えられます。

イベントページでは、リッチ・バイオレットをイベント名と主要操作に集める

実装では、開催概要や日程カードの広い背景を■#FAF7FCにし、イベント名、選択中の日程、主要な「チケットを申し込む」ボタン背景などへ■#6614B8を使います。その上の文字は■#FAF7FCにすると、通常サイズの文字に必要なコントラストを確保できます。開催日時、会場名、料金、注意事項は■#2A2430へ分けると、バイオレットを要点と主要操作へ限定できます。

UI（ユーザーが操作するボタンや日程選択などの画面部品）の補助操作には、濃い■#6614B8の帯やパネル上に、■#D8C3A5の「会場情報を見る」ボタンやラベルを置き、その文字を■#2A2430にする方法があります。

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

華やかさを保つなら、日程の選択状態を紫とサンドだけで伝えない

■#D8C3A5と■#FAF7FCのコントラスト比は約1.61:1です。そのため、明るい背景上でウォームサンドの面だけを使ってボタンや日程カードの境界を示すのは避け、■#2A2430の枠線や文字を組み合わせます。

また、「選択中」「受付中」「完売」などの日程や販売状態は、バイオレットとサンドの色分けだけに頼らず、状態名の文字、チェックマーク、太めの枠線なども併用します。舞台写真や展示作品に紫が多い場合は、ページ全体へさらに■#6614B8を広げるより、■#FAF7FCの余白を十分に残す方が、写真と操作を分けやすくなります。HueRollでは■#6614B8をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。