タンジェリンとはどんな色？カラーコードとオレンジ系の色見本

TIPS

タンジェリンは、オレンジに近い色ですが、普通のオレンジと何が違うのでしょうか。Web制作では色名だけで選ぶと、思った色と違う場合があります。この記事では、タンジェリンのカラーコードを確認し、赤みや黄みの違うオレンジ系の色を並べて比べます。色見本を使ったバナーの配色例や、文字を載せるときの注意点も紹介します。

タンジェリンは柑橘類の果皮を思わせるオレンジ系の色

タンジェリン（tangerine）は、同じ名前の柑橘類の果皮を思わせる、鮮やかな橙色の呼び名です。今回の代表例には■#F28500を使います。赤みと黄みの両方があり、明るいオレンジより少し深く感じられる色です。

■#F28500はHEX（ヘックス）カラーコードの一例です。HEXは、画面上の色を「#」と6桁の英数字で表す方法で、最初の2桁から順に赤・緑・青の成分を指定します。この色をRGB（赤・緑・青の光の量を表す形式）で示すと、赤242・緑133・青0です。

ただし、「タンジェリン」に唯一の公式コードがあるわけではありません。色名資料には■#FF9408をタンジェリンとして扱う例もあります。並べると後者のほうがやや明るく見えます。制作では色名を共有するだけでなく、選んだHEXコードも一緒に記録しましょう。なお、タンジェリンはCSSの標準的な色名キーワードには含まれないため、WebページではHEXコードなどで指定します。

オレンジ系の色見本を比較して用途を決める

同じオレンジ系でも、赤み・黄み・明るさの違いによって、配置に向く役割が変わります。次の色見本は、違いを比べるための例です。

タンジェリン：■#F28500。赤みを含む深めのオレンジで、商品名の横の小さな帯や季節の見出し飾りに。
別のタンジェリン例：■#FF9408。基準色より明るさがあり、軽快な雰囲気に寄せたいときの比較候補。
オレンジ（CSSのorange）：■#FFA500。基準色より黄みを感じやすく、明るさを出したい部分の候補。
オレンジレッド（CSSのorangered）：■#FF4500。赤みが強く、強調したい部分に少量使う候補。
淡い橙色の比較用：■#FFE4C4。白に近い色として、見出しを囲む面や情報の補助背景に。

例えば、柑橘ドリンクの新商品を知らせるWebバナーなら、背景をオフホワイト■#FFF9F0にし、見出しと説明文を濃いブラウン■#332820にします。タンジェリン■#F28500は果実写真の周りの短い帯や丸い飾りに、淡い橙色■#FFE4C4は販売期間の案内を載せる面に使います。申し込みボタンは深い青緑■#155B59に白文字■#FFFFFFを合わせると、オレンジの飾りと操作部分を分けられます。

オレンジ系の色を全部同じ画面に使う必要はありません。まず基準のタンジェリンを決め、写真の色に合わせてもう一つのオレンジと入れ替えながら、赤みや明るさの違いを比較しましょう。

文字を載せるときは明るさの差を確認する

色のコントラスト比は、文字と背景など、隣り合う色の明るさの差を表す数値です。タンジェリン■#F28500に白■#FFFFFFの文字を載せると約2.58:1で、WCAG 2.2のレベルAAが通常サイズの文字に求める4.5:1に届きません。一方、濃いブラウン■#332820を文字にすれば、同じタンジェリン背景との比は約5.55:1になります。

配色例の濃いブラウン■#332820とオフホワイト■#FFF9F0の組み合わせは約13.69:1、淡い橙色■#FFE4C4の上でも約11.70:1です。青緑のボタン■#155B59と白文字■#FFFFFFは約7.86:1になります。これらは不透明な単色同士で計算した値です。

ただし、タンジェリン■#F28500とオフホワイト■#FFF9F0の色面同士の比は約2.47:1です。飾りなら必ずしも問題ではありませんが、操作できる部品の輪郭など、意味を伝える境界には隣接色との3:1以上が求められる場合があります。写真に重ねる文字や細いアイコンも、実際の背景で確認してください。色名ではなくコードと用途をセットで管理すると、意図したタンジェリンを再現しやすくなります。