あんず色とは？色見本とカラーコード、似た色との違い

あんず色（杏色）は、熟した杏の実を思わせる、やわらかなオレンジ系の色です。ピーチや桃色、蜜柑色とも近く見えますが、比べると黄み・赤みや鮮やかさに違いがあります。この記事では杏色のカラーコードと色見本を確認し、似た色との見分け方、Webページに取り入れるときの文字色や背景色を紹介します。

あんず色は熟した杏の実に由来するやわらかな黄赤

和色大辞典に掲載されている杏色の例は■#F7B977で、RGBでは赤247・緑185・青119です。一方、I-IROの例は■#DAA274で、RGBでは赤218・緑162・青116です。RGBは、画面上の色を赤・緑・青の光の成分で示す方法です。HEX（ヘックス）は、それを「#」と6桁の英数字で記す形式です。

杏色は英語で「アプリコット（Apricot）」と呼ばれます。そのため、杏色とアプリコットを必ず別々の色として扱う必要はありません。ただし、色名はデザインの印象を伝える言葉でもあり、すべての色見本で同じ数値に統一されているわけではありません。Web制作では、名前だけでなく実際に使うHEXコードを共有しましょう。

あんず色とピーチ・桃色・蜜柑色を色見本で比較

次の4色は、色名資料に掲載されているコードの例です。同じ大きさの色見本で見比べると、杏色からどの方向に色みが変わるかを確認できます。各色のコードは、その色の背景の上に濃い文字で表示しています。

杏色■#F7B977とピーチ■#FBD8B5は、どちらも果実に由来しますが、この見本ではピーチのほうが淡く、黄赤の強さが控えめです。一方、桃色■#F09199は桃の果肉ではなく花に由来する色名で、杏色よりピンク寄りです。蜜柑色■#F18D00は杏色より鮮やかで、濃いオレンジに近い見え方です。

例えば、やわらかな果実の雰囲気を出したいなら杏色、明るい余白を多く取りたいならピーチ、ピンク寄りに見せたいなら桃色、はっきりした橙を使いたいなら蜜柑色、と使う目的から比較できます。どれが常に最適というわけではないため、実際の写真や周囲の色と一緒に選びましょう。

Webでは色見本と文字色を分けて考える

例えば、杏のジャムを紹介する商品ページでは、背景を温かいオフホワイト■#FFF8EF、商品名を濃いブラウン■#604232、本文を暗いチャコール■#332E2Aにする配色が考えられます。背景と商品名のコントラスト比は約8.58:1、本文とは約12.73:1です。コントラスト比は2色の相対的な明るさの差を表す数値で、文字を載せる場所ごとに確認します。

• 味や産地を示す小さなラベル：ラベル背景に杏色■#F7B977、文字にチャコール■#332E2Aを使います。文字と杏色の比は約7.77:1です。ラベルには「杏ジャム」「産地」などの文字を入れ、色だけで意味を伝えないようにします。
• 商品写真のカード：カードを白■#FFFFFF、その周囲をオフホワイト■#FFF8EFにします。背景同士の比は約1.05:1と小さいため、輪郭が必要なら落ち着いたグレーブラウン■#766B5Dの枠線を添えます。枠線は白と約5.21:1、オフホワイトと約4.94:1です。
• 購入ボタン：深いブラウン■#604232をボタン面に、白■#FFFFFFをボタン文字に使います。文字とボタンの比は約9.04:1、ボタンとオフホワイト■#FFF8EFの周囲との比は約8.58:1です。杏色は商品を説明するラベルに残し、購入操作は別の濃い色で区別します。

杏色■#F7B977の上に白■#FFFFFFの文字を重ねると、コントラスト比は約1.73:1です。反対に杏色を白背景の本文文字として使っても同じ約1.73:1で、どちらも通常の文字には不十分です。WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常文字に原則4.5:1以上、大きな文字には3:1以上が必要です。

HueRollではHEXコードを入力して色を調整し、RGBの数値や配色候補、選択色と白・黒のコントラストを確認できます。ただし色名の直接入力、任意の2色同士の比較、WCAGの自動判定には対応していません。商品ページで使う背景と文字の組み合わせは、別途2色ずつ確かめましょう。