藤色のカラーコードを選ぶ｜青み・赤みの違いを色見本で比較

藤色（ふじいろ）は、藤の花を思わせる淡い青紫です。カラーコードを探すと複数の値が見つかりますが、どれをWebデザインに採用するかは、少し青く見せたいのか、赤みを感じる紫にしたいのかで変わります。この記事では、色見本を並べて明るさを大きく変えずに色みを比較し、背景や文字に使うときの判断ポイントを紹介します。

藤色のHEXコードは一つだけではない

和色大辞典では藤色の例として■#BBBCDEが掲載され、別の色名資料では■#BBB7DAという値も使われています。色名は色のイメージを共有する手がかりですが、すべての資料で同一の数値を指定するものではありません。制作物では、採用するコードを先に決めて共有することが重要です。

HEX（ヘックス）は、Web上の色を「#」と6桁の英数字で表す方法です。RGBは赤・緑・青の光の成分を0～255の数値で示す形式で、HEXの各2桁と対応しています。数値を見れば、青みと赤みをどの方向に調整したかも比べられます。

青み寄り・基準・赤み寄りの3色を見比べる

次の3色は、色の明るさをおおむね近づけた比較例です。中央のコードは色名資料にある藤色、左右の2色は違いを確かめるために調整したWeb用の例であり、別の伝統色名を定義したものではありません。

青み寄りの■#B0C0E2は、緑の成分が赤よりやや多く、青側に傾いた印象になります。基準例の■#BBBCDEは赤と緑がほぼ同じ数値で、少しくすんだ青紫です。赤み寄りの■#CCB2D8は赤の数値が増え、紫にあたたかみを加えた見え方になります。

例えば、藤の花の写真を使う展示案内ページなら、青空が多い写真には赤み寄りの候補を小さな見出し帯に、花の赤紫が目立つ写真には青み寄りの候補を背景に置いて比べられます。色の相性は写真の実際の色や面積で変わるため、どちらが正解と決めず、同じレイアウトで比較するのが確実です。

選んだ藤色を背景にするときは文字色も確かめる

3色とも明るいため、文字は暗い紫がかったチャコールの■#302C42を合わせる方法があります。文字と背景のコントラスト比は、青み寄り■#B0C0E2で約7.34:1、基準例■#BBBCDEで約7.26:1、赤み寄り■#CCB2D8で約6.98:1です。コントラスト比は2色の相対的な明るさの差を表す数値です。

反対に白■#FFFFFFの文字を載せると、青み寄り■#B0C0E2で約1.83:1、基準例■#BBBCDEで約1.85:1、赤み寄り■#CCB2D8で約1.92:1にとどまります。WCAG（Webコンテンツをより多くの人が使えるようにするための指針）2.2のレベルAAでは、通常の文字に原則4.5:1以上、大きな文字に3:1以上が必要です。淡い藤色には白文字より濃い文字を選びます。

実際の展示案内カードでは、ページ全体をオフホワイト■#FCFAF8、カードを藤色の基準例■#BBBCDE、本文を■#302C42にします。ページとカードの差は約1.78:1なので、境界を明示したい場合は濃い紫灰の枠線■#69587Cを添えます。枠線はカードと約3.46:1、周囲のオフホワイトと約6.13:1です。申込みボタンは深い紫■#57466Dに白■#FFFFFFの文字を置けば、文字とボタンの比は約8.39:1です。

色見本を比べるときは、画面の条件だけでなく、隣に置く写真や背景もそろえて確認しましょう。HueRollではHEXを入力して色を調整し、RGBなどの値や白・黒とのコントラストを確認できます。ただし色名の直接入力や、任意の2色のコントラスト比較、WCAGの自動判定には対応していません。2色の組み合わせは別途計算して確かめます。