画像スポイトツール・ピクセル拡大ルーペ

Web サイトやスライド、SNS 画像を作るとき、ブランドロゴや商品写真、参考画像から正確な色を拾いたい場面はよくあります。目分量でカラーコードを推測するとずれやすく、スクリーンショットをデザインソフトに貼るのも手間です。このツールなら画像を読み込んでクリックするだけで、そのピクセルの HEX・RGB・HSL がすぐに分かり、CSS や Figma、Canva にワンクリックでコピーできます。

画像にカーソルを乗せると円形のルーペが現れ、カーソル周辺の 9×9 ピクセルを拡大表示し、選択中のピクセルを赤枠で示します。写真の輪郭やグラデーションでは隣り合うピクセルの色が大きく違うことがあるため、ルーペを使えばアンチエイリアスやノイズによる濁った色を避け、狙った色を正確に拾えます。取った色はすべて履歴に残り、比べながら配色をまとめられます。

色を取ったら、下の WCAG 2.1 コントラストチェッカーで前景（文字）色と背景色を設定し、コントラスト比と合否を確認できます。通常の文字は AA で 4.5:1、AAA で 7:1、大きな文字（18pt 以上、または 14pt 太字以上）はそれぞれ 3:1、4.5:1 に緩和されます。ブランドカラーからボタンや見出しの色を作るときに確認しておけば、高齢者や弱視の方、屋外の強い日差しの下でも読みやすくなります。

なお、取得できるのは画像ファイルに記録された値です。写真は照明やホワイトバランス、圧縮の影響を受けるため、同じ商品でも写真ごとにコードが変わることがあります。正式なブランドカラーはガイドラインの値を優先してください。画像はブラウザ内の Canvas で読み込むだけで、アップロードはされません。