縹色とは何色？読み方・由来・カラーコード
縹色は「はなだいろ」と読む、日本の伝統的な青の色名です。藍染めの青として知られていますが、色見本を調べると青みや明るさが少しずつ異なります。名前の由来を確かめながら、具体的なHEXコードとWebデザインで使うときの注意点を紹介します。
縹色の読み方と名前の由来
「縹色」の読み方は「はなだいろ」です。漢字ペディアでは「薄い藍色。そらいろ」と説明され、JISの慣用色名を扱う色名資料では「つよい青」と表されています。どちらも青系統を指しますが、濃淡の表現には幅があります。
縹色は「花田色」や「花色」とも書かれます。「花」はツユクサの花に由来するという説明があり、古くから青を表す名前として使われてきました。染色では藍が用いられ、平安時代の『延喜式』には深縹・中縹・次縹・浅縹という濃さの区分が記されています。つまり、歴史上も一つの明るさだけを意味する色名ではありません。
現在Webで使う場合、伝統色の名前だけでは画面上の色が決まりません。色見本の出典とカラーコードを一緒に示すと、制作する人同士で色を共有しやすくなります。
縹色のカラーコードを3つの色見本で比べる
HEX（ヘックス）は、先頭の「#」と6桁の英数字で色を表すWeb用の形式です。次の3つは、それぞれの色名資料が縹色として掲載している見本です。
- 和色大辞典の縹色： #2792C3 ― 明るさのある青。RGBでは赤39・緑146・青195です。
- 伝統色のいろはの縹色： #0086AD ― 上の見本より暗く、青緑に少し近い青です。
- I-IROの縹色： #2B6493 ― 深みのある青で、最初の見本より暗い色です。RGBは赤43・緑100・青147です。
例えば、和色大辞典の #2792C3 と伝統色のいろはの #0086AD は、ともに縹色の見本ですが同一の色ではありません。昔の染め色を画面上の数値に置き換えると、資料ごとに色の解釈や再現値が異なります。どのHEXを使うかは、採用した色見本を確認して決めましょう。
Webで縹色を使うときの配色例と注意点
和の展示会を知らせるWebページなら、縹色は短い装飾帯や日付の見出しに使い、長い文章は別の濃い色に任せると整理しやすくなります。一例として、次の組み合わせが考えられます。
- ページの背景：やわらかなオフホワイト #F6F4EE
- 見出しとボタンの背景：深い青 #20566D
- 本文：濃い青みのグレー #26353A
- 飾り帯や区切りのアクセント：縹色（和色大辞典の見本）#2792C3
- ボタン内の文字：白 #FFFFFF
文字と背景の明るさの差を示すコントラスト比も確認しましょう。縹色 #2792C3 と白 #FFFFFF は約3.51:1で、WCAG（Webコンテンツを利用しやすくするための指針）のレベルAAが通常サイズの文字に求める4.5:1を満たしません。同じ縹色の上に黒 #000000 の文字を置く場合は約5.99:1です。
なお、I-IROの見本 #2B6493 に白 #FFFFFF の文字を組み合わせる場合は約6.27:1です。色見本ごとに文字と背景の組み合わせを確認してください。
一方、深い青 #20566D とオフホワイト #F6F4EE の文字の組み合わせは約7.31:1、深い青 #20566D のボタンに白 #FFFFFF の文字を載せる場合は約8.04:1です。本文の濃い青みのグレー #26353A とオフホワイト #F6F4EE も約11.55:1あります。装飾に使う青と、文章を載せる青を同じにする必要はありません。
HueRollではHEXコードを入力して色を調整し、選んだ色と白・黒とのコントラストを確認できます。ただし任意の2色同士の比較やAA・AAAの自動判定はできないため、実際の文字と背景の組み合わせは別のコントラスト計算手段でも確かめてください。