抹茶色に合う色は？和風と洋風のバナーで色合わせを比較
抹茶色は、和菓子店にもカフェにも使える緑系の色ですが、組み合わせる背景や文字によって見え方が変わります。「抹茶色」という名前だけで一つのカラーコードに決まるわけではありません。この記事では、黄みを含む落ち着いた緑■#536A36を基準色にします。同じ抹茶ラテの告知を想定し、和風と洋風のバナーで色合わせを比べます。
抹茶色に合う色は？背景と文字の役割から選ぶ
抹茶色を主役にするなら、背景は明るめに、説明文は十分に濃い色にすると、緑の存在感を残しながら情報を整理できます。候補は次の4色です。
- 生成りに近いアイボリー■#F8F2E6：温かみのある余白を広く取りたい和風バナーの背景。
- 焦茶■#342F29：アイボリーの上で商品名や説明文を引き締める文字色。
- くすみピンク■#F3E4E8：緑と色みを変え、洋風カフェの軽やかな雰囲気を試す背景。
- チャコール■#2B3037：ピンクの上で商品情報や申込みボタンをはっきり分ける濃い色。
明るい背景と濃い文字色を先に決め、抹茶色を見出しや目印に配分するのが基本です。彩度（色の鮮やかさ）が高い色を何色も足すより、抹茶色の落ち着きを残す方が、今回の2つの案ではまとまりを作りやすくなります。
同じ抹茶色で比べる和風・洋風のバナー配色
和風：生成りと焦茶で、季節の抹茶ラテを案内
バナー背景をアイボリー■#F8F2E6、大きな商品名と説明文を焦茶■#342F29にします。抹茶色■#536A36は「季節限定」の小見出しと「詳しく見る」ボタンの背景に使い、ボタン文字はアイボリー■#F8F2E6にします。明るい面積を広く、緑を一部分にとどめることで、控えめな和風の案内に寄せる例です。
文字と背景の明るさの差を表すコントラスト比は、焦茶の文字とアイボリー背景で約11.89:1、抹茶色の小見出しとアイボリー背景で約5.41:1です。抹茶色のボタンとアイボリー文字も約5.41:1になります。
洋風：くすみピンクとチャコールで、カフェの新商品を案内
同じ抹茶色■#536A36を「MATCHA LATTE」という大きな見出しに使い、背景をくすみピンク■#F3E4E8に変えます。価格や説明文はチャコール■#2B3037、注文ボタンもチャコール■#2B3037の背景にして、ボタン文字をピンク■#F3E4E8にします。緑の見出しとピンクの広い背景を組み合わせ、和風案とは違うカフェらしい軽さを試す構成です。
抹茶色の見出しとピンク背景は約4.90:1、チャコールの説明文とピンク背景は約10.80:1、チャコールのボタンとピンク文字も約10.80:1です。抹茶色とチャコールを直接重ねると約2.20:1なので、ボタン文字に緑を使わない点が重要です。
写真・文字・ボタンに合わせて最後に調整する
2案とも抹茶色自体は同じです。和風では緑を小さな目印とボタンに、洋風では大きな見出しに使うことで、背景だけでなく視線が向く場所も変えています。商品写真の緑が強い場合は、見出しやボタンの緑を減らし、背景の余白を広げると、写真と文字の競合を抑えやすくなります。
HEX（Webで色を指定する16進数のコード）を選んだら、実際に隣り合う文字色と背景色の組み合わせで確認します。WCAG（Webコンテンツのアクセシビリティ指針）2.2のAA水準では、通常サイズの文字は原則4.5:1以上、大きな文字は3:1以上が基準です。画像として書き出したバナー内の文字でも、背景とのコントラストを考える必要があります。写真の上に文字を重ねる場合は、その部分の明るさが変わるため別途確認しましょう。
HueRollでは6桁のHEX入力で色を調整し、選択した色と白・黒とのコントラストを確認できます。ただし任意の2色を直接比較したり、AAへの適合を自動判定したりはできません。紹介した比率は不透明な単色同士を別途計算した値です。実際のバナーでは文字・背景・ボタンの色を組にして確かめてください。