支子色のカラーコードと色見本｜配色に取り入れるには？

支子色（くちなしいろ）は、クチナシの実を用いた染め色に由来する、少し赤みを帯びた黄色です。明るい色ですが、和色の名前から一つのカラーコードが決まるわけではありません。ここでは資料別の色見本を比べたうえで、和菓子の紹介カードとイベントの告知バナーに使う方法を考えます。

支子色の読み方と、資料によって異なるカラーコード

支子色は「くちなしいろ」と読み、「梔子色」とも書きます。色の名前はクチナシの実を使った染料に由来します。HEX（ヘックス）は、Webで色を指定する「#」と6桁の英数字で表したカラーコードです。色名資料を比べると、次のように少し違う黄色が紹介されています。

和色大辞典の支子色■#FBCA4Dは黄みの中にオレンジ寄りの温かさを感じる色、I-IROの梔子色■#E6C65Cはやや落ち着いた黄色の例です。どちらかを唯一の「正しい支子色」とせず、採用する資料名とコードを一緒に残しましょう。なお、RGBは赤・緑・青の光の成分を数値で表す形式です。2つの見本のコントラスト比は約1.08：1なので、隣り合わせにしても明るさの差は小さくなります。

和菓子のカードとイベントバナーへの取り入れ方

例A：季節の和菓子を紹介する商品カード。カードの背景を温かいオフホワイト■#FFF9EF、商品名・価格・説明文を濃いチャコール■#2C2924にします。和色大辞典の支子色■#FBCA4Dを「季節限定」と書いた小さなラベルの背景に使い、ラベルの文字はチャコール■#2C2924にします。「商品を見る」ボタンは深い緑■#284F43に白■#FFFFFFの文字を合わせます。黄色を広い背景にせず、目立たせたい情報に限定することで、商品写真と案内を分けやすくなります。

この例のコントラスト比は、チャコール■#2C2924とオフホワイト■#FFF9EFで約13.83：1、チャコール■#2C2924と支子色■#FBCA4Dで約9.42：1、白■#FFFFFFと深い緑■#284F43で約9.17：1です。

例B：夕方の工芸イベントの告知バナー。背景を深い青緑■#263A36にし、「工芸展開催」の見出しと日時をオフホワイト■#FFF9EFで表示します。I-IROの梔子色■#E6C65Cは「会場案内」ボタンの背景に使い、ボタン文字を深い青緑■#263A36にします。黄色をボタンに集める構成なら、暗い背景の中で操作場所を区別できます。文字と背景の比は、オフホワイト■#FFF9EFと青緑■#263A36が約11.52：1、青緑■#263A36と梔子色■#E6C65Cが約7.24：1です。

薄い背景との境界と白文字には注意する

支子色■#FBCA4Dとオフホワイト■#FFF9EFの色面同士は約1.47：1と近く、カード上の黄色いラベルの形が目立たない場合があります。ラベルの境界を操作や識別の手がかりにするなら、チャコール■#2C2924の細い枠線を添える方法があります。また、支子色■#FBCA4Dに白■#FFFFFFの通常サイズの文字を載せた場合は約1.54：1しかありません。

WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常サイズの文字と背景に原則4.5：1以上、大きな文字には3：1以上のコントラストが必要です。黄色の面には濃い文字を選び、小さな表示やスマートフォンの幅でも確認してください。色だけで「限定」などの意味を表さず、言葉でも示します。

HueRollではHEXで色を調整し、選択色と白・黒のコントラストを確認できます。ただし、任意の2色同士の比較やWCAGの自動合否判定には対応していません。この記事の組み合わせのコントラスト比は別途計算しています。