バイオレットに合う色は？鮮やかさを活かす色合わせ

バイオレットは、紫系の鮮やかさを目立たせたいときに使いやすい色です。CSSでは名前付き色の violet が ■#EE82EE と定義されています。HueRoll内の「ピュア・バイオレット」などの色名とは別に、この記事ではWeb標準の violet ■#EE82EE を具体例として、鮮やかさを残しながら画面全体を強くしすぎない配色を考えます。

バイオレットは、明るい背景と深い操作色で支える

CSSのHSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）では、彩度100%は完全に彩度のある色、0%は無彩色です。鮮やかなバイオレット ■#EE82EE を主役にする場合、周囲まで高彩度にせず、背景やカード面は明るく静かな色へ分けると、アクセントの役割が明確になります。

HueRollの補色・類似色ガイドでも、補色のように差の強い色は大面積で競い合いやすく、類似色は背景やセクションの連続性を作りやすいと説明されています。バイオレットでは、淡いライラックを補助面に使い、反対側に近い黄緑を取り入れる場合も、鮮やかな黄緑ではなく低彩度の淡い色へ落とすと、バイオレットの鮮やかさを残しやすくなります。

鮮やかさを活かす3つの組み合わせ

本文色にはダークプラム ■#2C2330 を使うと、フロストホワイト ■#FFF8FE 上で約14.47:1、ペールライラック ■#F3E6F4 上で約12.54:1、ペールイエローグリーン ■#E9F1C8 上で約12.86:1です。いずれもWCAG 2.2（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）が通常サイズの文字に求める4.5:1以上を満たします。

一方、バイオレット ■#EE82EE をフロストホワイト ■#FFF8FE 上の通常文字に使うと、比率は約2.22:1です。白文字 ■#FFFFFF をバイオレット ■#EE82EE の上に置く場合も約2.32:1で不足します。バイオレットの塗り面に文字を置くなら、ダークプラム ■#2C2330 なら約6.52:1です。

主要リンクやCTA（行動を促すボタン）には、ディープバイオレット ■#6B246F を使う方法があります。フロストホワイト ■#FFF8FE との比率は約9.54:1、ペールライラック ■#F3E6F4 とは約8.28:1、ペールイエローグリーン ■#E9F1C8 とは約8.49:1です。白文字 ■#FFFFFF をディープバイオレット ■#6B246F のボタン上に置く場合も約9.97:1です。

鮮やかさは色数ではなく、面積と役割で見せる

バイオレットを活かしたいとき、さらに鮮やかな色を増やす必要はありません。バイオレット ■#EE82EE はバッジ、グラフの1系列、装飾、重要な数値などへ限定し、主要操作はディープバイオレット ■#6B246F に分けると、鮮やかさと操作性を両立しやすくなります。

60–30–10の考え方も、数値を厳密に測るのではなく、背景を広く、補助色を中程度、鮮やかなアクセントを小さく使う目安として扱います。また、選択状態や重要度を色だけで伝えず、文字ラベル、アイコン、下線、枠線なども併用してください。

HueRollでは、基準色からティント、シェード、補色、類似色、各種配色、60–30–10の候補を確認できます。バイオレットを選んだら、ティントで背景候補、シェードで操作色候補を探し、補色側の候補は小さな面積で比較すると、鮮やかさを保ちながら役割を分けやすくなります。HueRollのコントラスト確認は選択色と白・黒の比較に限られるため、この記事で示した任意の2色同士の比率は別途計算した値です。