ヘリオトロープはどんな色？色見本と合わせる色の選び方

ヘリオトロープはどんな紫色で、Webデザインでは何色と合わせればよいのでしょうか。花に由来する色名ですが、色見本によって青みや赤み、鮮やかさに違いがあります。二つの見本を比べ、用途に合わせて背景・文字・ボタンの色を組み立てる方法を紹介します。

ヘリオトロープは花に由来する紫系の色

ヘリオトロープは、和名をニオイムラサキという花の名前から広まった色名です。ただし、色名に対応するHEXコードが世界共通で一つに決まっているわけではありません。HEXは、Webの色を「#」と6桁の英数字などで表すカラーコードの書き方です。

例えば、国内の色名資料には青紫寄りの■#886BB7、英語圏のデジタル色見本には明るい赤紫寄りの■#DF73FFをヘリオトロープとする例があります。色名だけで指定すると意図と違う色になる可能性があるため、制作時は見本とコードを一緒に共有しましょう。

二つを並べると、前者は少し落ち着いた青紫、後者は明るく鮮やかな紫として使い分けられます。どちらも唯一の正解という意味ではなく、記事内で比較するための参考色です。

背景・文字・ボタンに役割を分ける配色例

落ち着いた手仕事の講座案内ページなら、青紫寄りの見本を細い飾り線に使う組み合わせが考えられます。背景は淡い紫みの白■#FAF8FC、見出しと本文は濃い紫がかったグレー■#30243A、見出し脇の短い線にはヘリオトロープ■#886BB7を使います。申込みボタンはさらに濃い紫■#62447Aを背景、白■#FFFFFFを文字にすると、飾り線とは役割を分けられます。

一方、夜の展示会を告知する小さなバナーでは、背景を濃い紫がかったグレー■#30243A、タイトルを白■#FFFFFFにします。鮮やかなヘリオトロープ■#DF73FFは「開催中」などの短いラベルの背景に置き、その文字には濃い色■#30243Aを合わせます。申込みボタンは白■#FFFFFFを背景、濃い色■#30243Aを文字として、ラベルと別の形で目立たせます。

前者は写真や説明文の邪魔をしないよう色の面積を抑える例、後者は暗い背景との明るさの差を利用する例です。どちらも紫をページ全体に増やすのではなく、まず写真・情報・操作の優先順位を決めて配置します。

文字のコントラストと色の面積を確かめる

文字と背景の明るさの差を表す数値がコントラスト比です。Webのアクセシビリティ指針WCAG 2.2のAA基準では、通常の文字に4.5対1以上、大きな文字に3対1以上が必要です。

青紫■#886BB7を淡い背景■#FAF8FCに小さな文字として置くと、比は約4.12対1で通常文字の基準に届きません。見出し脇の飾り線に使い、本文は濃い色■#30243Aにすると、同じ背景■#FAF8FCに対して約13.83対1になります。また、白■#FFFFFFの文字と濃い紫■#62447Aのボタンは約7.99対1です。

鮮やかな紫■#DF73FFの上に白■#FFFFFFで文字を置くと約2.61対1にとどまります。代わりに濃い色■#30243Aを載せれば約5.58対1となり、通常文字の基準を上回ります。色だけで「開催中」などの意味を示さず、文字や形でも伝えましょう。背景に写真や透明効果を加える場合は、実際に重なる部分の色で再確認することが大切です。