2つの色を比べる
色名またはカラーコードを指定すると、 見た目だけでなく色差・明るさ・鮮やかさ・色相・ コントラストまで比較できます。
比較結果はここを見る
2つの色は「見た目が近い・遠い」だけではありません。 色差、明るさ、鮮やかさ、色相、文字とのコントラストを分けて見ると、違いが分かりやすくなります。
色差 ΔE00
CIEDE2000による色差です。 数値が小さいほど2色は近く、 数値が大きいほど違いが大きいことを示します。
明るさの差
OKLChのLをもとに、どちらが明るいかを確認します。 同じような色相でも明度が違えば印象は大きく変わります。
クロマの差
色の鮮やかさの違いを見る目安です。 くすんだ色と鮮やかな色の違いを数値で比べられます。
色相差
OKLChの色相角をもとに色みの方向の差を確認します。 無彩色に近い場合は参考外になることがあります。
コントラスト
一方を背景、もう一方を文字として使った場合のコントラスト比を確認します。 可読性を考えるときに重要です。
こんなときに色比較が便利です
「ほとんど同じに見えるけれど何が違う？」という疑問から、 Webデザインで文字が読めるかの確認まで、 同じ比較画面で見られます。
色をもっと調べる
比較して気になった色は、 色図鑑・配色・カラーコード・色文化へそのまま広げられます。
色比較について
色名だけでも比較できますか？
はい。 色しるべに登録されている色は、 色名・読み・英語名などから候補を探せます。 任意のHEXカラーコードを直接入力することもできます。
ΔE00は小さいほど似ているのですか？
はい。 CIEDE2000の色差では、 基本的に数値が小さいほど2色が近く、 大きいほど差が大きいことを示します。 ただし、実際の見え方は表示環境や周囲の色などにも影響されます。
色相差が表示されないことがあるのはなぜですか？
白・黒・灰色など無彩色に近い色は、 色相の方向そのものが意味を持ちにくいためです。 その場合は色相差を無理に数値化せず、 参考外として扱います。
コントラスト比は何を見るための数値ですか？
一方の色を背景、もう一方を文字として使う場合の 読みやすさを考えるための指標です。 色しるべではWCAG 2.xの数値基準を参考に、 通常文字や大きな文字の目安も表示します。