画像のカラーピッカー - どのピクセルのHEXコードも取得

このカラーピッカーの仕組み

これはパレット生成ツールではなくスポイトです。どのピクセルを取得するかはあなたが決め、ツールはそこに保存されている値をそのまま報告します。説明する価値があるのは読み取りの方法です。素直に思いつくやり方は、実は微妙に間違っているからです。画像全体を1枚のキャンバスに描いてピクセルを読み戻す方法は、大きな写真で破綻します。ブラウザはキャンバスの総面積をおよそ1670万ピクセル、4096×4096程度に制限しており、2400万画素のカメラファイルは簡単にそれを超えます。収まるように縮小すれば、どの取得値も複数の元ピクセルの平均になってしまい、スポイトが最も外してはいけない部分が真っ先に失われます。そこでこのツールは、ポインター周辺の小さな範囲だけを、デコード済みのファイルから直接、正確に1対1で描き直します。転送元と転送先の矩形が同じサイズなので、ブラウザは再サンプリングではなくピクセルのコピーを行い、画像がどれだけ大きくても得られる値はファイル自身のバイトになります。目に見えているプレビューはキャンバスの上限や画面に合わせて縮小されているかもしれませんが、そこから取得することは決してありません。同じ範囲がルーペにも供給されます。ルーペは元の1ピクセルを1辺13ピクセルの正方形として描き、間に格子線を引き、中央のセルを黒と白で囲むことで、どんな色の上でも見失わないようにしています。これは必要な機能です。幅4000ピクセルの写真を720ピクセルのカラムに置くと、画面上の1ピクセルの下に約5.6個の画像ピクセルが重なるからです。矢印キーは取得位置を元画像のちょうど1ピクセル、Shift＋矢印キーで10ピクセル動かします。1ピクセル幅の境界線やアンチエイリアスの細い縁に確実に乗せるには、これしか方法がありません。取得のたびに同じ8ビットの3値からHEX、RGB、HSLを表示し、ピクセルが完全な不透明でない場合は8桁のHEXAとRGBAも加えます。知っておくべき本当の限界はカラーマネジメントです。多くのブラウザではキャンバスが埋め込みICCプロファイルを破棄するため、値はカラーマネジメント対応のエディターが示すものではなく、ブラウザが実際に描画している色と一致します。