藤色に合う色は？落ち着いた和風の配色例

藤色は、淡い紫を落ち着いて使いたいときに合わせやすい色です。ただし、藤色には幅があり、Web標準で1つのHEXコードが決まっているわけではありません。この記事では、配色例を具体化するために藤色 ■#A59ACA を基準色にします。生成りに近い明るい背景、墨色に近い濃色、くすんだ緑を組み合わせ、色数を増やしすぎず落ち着いた和風の雰囲気を作る方法を紹介します。

藤色には、生成り・墨色・低彩度の緑を合わせる

CSSで使われるHSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）では、彩度は色の鮮やかさ、明度は明るさを表します。藤色 ■#A59ACA のような淡い紫を主役にする場合、周囲まで淡い紫でそろえるより、背景・本文・補助面で明るさと彩度の役割を分ける方が、色のやわらかさを残しながら情報を整理しやすくなります。

この記事では、背景に生成りアイボリー ■#F5F0E7、本文に墨色チャコール ■#2B292D、補助面に淡いグレージュ ■#E7E1D8 とくすみ若草 ■#C9D1C0 を使います。HueRollの補色・類似色ガイドでも、近い色相は連続性を作りやすく、離れた色相は小さなアクセント向きとされています。

落ち着いた和風に見せる3つの組み合わせ

本文色の墨色チャコール ■#2B292D は、生成りアイボリー ■#F5F0E7 上で約12.69:1、淡いグレージュ ■#E7E1D8 上で約11.08:1、くすみ若草 ■#C9D1C0 上で約9.17:1です。いずれもWCAG 2.2（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）が通常サイズの文字に求める4.5:1以上を満たします。

一方、藤色 ■#A59ACA を生成りアイボリー ■#F5F0E7 上の通常文字に使うと、比率は約2.29:1です。白文字 ■#FFFFFF を藤色 ■#A59ACA の上に置く場合も約2.60:1で不足します。藤色の塗り面に文字を置くなら、墨色チャコール ■#2B292D なら約5.54:1です。

主要なリンクやCTA（行動を促すボタン）には、藤色より深い紫 ■#574C73 を使う方法があります。生成りアイボリー ■#F5F0E7 との比率は約6.89:1、淡いグレージュ ■#E7E1D8 とは約6.01:1、くすみ若草 ■#C9D1C0 とは約4.97:1です。白文字 ■#FFFFFF を深い紫 ■#574C73 のボタン上に置く場合も約7.82:1です。

和風らしさは色名だけで決めず、余白と面積で整える

藤色や生成りを使っただけで、どの画面も同じ「和風」になるわけではありません。この記事では、低彩度の色を大きな面に使い、濃色を文字と操作に限定し、藤色を装飾や見出しの一部へ絞ることで、静かな印象を作る配色例として扱っています。60–30–10の考え方も、数値を厳密に測るのではなく、背景・補助・アクセントの面積差を作る目安として使えます。

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

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