ラベンダーに合う色は？やさしく上品な配色例

ラベンダーは、淡い紫をやさしく見せたいときに使いやすい色です。CSSでは名前付き色の lavender が ■#E6E6FA と定義されています。この記事では、このラベンダー ■#E6E6FA を基準に、ウォームホワイト、グレージュ、くすみセージを合わせ、淡さを残しながら文字や操作がぼやけない配色を紹介します。

ラベンダーには、明るい中間色と深い文字色を合わせる

CSSのHSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）では、彩度は色の鮮やかさ、明度は明るさを表します。ラベンダー ■#E6E6FA のような非常に明るい色は、背景やカード面には使いやすい一方、白に近い色同士だけで構成すると要素の境界や文字が弱くなりやすいため、本文と主要操作には十分に深い色を用意します。

HueRollの補色・類似色ガイドでは、類似色は背景やセクションの連続性を作りやすく、離れた色相はアクセントに向くと説明されています。ラベンダーをやさしく見せたい場合は、鮮やかな補色を大きく使うより、グレージュや低彩度のセージのような静かな色を補助面へ置くと、淡さを残しながら面を分けやすくなります。

やさしく上品に見せる3つの組み合わせ

本文色にはダークチャコール ■#2E2B33 を使うと、ウォームホワイト ■#FBF8F4 上で約13.14:1、ライトグレージュ ■#EDE6DD 上で約11.24:1、くすみセージ ■#D8E1D2 上で約10.35:1です。いずれもWCAG 2.2（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）が通常サイズの文字に求める4.5:1以上を満たします。

一方、ラベンダー ■#E6E6FA をウォームホワイト ■#FBF8F4 上の通常文字にすると、比率は約1.16:1です。白文字 ■#FFFFFF をラベンダー ■#E6E6FA の上に置く場合も約1.23:1で不足します。ラベンダーの塗り面に文字を置くなら、ダークチャコール ■#2E2B33 なら約11.30:1です。

主要リンクやCTA（行動を促すボタン）には、ディープバイオレット ■#574E78 を使う方法があります。ウォームホワイト ■#FBF8F4 との比率は約7.17:1、ライトグレージュ ■#EDE6DD とは約6.13:1、くすみセージ ■#D8E1D2 とは約5.65:1です。白文字 ■#FFFFFF をディープバイオレット ■#574E78 のボタン上に置く場合も約7.59:1です。

やさしさは淡色で作り、操作性は濃色で確保する

ラベンダーを使う予約ページや紹介ページでは、ラベンダーをカードや見出し背景へ使い、ウォームホワイトをページ全体、グレージュを補助面、ディープバイオレットを主要ボタンへ割り当てると、色の役割を整理できます。60–30–10の考え方も、数値を厳密に測るのではなく、背景を広く、補助色を中程度、アクセントや操作色を小さく使う目安として扱います。

また、選択状態や重要度をラベンダーと別の淡色の違いだけで伝えないようにします。WCAGでは、色を情報伝達の唯一の視覚的手段にしないことが求められています。文字ラベル、アイコン、下線、枠線などを併用してください。

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