松葉色のカラーコードと配色例｜深みのある緑を使うヒント

松葉色（まつばいろ）は、松の葉を思わせる、黄みとくすみを含んだ緑色です。Webサイトやバナーに取り入れるなら、単に緑を増やすのではなく、背景にする面積と文字の明るさを先に決めると扱いやすくなります。松葉色のコードを比較し、淡い背景と濃い背景の2つの配色例を紹介します。

松葉色のカラーコードと色の特徴

松葉色は、松の葉のようなくすんだ黄緑を表す伝統的な色名です。デジタルの色見本には、やや明るく黄みのある■#839A5Cと、深みのある緑■#4F7942などがあります。色名に対して唯一のカラーコードが決まっているわけではなく、資料によって色の明るさや濃さに幅があります。この記事では、深い緑の■#4F7942を配色の基準にします。

HEX（ヘックス）カラーコードは、Web上の色を「#」と英数字で指定する方法です。ここで示したものは6桁のHEXコードです。より明るい■#839A5Cは飾りに、濃い■#4F7942は背景や見出しに、と役割を変えると緑の濃淡を整理できます。ただし、同じ緑系でも文字として使えるかどうかは、組み合わせる背景色で判断します。

松葉色を使った2つの具体的な配色例

盆栽教室の案内：明るい背景に緑を絞って置く

背景を温かみのある生成り■#F7F4EAにし、見出しには松葉色■#4F7942を使います。日時・会場などの細かな情報と本文は、濃い緑がかったグレー■#203124にすると、見出しとの違いを作れます。予約ボタンは松葉色■#4F7942で塗り、文字を白■#FFFFFFにします。少し明るい松葉色■#839A5Cは見出しの下の短い飾り線にとどめ、長い文章には使わない構成です。

工芸品の新作紹介：濃い緑を大きな背景にする

商品写真を主役にしたバナーでは、背景を松葉色■#4F7942にし、見出しと短い説明文を白■#FFFFFFで載せます。商品の写真の周囲や価格をまとめる小さな面には生成り■#F7F4EAを使い、その面の文字は濃いグレー■#203124にします。詳細を見るボタンも生成り■#F7F4EAに濃いグレー■#203124の文字を組み合わせます。砂金色に近い■#D8B96Fを短い飾り線として添えることはできますが、情報を伝える枠や操作アイコンの色として安易に流用しないでください。

最初の例では淡い背景を広く取って緑を要所に置き、後の例では緑を広く使う代わりに生成りの面を小さく抑えています。同じ緑でも、面積を変えることで文字と写真の見せ方が変わります。

文字と背景のコントラストに注意する

コントラスト比とは、文字と背景の明るさの差を示す数値です。Webコンテンツのアクセシビリティに関する指針「WCAG 2.2」のAA基準では、通常サイズの文字は4.5:1以上、大きな文字は3:1以上が必要です。

松葉色■#4F7942と生成り■#F7F4EAの比は約4.60:1、松葉色■#4F7942と白■#FFFFFFは約5.07:1で、通常サイズの文字のAA基準を満たします。ただし前者は基準に近いため、細い文字や小さな表示は濃いグレー■#203124に切り替えるとよいでしょう。濃いグレー■#203124と生成り■#F7F4EAの比は約12.50:1です。

一方、明るい松葉色■#839A5Cと生成り■#F7F4EAは約2.83:1で、文字のAA基準に届きません。また、砂金色■#D8B96Fと松葉色■#4F7942は約2.67:1なので、必要な操作部品や意味のあるアイコンをその色差だけで表すのは避けます。写真を背景に重ねる場合も、実際の文字の背後の色で確かめてください。

HueRollでは選択した色と白・黒のコントラストを確認できます。生成りや別の緑との組み合わせなど、任意の2色のコントラスト比は別途計算し、AA基準も自分で照合する必要があります。