蜜柑色とオレンジは同じ？カラーコードと色見本を比べる

蜜柑色（みかんいろ）とオレンジは、どちらも果実を思わせる鮮やかな橙系の色ですが、いつも同じ数値を表すわけではありません。特にWeb制作では、日本の色名としての「蜜柑色」と、CSSで使う色名「orange」を分けて考える必要があります。3つの色見本とカラーコードを比べ、商品ページや告知バナーでの使い方を確認しましょう。

蜜柑色とオレンジは似ていても、HEXコードは同じではない

蜜柑色は温州みかんの果皮に由来する色名です。和色大辞典では■#F08300、I-IROでは■#E98900を蜜柑色の見本として紹介しています。一方、CSS（Webページの文字や背景などの見た目を指定する仕組み）の色名orangeには■#FFA500という決まった値があります。日常の「オレンジ」は幅広い色を指しますが、CSSのorangeは特定の色です。

HEX（ヘックス）は「#」と6桁の英数字で色を示すカラーコードです。RGBは赤・緑・青の光の成分を数値で示します。次の3つは、資料に掲載された値をそのまま比べた色見本です。

見本Aの蜜柑色■#F08300と見本B■#E98900のコントラスト比は約1.01：1で、明るさが近い色です。CSSのオレンジ■#FFA500は前の2色より緑のRGB値が高く、比較すると黄みがやや強く見えます。見本A■#F08300とCSSのオレンジ■#FFA500のコントラスト比も約1.34：1です。コントラスト比は2色の相対的な明るさの差を表し、色名の一致や配色の良し悪しを判定するものではありません。

みかんの商品カードとキャンペーンバナーで使い分ける

例A：みかんの産地直送商品カード。商品写真を囲む背景は温かいオフホワイト■#FFF8EF、商品名・産地・価格の文字は濃いブラウン■#302920にします。「旬のみかん」の小さなラベルに和色大辞典の蜜柑色■#F08300を使い、ラベル文字も濃いブラウン■#302920にします。「商品を見る」ボタンは深い緑■#235047に白■#FFFFFFの文字を合わせます。背景と本文のコントラスト比は約13.61：1、蜜柑色のラベルと濃い文字は約5.43：1、深緑と白いボタン文字は約9.09：1です。写真の色とラベルが競いすぎないよう、蜜柑色を小さく添える構成です。

例B：秋のフルーツフェア告知バナー。背景を深い青緑■#243B3Dにして、「フルーツフェア開催」の短い見出しと日時をオフホワイト■#FFF8EFで置きます。「特設ページを見る」ボタンはCSSのオレンジ■#FFA500を背景にし、文字は濃いブラウン■#302920にします。背景と見出し文字は約11.27：1、ボタン面と文字は約7.27：1、ボタン面と周囲の青緑は約6.01：1です。I-IROの蜜柑色■#E98900を使いたい場合は、ボタンや短い装飾の色を置き換えて比較し、近いオレンジを何種類も並べない方が整理しやすくなります。

オレンジの白文字と、似た色同士の区別に注意する

蜜柑色■#F08300の上に白■#FFFFFFの文字を置くと約2.64：1、CSSのオレンジ■#FFA500と白■#FFFFFFは約1.97：1です。どちらもWCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAで通常サイズの文字に必要な4.5：1、大きな文字に必要な3：1を下回ります。今回のような明るいオレンジの面では、濃い文字を選びましょう。

また、似たオレンジを「受付中」「受付終了」などの状態ごとに色だけで使い分けると、違いが伝わりにくくなります。状態名を文字でも示し、操作上重要な境界には形や十分な明暗差を加えます。HueRollではHEX入力で色を調整し、選択した色と白・黒のコントラストを確認できます。ただし、任意の2色の比較やWCAGの自動合否判定には対応していないため、完成した配色の組み合わせは別途検証してください。