テラコッタに合う色は？あたたかみのある配色例

テラコッタは、焼いた粘土を思わせる赤褐色です。Cambridge Dictionaryでも「赤みのある茶色」と説明され、FigmaではTerracottaの一例として ■#E35336 が掲載されています。ただし「テラコッタ」という名前に世界共通のHEX値が1つだけ決まっているわけではありません。この記事では ■#E35336 を基準に、WEBサイトやバナーであたたかみを活かす配色を考えます。

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

テラコッタに合う色は？

基準の ■#E35336 は赤とオレンジを含むような、彩度のある赤褐色です。あたたかみを活かすなら、アイボリーやサンドベージュを広い面積に使い、ダークブラウンや深いティールで文字や操作部分を引き締めると、色の強さを整理しやすくなります。

• ウォームアイボリー：■#FFF7F0。真っ白より少し暖色寄りで、テラコッタの温かさを保ちやすい背景色です。
• ダークブラウン：■#3A2A25。本文や見出しに使うと、暖色のつながりを残しながら画面を引き締められます。
• サンドベージュ：■#E8D3BC。カードや補助面に使うと、土のような色合いを保ちながら明るさの差を作れます。
• くすみセージ：■#879A7B。赤褐色とは異なる色相を加えつつ、鮮やかすぎない対比を作れます。
• 深いティール：■#315F5B。主要ボタンや見出しなど、暖色中心の配色の中で重要な場所をはっきり分けたいときに使えます。

あたたかみのある3つの配色例

アイボリーとブラウンで素朴にまとめる

背景を ■#FFF7F0、本文を ■#3A2A25、見出しの線やラベル、アイコンに ■#E35336 を使います。本文と背景のコントラスト比は約12.88:1です。テラコッタをページ全体に広げるのではなく、視線を集めたい場所に絞ると、明るい余白を残しながら色の存在感を活かせます。

サンドベージュを加えて土の色を重ねる

ページ背景を ■#FFF7F0、カード面を ■#E8D3BC、本文を ■#3A2A25、アクセントを ■#E35336 にします。本文とベージュ背景のコントラスト比は約9.41:1です。暖色だけで単調に見える場合は、カードの面積を広く、テラコッタを小さくするなど役割を分けると階層を作りやすくなります。

セージと深いティールで自然な対比を作る

補助面に ■#879A7B、本文に ■#3A2A25 を使うと、本文とセージ背景のコントラスト比は約4.51:1です。さらにCTA（購入や申込みなど次の行動を促す主要ボタン）を ■#315F5B にし、白 ■#FFFFFF の文字を載せると、コントラスト比は約7.20:1です。暖色のテラコッタと緑系を同じ面積で競わせず、緑系を補助面や操作部分に限定すると整理しやすくなります。

テラコッタ背景に文字を載せるときは白と黒を比較する

今回の ■#E35336 と白 ■#FFFFFF のコントラスト比は約3.78:1で、WCAG（Web Content Accessibility Guidelines、WEBアクセシビリティのガイドライン）2.2の適合レベルAAで通常サイズの文字に求められる4.5:1には届きません。一方、ほぼ黒の ■#111111 なら約5.00:1です。

そのため、テラコッタのボタンや帯に通常サイズの文字を載せる場合は、白文字を前提にせず濃い文字色も候補にします。白文字を使う主要ボタンは、深いティール ■#315F5B など別の濃色へ役割を分ける方法もあります。HueRollでは選んだ色と白・黒とのコントラストを確認できるため、テラコッタを入力して両方の比を見比べると判断しやすくなります。