濃いオレンジはどんな色？HEXコードで赤みと明るさを見比べる

TIPS

「濃いオレンジ」は、鮮やかなオレンジより暗く、赤茶や黄土色に近く見える場合もある色の呼び方です。ただし、一般的な色の呼び方としての「濃いオレンジ」に、唯一のカラーコードがあるわけではありません。CSS（Webページの見た目を指定する仕組み）の色名darkorangeは■#FF8C00と定義されています。この記事では赤みと明るさを見比べるため、別の基準色を使います。赤みを強めるか、明るさを下げるかによって色は変わります。ここでは基準色を■#BF6618とし、HEXコードを並べて違いを確かめます。

濃いオレンジは「赤み」と「明るさ」を分けて選ぶ

HEX（ヘックス）は、Webで使う色を赤・緑・青の成分ごとに16進数で示すコードです。たとえば基準の■#BF6618は、赤191・緑102・青24の組み合わせです。オレンジの範囲でも緑の量を変えると、赤寄りにも黄寄りにも調整できます。

色の方向を比べるときは「色相」、暗さを比べるときは「明度」を分けて考えると整理しやすくなります。HSL（色相・彩度・明度で色を表す方法）では、基準色は色相約28度、彩度約78％、明度約42％です。彩度は鮮やかさ、明度は黒と白の間でどの程度明るいかを示します。

HEXコードで赤みと明るさを見比べる

赤みを比較：色相を変えた3色

赤寄りの濃いオレンジ■#BF4418：色相約16度。朱色や赤茶に近い方向です。
基準の濃いオレンジ■#BF6618：色相約28度。赤みと黄みの中間に置いた例です。
黄寄りの濃いオレンジ■#BF8718：色相約40度。山吹色や黄土色に近づく方向です。

この3色は赤191・青24を共通にし、緑の値だけを68、102、135と変えています。HSLの彩度は約78％、明度は約42％でほぼ同じです。つまり、暗さを大きく動かさずに赤みの違いを見比べられます。ただし、HSLの明度が同じでも、人が感じる明るさや背景とのコントラスト比まで同じにはなりません。

明るさを比較：色相を揃えた3色

さらに暗いオレンジ■#8D4B11：HSL明度約31％。茶色に近い落ち着いた表現を試す色です。
基準の濃いオレンジ■#BF6618：HSL明度約42％。装飾や見出しに使う中間の候補です。
少し明るいオレンジ■#E5812A：HSL明度約53％。同じ系統でも軽さを足したい場合の候補です。

こちらは色相を約28度、彩度を約78％に揃えた比較です。明度だけを上下させると、赤寄り・黄寄りの方向はほぼ保ったまま、濃さを選べます。数値は6桁HEXへ変換した際の丸めを含む目安です。

Webで使うときは文字と背景のコントラストを確認する

明るいクリーム色■#FFF7EEを背景にするなら、暗いオレンジ■#8D4B11を見出しの文字色にすると、コントラスト比は約6.29:1です。本文には濃いグレー■#29241Fを使うと背景との比は約14.48:1になります。ボタンの背景を暗いオレンジ■#8D4B11、文字を白■#FFFFFFにした場合も約6.67:1です。

一方、濃いグレー■#29241Fのバナーに少し明るいオレンジ■#E5812Aのボタンを置き、文字を同じ濃いグレー■#29241Fにすると、ボタン内の文字と背景の比は約5.49:1です。基準色■#BF6618のボタンに白■#FFFFFFの文字を載せた場合は約4.09:1で、通常サイズの文字には不足します。

赤みの違いも文字色の選択に影響します。クリーム色■#FFF7EEを背景にした場合、赤寄り■#BF4418の文字は約4.88:1ですが、黄寄り■#BF8718の文字は約2.96:1です。HSL明度がほぼ同じでも、後者は通常サイズの文字には不足します。

WCAG（Webコンテンツのアクセシビリティ指針）2.2のAA水準（適合レベルの一つ）では、通常サイズの文字は原則4.5:1以上、大きな文字は3:1以上が必要です。色名やHSLの明度だけで判断せず、実際の文字と背景の組み合わせで確認しましょう。

HueRollではHEX入力で色を調整し、HSLなどの数値や、選択色と白・黒とのコントラスト比を確認できます。ただし任意の2色の直接比較やAA判定はできません。今回のクリーム色や濃いグレーとの比は別途計算した値です。気になる濃いオレンジを選んだら、赤み・明るさ・使う場所の順に見直すと選びやすくなります。