裏葉柳はどんな色?読み方と色見本で知る和色

TIPS

裏葉柳は、柳の葉の裏側を思わせる淡い黄緑の和色(日本の伝統的な色名)です。「うらばやなぎ」と「うらはやなぎ」のどちらで読むのか、色見本は何色なのか、迷うこともあります。読み方と色の出典を確かめながら、Webページや告知バナーに使うときの組み合わせを見ていきます。

裏葉柳の読み方と名前の由来

「裏葉柳」は、『精選版 日本国語大辞典』では「うらばやなぎ」と読み、柳の葉の裏の色に似た染め色と説明されています。一方、色見本を掲載する「和色大辞典」は「うらはやなぎ」と記しています。このように資料によって読みの表記が異なります。読み方を紹介するときは、参照する資料も確かめましょう。

色の特徴は、黄色みを含んだ柔らかな緑で、鮮やかな若草色よりも白っぽく、少しくすんで見えることです。名前の由来は柳の葉の裏側の色であり、特定の一つのカラーコードを意味する名前ではありません。自然物や染め色を表す伝統色では、色見本の数値に幅があります。

2つの色見本とWebでの配色例

HEX(ヘックス)は、Webの色を16進数で指定するコードです。裏葉柳について「和色大辞典」は#C1D8AC、「I-IRO」は#C1CCAFを掲載しています。2色を並べると、I-IROの見本のほうが少し暗く、灰みを帯びています。どちらかを唯一の正解とするのではなく、制作時に採用するコードを決めて統一すると扱いやすくなります。

和色大辞典の色見本

#C1D8AC
I-IROの色見本

#C1CCAF

自然素材を紹介するWebページ

商品写真を主役にするページでは、全体の背景をアイボリー#FAF8F2、商品説明の見出し帯を裏葉柳#C1D8AC、本文と見出しの文字を深い灰緑#263B34にする方法があります。文字と見出し帯のコントラスト比(2色の明るさの差)は約7.79:1、文字とアイボリーの比は約11.25:1です。明るい色を広く使い、濃い文字色で内容を支える配色です。

購入ボタンには赤みのある深い茶色#734C3Bを使い、白#FFFFFFの文字を載せると約7.43:1の比になります。ボタンとアイボリー背景の差も約7.00:1あり、穏やかな黄緑の中で操作する場所を区別できます。茶色はボタンなど小面積に限定すると、裏葉柳を引き立てやすくなります。

季節の催しを知らせるバナー

やや落ち着いた黄緑を使うバナーでは、I-IROの裏葉柳#C1CCAFを背景全体にし、タイトルを深い灰緑#263B34、開催日などの強調文字を深い茶色#664333にします。それぞれ背景との比は約7.13:1と約5.18:1です。申込み案内を囲む枠が必要なら、濃い緑灰#465C48を使うと背景との比が約4.34:1になります。

淡い色を使うときの注意点

裏葉柳#C1D8ACと白#FFFFFFの比は約1.53:1です。白文字を直接載せると通常の文章に必要な明暗差が足りません。また、裏葉柳とアイボリー#FAF8F2の差は約1.44:1、2種類の裏葉柳#C1D8ACと#C1CCAFの差は約1.09:1です。淡い色同士の境界を重要な情報の区切りに使うなら、余白や枠、ラベルも組み合わせましょう。

WCAG 2.2(Webコンテンツのアクセシビリティに関するガイドライン)のレベルAAでは、通常の文字は4.5:1以上、大きな文字は3:1以上が基準です。意味のある操作部品の識別にも、隣接する色との3:1以上が求められる場合があります。HueRollではHEXを入力して配色候補を調べられ、選択色と白・黒のコントラスト比を確認できます。ただし任意の2色の比較やAA・AAAの自動判定には対応していないため、完成した配色の組み合わせは別途検証してください。