翡翠色のカラーコードを選ぶ｜青みと明るさの違いを比較

翡翠色（ひすいいろ）のカラーコードを調べると、似た緑でも青みや明るさの異なる色見本が見つかります。Web制作では、色名だけで決めず、基準となる1色を選んでから用途に合わせて調整すると迷いにくくなります。この記事では翡翠色の見本を比較し、鉱物展示サイトの見出し・背景・案内カードに使う方法を紹介します。

翡翠色は基準のHEXを決めてから青みと明るさを比較する

翡翠色は宝石のヒスイを思わせる青みのある緑色です。ただし宝石自体にも色の幅があり、色名から一つの数値が決まるわけではありません。日本の色見本資料には翡翠色■#38B48Bという例があり、別の色見本では■#3F9877も翡翠色と呼ばれています。後者の方が暗い緑です。HEX（ヘックス）はWebで色を6桁の英数字で指定する形式なので、実際の制作では採用するコードを明記しましょう。

ここでは翡翠色■#38B48Bを比較の出発点にします。RGBという、赤・緑・青の光の成分をそれぞれ0～255で示す方式では、赤56・緑180・青139です。緑の値が最も高く、青も含まれるため、青みのある緑に見えます。

青みを強めた調整例■#38A0B5は赤56・緑160・青181で、青の値が緑を上回ります。基準色より水色に近づく一方、全体の明るさは大きく変えずに色みの方向を比較できます。明るくした調整例■#A8E0CDは赤168・緑224・青205で、同じ青緑系でも淡い背景に向く候補です。後の2色はこの記事で作った比較用の配色であり、「翡翠色」という名前に対応する正式なコードではありません。

鉱物展示サイトで使うなら見出しと情報カードを分ける

例1：翡翠色を冒頭の案内帯に使う。「ヒスイの原石展」という見出しの背景を翡翠色■#38B48Bにし、文字を深い青黒色■#061B22にします。文字と背景のコントラスト比は約6.80:1です。コントラスト比は、隣り合う色の明るさの差を示す数値です。本文のエリアはオフホワイト■#F7FAF7を背景にし、青黒色■#061B22で説明を書くと約16.82:1になります。

「展示の詳細を見る」ボタンを翡翠色の案内帯に置くなら、青黒色■#061B22の背景に白■#FFFFFFの文字を載せます。ボタン内の文字と背景の比は約17.68:1で、ボタンと周囲の翡翠色■#38B48Bの比は約6.80:1です。明るい緑を広い面に使い、操作する場所は濃い色で区別する構成です。

例2：青みの強い色と淡い色を役割で分ける。海や水を連想させる展示の紹介では、冒頭の背景を青み寄りの調整例■#38A0B5に替え、見出しを青黒色■#061B22にすると約5.78:1です。標本の産地や大きさをまとめるカードには明るい調整例■#A8E0CDを使い、説明文は同じ青黒色■#061B22で約11.96:1を確保します。青みを強める場所と、明るくして情報を載せる場所を分ける方法です。

似た色だけで状態や境界を区別しない

基準の翡翠色■#38B48Bと青みを強めた色■#38A0B5のコントラスト比は約1.18:1しかありません。「選択中」「未選択」をこの2色だけで示さず、下線やラベルも加えましょう。また、淡いカード■#A8E0CDと外側のオフホワイト■#F7FAF7の差も約1.41:1です。境界が必要なら灰みの青緑■#4C7069の枠を加えると、カードとの比は約3.71:1、外側の背景とは約5.22:1になります。

翡翠色■#38B48Bの上に白■#FFFFFFの通常サイズの文字を載せると約2.60:1、青み寄りの色■#38A0B5でも約3.06:1なので避けます。WCAG 2.2（Webコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字に原則4.5:1以上、大きな文字に3:1以上が必要です。操作に必要な図形や境界など、文字以外の重要な表示にも隣接色との3:1以上が必要な場合があります。

HueRollではHEXで色を調整し、選択色と白・黒とのコントラスト比を確認できます。ただし任意の2色を比べたり、AA判定を自動で行ったりする機能はありません。制作画面で実際に隣り合う色の組み合わせは別途確認してください。