シナモン色に合う色は？やわらかなブラウン配色の作り方

シナモン色は、スパイスのシナモンを思わせる、赤みや黄みを含んだブラウン系の色です。温かい印象を活かせますが、周囲も濃い茶色にすると画面が重く見えたり、淡い色ばかりにすると重要な情報が埋もれたりします。この記事では、明るい背景と濃い文字色を組み合わせ、やわらかさと見やすさを両立する配色を考えます。

シナモン色にはクリーム・ベージュ・濃いブラウンが合わせやすい

まず、シナモン色の一例を■#C58C66とします。色名に対して世界共通のHEXコードが一つ決まっているわけではなく、資料によって色味は異なります。ここでは、オレンジ寄りの穏やかな茶色として使います。HEXは、画面で扱う色を「#」と6桁の英数字などで表すカラーコードです。

広い背景にはクリーム色の■#F8F3EC、カードには少し濃いベージュの■#E9D8C8を組み合わせると、茶色の温かさを残しながら明るい余白を作れます。文字には深いブラウンの■#4C382Fを選び、背景との明るさの差を確保します。

変化が欲しい場合は、落ち着いた緑の■#73877Aを飾り線などの小さな部分に使う方法もあります。黄赤寄りのシナモンとは色みが異なるため、茶系だけの画面に変化を付けられます。ただし、すべての色を同じ面積で使う必要はありません。

配色例：焼き菓子の紹介ページで色に役割を持たせる

焼き菓子を紹介するWebページなら、シナモン色を主役にしつつ、本文や購入案内を別の色で整理すると使いやすくなります。次の組み合わせを出発点にしてみましょう。

• ページ背景：クリーム■#F8F3EC。広い範囲に使い、写真や文章の周囲に余白を作ります。
• 商品カード：ベージュ■#E9D8C8。商品説明をまとめる面に使います。
• 見出し・本文：濃いブラウン■#4C382F。クリーム背景とベージュのカード上の文字に使います。
• 商品名の帯・装飾：シナモン■#C58C66。写真の下の細い帯など、面積を絞って使います。
• 購入ボタン：濃い赤茶■#8C4E34を背景に、白■#FFFFFFの文字を載せます。

たとえば、上から商品写真、濃いブラウンの商品名、短い説明、購入ボタンの順に置き、シナモン色は商品名の近くの装飾に限定します。ボタンまで同じ明るさの茶色にすると区別しにくいため、操作する部分だけ一段暗くするのがポイントです。緑を使うなら、写真の周辺の小さな飾りにとどめ、購入の意味を緑だけで示さないようにします。

淡い配色でも文字とボタンのコントラストを確認する

やわらかな配色は色の差が小さくなりがちです。本文の濃いブラウン■#4C382Fとクリーム■#F8F3ECのコントラスト比は約9.94:1、同じ文字色とベージュ■#E9D8C8では約7.90:1です。ここでいうコントラスト比は、文字色と背景色の明るさの差を表す数値です。

一方、シナモン■#C58C66に白文字■#FFFFFFを重ねると約2.87:1で、通常サイズの文字に求められるWCAG 2.2のAA基準（4.5:1以上）を満たしません。シナモンの上に文字を置く必要があるなら、濃い文字色の■#30261Fを使うと約5.14:1です。購入ボタンの濃い赤茶■#8C4E34と白■#FFFFFFも約6.45:1を確保できます。

実際の画面では、写真の色やカードの大きさも含めて確認しましょう。シナモン色を全面に敷くより、背景を明るく保ち、主役の茶色は見出し周辺や装飾に絞ると、温かさを残しながら情報の順序を整理しやすくなります。