使い方
- 比べたい 2 色をそのまま入力または選択します。
- 色差ラベルと数値を見て、近すぎるかどうかを確認します。
- 最終的に文字の読みやすさを見たいときだけコントラストチェッカーへ進みます。
Wave 50 expansion
配色候補を作ったあとに、差を数値で見直す
このページは Harmony や Palette や Scale のあとに置く想定です。候補を作るのではなく、すでにある 2 色を比較する役割だけに絞っています。
#2563eb
#1d4ed8
近いページとの使い分け
カラーピッカー は最初の色を探すとき、配色ハーモニー生成 は関係性のある配色候補を作るとき、カラーパレット生成 や カラースケール生成 は1色から候補を広げるときに使います。このページは、すでに 2 色が決まっていて、その差を数値で見たいときに使います。採用色の OKLCH / OKLab 値まで見たいなら次に OKLCH 変換、実装へ渡す color-mix() 式を作りたいなら CSS color-mix 生成 へ進みます。文字の読みやすさが目的なら最後に コントラストチェッカー へ進みます。
FAQ
このページでは何ができますか？
2 色を RGB 距離と簡易な ΔE76 色差で比較し、各色の HEX・RGB・HSL とあわせて確認できます。
Contrast Checker との違いは何ですか？
Contrast Checker は文字と背景の読みやすさを確認するページです。このページは、2つの色見本がどれくらい近いか、どれくらい離れているかを数値で見るページです。
Color Harmony や Color Palette との違いは何ですか？
Color Harmony は関係性のある配色候補を作るページ、Color Palette は1色から明暗やアクセント候補を広げるページです。このページは、すでに2色が決まっていて、その差を比べたいときに使います。
共有URLには何が入りますか？
左側と右側の HEX 値だけが入ります。