画像カラーピッカー
ブラウザ上で写真から色を抽出:拡大ルーペがピクセルを拡大表示し、クリックするだけでHEX、RGB、HSLのコードをコピーできます。
🔒 ブラウザ内で完全に処理されます。ここに入力した内容はアップロードされません。
結果
この画像カラーピッカーは、「このピクセルは正確に何色なのか?」というシンプルで頻繁に生じる疑問に答えます。写真、スクリーンショット、デザインの書き出しをアップロードまたはドラッグインすると、ツールがそれをピクセル精度のキャンバスに描画します。カーソルを動かすと拡大ルーペが追従し、その下の11×11ピクセルを拡大表示するので、正確に狙いを定めることができます。カーソル下の値はリアルタイムで表示されます。クリックすると、色が3枚のカード(CSS用のHEX、コード用のRGB、明度調整用のHSL)に表示され、それぞれにコピーボタンが付いています。
このようなピッカーにとって、精度こそがすべてです。アンチエイリアス処理されたテキスト、グラデーション、写真のエッジでは、隣接するピクセルの色が大きく異なり、縮小プレビューから目視で選択すると、ほとんどの場合、意図しない色合いを拾ってしまいます。ルーペは物理的な各ピクセルを大きな正方形として表示し、中心にはクロスヘアが表示されるため、コピーされる値はまさに狙ったピクセルの値です。直近8回の選択履歴はカラースウォッチとして保持され、いずれかをクリックするとその色を再コピーできます。
このツールはブラウザのCanvas API上に構築されており、完全にデバイス上で動作します。画像がアップロードされることはなく、待ち行列もアカウントもありません。機密性の高いモックアップやドキュメントであっても安全に検査できます。PNG、JPG、WebP、GIF、SVGなど、ブラウザが開けるあらゆる画像形式に対応しています。
主な用途:スタイルガイドを紛失した際にロゴからブランドカラーを復元する、リファレンスのスクリーンショットにUIカラーを合わせる、グラデーションが実際にどのようにレンダリングされるかを確認する、写真からパレット候補を取得するなど。その後、別の表記法(印刷用のCMYKや正規化された値)で色が必要になった場合は、色フォーマット変換ツールがスポイトの続きを引き受けます。