海松色に合う色は？明るい色を添える配色のコツ
海松色（みるいろ）は、海藻の海松に由来する、茶色みを含んだ暗い黄緑色です。落ち着いた色ですが、背景も文字も暗くすると重たい画面になりがちです。この記事では、Webで色を指定する6桁のHEXコードの一例として#726D40を使い、明るい色の合わせ方とWebサイト・告知バナーでの使い分けを紹介します。
海松色には、明るい色を役割別に合わせる
海松色#726D40は明るさと鮮やかさを抑えた色です。大きな面積に使うなら、周囲に明るい余白を作ると色の深さを活かせます。まずは、次の3色を役割に分けて考えてみましょう。
- オフホワイト#F8F5EC：ページ背景や余白向け。純白よりわずかに黄みがあり、海松色の温かみとつなげやすい色です。
- クリーム#F1E5C6：説明カードや補足欄向け。オフホワイトより黄みが強く、広い画面の中に穏やかな変化を作れます。
- 淡い黄#F4DC98：申込みボタンや短いラベル向け。海松色と近い黄系統でも明るさが違うため、小面積で使うと注目箇所を分けられます。
明るい色同士にも差があるため、背景・カード・操作ボタンをすべて淡色にするのではなく、「広い面積は控えめに、重要な場所だけ少し強く」を基本にします。なお、海松色のHEXコードは資料によって異なります。ここで示す配色は上記の色見本に対する提案です。
Webサイトと告知バナーでの配色例
例1：植物を扱うブランドのWebサイト。ページ背景をオフホワイト#F8F5EC、見出しを海松色#726D40、本文を濃いグリーン寄りのチャコール#273126にします。文字と背景の明るさの差を数値で示すコントラスト比は、背景と見出しで約4.84:1、本文とでは約12.40:1で、通常の文字に求められる4.5:1を上回ります。
商品説明カードにはクリーム#F1E5C6を置き、文字はチャコール#273126（約10.79:1）に。背景同士は近い明るさなので、必要なら深緑#495237の細い枠線で範囲を示します。主要な「商品を見る」ボタンも深緑#495237にオフホワイト#F8F5ECの文字を載せると、約7.57:1です。
例2：展示会の告知バナー。海松色#726D40を大きな背景に使い、開催日と見出しはオフホワイト#F8F5ECで表示します。この組み合わせは約4.84:1です。申し込み部分だけ淡い黄#F4DC98のボタンにし、文字をチャコール#273126にすると約10.00:1。ボタンと海松色の背景にも約3.91:1の差があります。明るい色は見出しや申し込み付近に絞り、背景の落ち着きを残します。
文字のコントラストと淡色の境界を確認する
色の相性と読みやすさは別に判断します。WCAG 2.2（Webコンテンツのアクセシビリティ指針）では、レベルAAの通常サイズの文字に4.5:1以上、大きな文字に3:1以上のコントラスト比を求めています。海松色#726D40の背景に黒#000000の通常文字を置くと約3.98:1で、この基準に届きません。明るいオフホワイト#F8F5ECの方が約4.84:1で適しています。
一方、淡い黄#F4DC98とオフホワイト#F8F5ECは近く、互いをそのまま重ねても違いが目立ちません。ボタンは海松色の面の上に置く、カードは線や余白でも区切るなど、隣接する色を基準に調整しましょう。HueRollではHEX入力で各色を確認でき、選択色と白・黒のコントラスト比も表示されます。ただし任意の2色間の比率やAA判定は自動で出ないため、実際の組み合わせは別途確認してください。