煤竹色とはどんな色?由来とカラーコードを紹介
煤竹色(すすたけいろ)は、煤けた竹を思わせる暗い茶褐色です。茶色に灰色や赤みが混じったような落ち着いた色で、Webでは和風の作品紹介や展示案内にも取り入れられます。ただし、色名だけで決まるカラーコードは一つではありません。由来と資料別の色見本を確認し、背景や文字に使う場合の組み合わせを紹介します。
煤竹色は、煙で煤けた竹に由来する暗い茶褐色
煤竹色は「すすたけいろ」と読み、辞典には「すすだけいろ」という読み方も見られます。囲炉裏などの煙を長年受け、黒ずんだ竹を「煤竹」と呼び、そのような赤みを含む暗い茶色が色名の由来とされています。新鮮な竹を思わせる緑ではなく、使い込まれた竹のようなくすんだ茶系の色です。
色名資料「伝統色のいろは」では、煤竹色が江戸時代に小袖や羽織、帯の色として好まれたことも紹介しています。一方で、昔の染め物や竹の実物がすべて同じ色だったという意味ではありません。画面で使う際は、採用する色見本を選びます。
煤竹色のHEXコードと、Web配色の具体例
和色大辞典は煤竹色を#6F514C、I-IROは#5F5145として掲載しています。HEX(ヘックス)はWebの色を「#」と6桁の英数字で表すカラーコード、RGBは赤・緑・青の光の成分を数値で表す形式です。資料ごとの値は次のように異なります。
RGB 111・81・76|和色大辞典
RGB 95・81・69|I-IRO
この2色のコントラスト比は約1.08:1です。コントラスト比は2色の相対的な明るさの差を示す数値で、両見本の明るさは非常に近くなっています。どちらかだけを唯一の正解とせず、使用する色コードと出典をデザイン資料に記録すると管理しやすくなります。
例A:竹細工の商品紹介ページ。商品写真を囲むカードとページ背景には温かいオフホワイト#F8F3E9を広く使います。作品名や短い見出しは和色大辞典の煤竹色#6F514C、価格と説明文は濃いチャコール#302B28にします。「作品を見る」ボタンは煤竹色#6F514Cの背景にオフホワイト#F8F3E9の文字を置きます。煤竹色の見出しと背景は約6.42:1、チャコールの本文と背景は約12.64:1、ボタン文字と背景は約6.42:1です。暗い色を文字やボタンに限定すれば、写真のための明るい余白を確保できます。
例B:古民家を会場とする工芸展示バナー。広い背景に煤竹色#6F514Cを使い、展示名と開催日をオフホワイト#F8F3E9の文字で表示します。「開催案内を見る」ボタンは控えめな金茶系の色#D8B46Cを背景に、チャコール#302B28の文字を組み合わせます。金茶と周囲の煤竹色の面同士は約3.61:1、金茶とボタン文字は約7.10:1です。濃い背景を主役にする代わりに、文字を短くし、詳細説明は別の明るい領域に分けると整理しやすくなります。
暗い背景の文字と、装飾色の扱いに注意する
煤竹色#6F514Cの上に白い文字を置く場合も、白#FFFFFFとの比は約7.10:1です。WCAG(Webコンテンツを利用しやすくするための指針)2.2のレベルAAでは、通常サイズの文字は原則4.5:1以上、大きな文字は3:1以上が基準です。今回の文字色と背景色は数値上の基準を満たしますが、実際の文字サイズや太さ、写真を重ねる場合の色の変化も確認しましょう。
また、金茶色#D8B46Cとオフホワイト#F8F3E9の明るさの差は約1.78:1と小さめです。明るいページに同じ金茶ボタンを置く場合は、必要な境界が見えなくなることがあります。操作部品を識別するために必要な線や色面には、隣接色と原則3:1以上の差が求められるため、配置先に合わせて再調整します。
HueRollではHEXで色を選んで調整し、選択色と白・黒とのコントラストを確認できます。ただし、任意の2色同士の比較やWCAGの自動合否判定には対応していません。ここで示した組み合わせの数値は別途計算しています。