朱色に合う色は？鮮やかさを活かした配色例

朱色は、黄みを帯びた赤として扱われる色です。日本語の辞書でも「黄ばんだ赤色」「黄色みを帯びた赤色」と説明されます。ただし、朱色に世界共通のHEX値が1つだけ決まっているわけではありません。この記事では、FigmaがVermilionとして掲載している ■#E73121 を代表例に、WEBサイトやバナーで鮮やかさを活かす配色を考えます。

CSS（WEBページの見た目を指定する仕組み）の標準色名には red などがありますが、vermilion という標準キーワードはありません。実務では「朱色」と色名だけで共有せず、実際に使うHEXコードも一緒に決めておくと認識をそろえやすくなります。

朱色に合う色は？

基準の ■#E73121 は、赤を中心に少しオレンジ方向へ寄った鮮やかな色です。面積が大きいほど存在感が強くなるため、背景や本文まで強い色でそろえるより、アイボリーやベージュを広く使い、濃い色で文字や主要操作を支えると整理しやすくなります。

• ウォームアイボリー：■#FFF7F1。真っ白より少し暖色寄りで、朱色の温かさを保ちながら余白を作れます。
• ダークブラウン：■#342B28。本文や見出しに使うと、暖色のつながりを残しながら画面を引き締められます。
• サンドベージュ：■#E9D6C8。カードや補助面に使うと、朱色との温度感を合わせながら明るさの差を作れます。
• くすみセージ：■#8DA394。赤橙系とは異なる色相を加えつつ、鮮やかさを抑えた対比を作れます。
• 深いティール：■#31535C。主要ボタンや見出しなど、朱色とは別の役割をはっきり見せたい場所に使えます。

鮮やかさを活かす3つの配色例

アイボリーを広く使い、朱色をアクセントにする

背景を ■#FFF7F1、本文を ■#342B28、見出しの線やラベル、アイコンに ■#E73121 を使います。本文と背景のコントラスト比は約13.03:1です。朱色を全面に広げず、視線を集めたい場所に限定すると、色の鮮やかさを保ちながら画面全体を落ち着かせやすくなります。

サンドベージュで暖色の濃淡を作る

ページ背景を ■#FFF7F1、カード面を ■#E9D6C8、本文を ■#342B28、アクセントを ■#E73121 にします。本文とベージュ背景のコントラスト比は約9.80:1です。似た温度感の色でも、淡色を大面積、朱色を小面積に分けると単調になりにくくなります。

セージとティールで自然な色相差を加える

補助面に ■#8DA394、本文に ■#342B28 を使うと、本文とセージ背景のコントラスト比は約5.12:1です。さらにCTA（購入や申込みなど次の行動を促す主要ボタン）を ■#31535C にし、白 ■#FFFFFF の文字を載せると、コントラスト比は約8.33:1です。朱色・セージ・ティールを同じ面積で競わせず、アクセント・補助面・操作部分に役割を分けるとまとまりやすくなります。

朱色背景では白文字より黒文字が有利な場合がある

今回の ■#E73121 と白 ■#FFFFFF のコントラスト比は約4.32:1で、WCAG（Web Content Accessibility Guidelines、WEBアクセシビリティのガイドライン）2.2の適合レベルAAで通常サイズの文字に求められる4.5:1にはわずかに届きません。一方、黒 ■#000000 との比は約4.86:1で、通常サイズの文字の基準を上回ります。

そのため、この基準色をボタンや帯の背景に使う場合は、白文字を前提にせず黒文字も候補にします。朱色は名称だけでは明るさが一定ではないため、別のHEX値を使う場合は再確認が必要です。HueRollでは選んだ色と白・黒とのコントラストを確認できるので、実際に使う朱色を入力して両方の比を比べると判断しやすくなります。