菫色とはどんな紫？カラーコードと近い色を見比べる

TIPS

菫色（すみれいろ）は、どんな紫でしょうか。スミレの花に由来する色名ですが、色見本によってカラーコードに違いがあります。Web制作では、近い桔梗色や江戸紫、明るい藤色と並べると、青み・赤み・明るさの差を確かめやすくなります。代表的な色見本と、文字や背景に使うときの選び方を紹介します。

菫色とは？花の名前に由来する青みのある紫

菫色は、スミレの花を思わせる紫色を指します。一般に青みのある紫として紹介されますが、実際のスミレの花には紫以外の色もあり、花の姿をそのまま一つの数値に置き換えた色名ではありません。

Webで色を指定するHEX（ヘックス）は、赤・緑・青の光の成分を16進数で表したコードです。菫色の見本として使われる■#7058A3は、赤112・緑88・青163の組み合わせで、青の成分が大きい紫です。別の色名資料では、やや暗い■#714C99も菫色の見本に使われています。

菫色はJIS慣用色名にも載る名前ですが、掲載された色見本のHEXがすべて同一という意味ではありません。CSS（Webページの見た目を指定する仕組み）に日本語の「菫色」を色名として書くだけでは指定できないため、使う値を決めてコードで管理します。

カラーコードで菫色と近い紫を見比べる

次の値は、複数の色名資料で紹介されているWeb向けの色見本例です。画面では周囲の色によって印象が変わるため、同じ大きさで並べて比べてみてください。

菫色の代表例：■#7058A3。深すぎず明るすぎない青紫で、今回の比較の基準にします。
別資料の菫色：■#714C99。基準の菫色より少し暗く、青に対する赤みが相対的に増えた紫です。
桔梗色（ききょういろ）：■#5654A2。基準の菫色より赤の成分が少なく、青みを強く感じる紫です。
江戸紫（えどむらさき）：■#745399。菫色と明るさが近く、わずかに赤み寄りの紫です。
藤色（ふじいろ）：■#BBBCDE。ほかの4色よりかなり明るく淡い紫で、背景や広めの色面の候補になります。

菫色と桔梗色は近い青紫ですが、青を強めたいなら桔梗色、やや赤みを残すなら菫色や江戸紫を並べて確認すると選びやすくなります。藤色は色の濃さが大きく違うため、同じ紫系でも補助背景として役割を分けられます。

菫色をWebの文字・背景・ボタンに使うポイント

例えば、春の和菓子を紹介するWebページなら、全体の背景を淡い■#F8F7FAにし、季節限定商品の見出しを菫色の■#7058A3にします。この見出しと背景のコントラスト比は約5.44:1です。本文は濃い紫がかった■#241E37にすると、■#F8F7FAとの比率は約14.95:1になります。

販売期間をまとめた案内カードには藤色の■#BBBCDEを背景として使い、文字は■#241E37にします。この組み合わせは約8.63:1です。申込みボタンは■#7058A3を背景に、■#F8F7FAの文字を使えば約5.44:1になり、ボタンと周囲の■#F8F7FAの背景との明暗差も約5.44:1です。

一方、藤色の■#BBBCDEとページ背景の■#F8F7FAの差は約1.73:1にとどまります。淡い色の境目だけで操作に必要な領域を示したり、重要なアイコンを置いたりするのは避けましょう。意味を伝える境界が必要なら、色を濃くするか、文字・形・余白でも区別します。

WCAG（Webコンテンツを見やすくするための指針）2.2のレベルAAでは、通常サイズの文字は4.5:1以上、大きな文字は3:1以上が基準です。HueRollでは決めたHEXコードを入力して白・黒とのコントラストを確認できますが、色名の直接入力、任意の2色比較、AA・AAAの自動判定には対応していません。この記事の色同士の比率は、表示したHEX値から別途計算しています。