パンプキンオレンジの配色例｜秋のデザインに使う背景と差し色

パンプキンオレンジは、かぼちゃを思わせる黄みのあるオレンジです。秋の告知バナーや季節商品の案内に取り入れるとき、背景として広く使うか、ボタンや装飾に絞るかで印象が変わります。この記事では、明るい背景と暗い背景の2例を比較し、見出し・文字・差し色の具体的な組み合わせを紹介します。

背景との明るさの差からオレンジの役割を決める

「パンプキンオレンジ」という色名に、唯一の決まったHEXコードがあるわけではありません。HEXは、Webで色を指定するときに使う16進数のカラーコードです。ここでは、やや深いオレンジ■#B95A18と、明るいオレンジ■#F0A45Bを秋のデザイン向けの例として使います。

明るい背景では、深めのオレンジを小さなボタンや帯に使うと色の役割を分けやすくなります。反対に、暗い背景には明るめのオレンジを置くと、ボタンを背景から区別しやすくなります。ただし、目立つ色と文字を読める色は同じとは限りません。文字色は必ず背景と組み合わせて考えます。

秋の収穫フェアと夜市で比べる配色例

例A：明るい「秋の収穫フェア」のバナー。背景には温かみのあるクリーム色■#FFF6E9を広く使い、タイトル「秋の収穫フェア」と日時は濃いブラウン■#3A2C23で表示します。「商品を見る」のボタンはパンプキンオレンジ■#B95A18を背景にし、文字は白■#FFFFFFにします。深いグリーン■#32543Cは「地元の野菜」などの小見出しや細い装飾に限定します。明るい余白を保ちながら、ボタンと小さな緑を別の役割で使う構成です。

この配色では、ブラウン■#3A2C23とクリーム色■#FFF6E9の文字コントラスト比は約12.54：1、グリーン■#32543Cとクリーム色■#FFF6E9は約7.94：1です。オレンジ■#B95A18のボタンと白文字■#FFFFFFは約4.63：1になります。

例B：暗い「秋の夜市」の告知バナー。背景を焦げ茶に近い色■#302B27とし、見出し「秋の夜市」と開催日時を明るいアイボリー■#F9F2E5で置きます。「イベント詳細」ボタンだけを明るいパンプキンオレンジ■#F0A45Bにし、ボタン文字は背景と同じ濃い色■#302B27にします。夜の雰囲気を作る暗い面と、操作してほしい場所を分けた配色です。

こちらはアイボリー■#F9F2E5と暗い背景■#302B27で約12.57：1、ボタンの濃い文字■#302B27と明るいオレンジ■#F0A45Bで約6.78：1です。いずれも、WCAG 2.2（Webコンテンツを利用しやすくするための指針）が通常サイズの文字に求める4.5：1以上を満たします。

差し色の面積と小さな文字を調整する

例Aの深いオレンジ■#B95A18をクリーム色■#FFF6E9の上に文字色として直接使うと、コントラスト比は約4.32：1で、通常サイズの文字の4.5：1には届きません。オレンジは白文字を載せるボタンに使い、説明文や小さな文字は濃いブラウンに任せます。また、例Bの明るいオレンジ■#F0A45Bに白文字■#FFFFFFを載せると約2.07：1になるため、濃い文字を選びます。

仕上げでは、オレンジのボタンや帯だけが大きくなりすぎないかを確認し、スマートフォンでの表示幅でも日時と操作内容を読めるか試します。HueRollではオレンジの候補をHEXで調整し、選択した色と白・黒のコントラストを確認できます。ただし、任意の2色の比較やWCAGの自動判定には対応していません。完成した画面では、実際に隣り合う文字色と背景色を別途検証してください。