珊瑚色とサーモンピンクの違いは？色見本で比べる赤みと明るさ

珊瑚色とサーモンピンクはどちらも赤みを含む明るい色ですが、並べると黄みや明るさに違いがあります。今回比較する見本では、珊瑚色の方がやや明るく、サーモンピンクは橙色寄りです。この記事では色見本とRGBの数値で違いを確認し、陶器の新色を紹介するWebバナーで背景と文字を組み合わせる方法を説明します。

珊瑚色とサーモンピンクは何が違う？

珊瑚色（さんごいろ）は赤い珊瑚を思わせる色名で、今回の見本は■#F5B1AAです。サーモンピンクは鮭の身の色に由来する名前で、見本には■#F4A583を使います。どちらも色名だけで数値が一つに決まるわけではありません。ここで示すHEX（ヘックス）は、Webの色を6桁の英数字で指定するコードです。

RGB（アールジービー）は、画面の色を赤・緑・青の成分で表す方法です。珊瑚色■#F5B1AAは赤245・緑177・青170、サーモンピンク■#F4A583は赤244・緑165・青131です。赤の値はほぼ同じですが、サーモンピンクの方が緑・青の値が低く、とくに青が少ないため、今回の2色では黄み・橙みが強く見えます。珊瑚色は青の成分が比較的多く、よりピンク寄りの見本です。

明るさを比較すると、今回の珊瑚色■#F5B1AAの方が少し明るいものの、2色間のコントラスト比は約1.11:1しかありません。コントラスト比とは、隣り合う色の明るさの差を数値で表すものです。色の違いは見えても、ボタンの選択状態や情報の重要度を2色の違いだけで伝えるには向きません。別資料の色見本では異なるコードが使われることもあるため、制作時は採用した値を共有します。

陶器の新色紹介バナーで背景を入れ替えて比べる

例1：珊瑚色を主役にする。陶器の小皿の新色を紹介するバナーで、広い背景を珊瑚色■#F5B1AA、見出しと短い説明を濃い墨紫■#372C35にします。文字と背景のコントラスト比は約7.47:1です。価格・素材・サイズはオフホワイト■#F8F6F2のカードにまとめ、文字は墨紫■#372C35で約12.36:1を確保します。

「商品を見る」ボタンは珊瑚色の背景上に深い赤紫■#653B49で配置し、白■#FFFFFFの文字を載せます。ボタンの文字と背景は約9.23:1、ボタンと周囲の珊瑚色■#F5B1AAは約5.17:1です。珊瑚色を広く使い、詳しい情報と操作する場所を別の明るさで分ける方法です。

例2：サーモンピンクを主役にする。同じ写真とレイアウトのまま、背景だけをサーモンピンク■#F4A583に替えます。見出しを墨紫■#372C35にした場合の比は約6.71:1です。こちらの方が少し暗く橙色寄りの背景になりますが、見出しの濃色はそのまま使えます。ボタンも深い赤紫■#653B49に白■#FFFFFFの文字を維持すると、文字は約9.23:1、ボタンと周囲の背景は約4.64:1になります。写真を変更せず背景だけを替えると、色みと明るさの違いを比較しやすくなります。

淡い色の上の白文字とカード境界に注意する

珊瑚色■#F5B1AAに白■#FFFFFFの文字を載せた場合は約1.79:1、サーモンピンク■#F4A583では約1.99:1です。どちらも通常の見出しや説明文字には使わず、墨紫■#372C35などの濃い文字色を選びます。また、背景が珊瑚色の場合、オフホワイト■#F8F6F2のカードとの比は約1.66:1、サーモンピンクの場合も約1.84:1なので、必要な境界を色の差だけに頼らないようにします。

カードの輪郭が必要なら、灰みの赤紫■#65515Bの枠を付ける方法があります。枠と珊瑚色■#F5B1AAは約4.08:1、サーモンピンク■#F4A583とは約3.66:1、カードのオフホワイト■#F8F6F2とは約6.75:1です。枠は細すぎない幅にし、実際の表示も確認しましょう。

WCAG 2.2（Webコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字は原則4.5:1以上、大きな文字は3:1以上が必要です。操作に必要な境界など、文字以外の重要な表示にも隣接色との3:1以上が必要な場合があります。HueRollではHEX入力で色を選び、白・黒とのコントラスト比を確認できますが、任意の2色間の比較やAA・AAAの自動判定はできません。実際の組み合わせは別途確かめてください。