画像の色取得 — トラブル対処

入力と出力の例

取得した色がおかしいときは、透明なピクセルを押した、縁やグラデーションだった、圧縮された元画像だった、他のアプリで見える色と比べている、のいずれかが多いです。

明らかに黒ではない場所で結果がちょうどrgb(0, 0, 0)になるなら、PNGやSVGの完全に透明な部分をクリックした可能性が高いです。見えている図形の内側をクリックし直してください。1色に見えるのにクリックのたびに数値が少し違うなら、JPGの圧縮ノイズかなだらかなグラデーションです。複数の点を取り、中央の値を使います。

よくある問い合わせに、マーケターが「ツールのHEXがデザインファイルの色と合わない」というものがあります。どちらかを疑う前に、同じピクセルを両方で比べてください。色プロファイルの違い、スクリーンショット、拡大縮小したコピーがあると値がずれます。元のファイルを開き直し、同じ図形をもう一度クリックします。

この画像から色を取得できないというメッセージが出たら、PNGで保存し直してみてください。画像を読み込めないと出る場合は、ファイルが空でなく、PNG・JPG・WebP・GIF・SVG・AVIF・BMPのいずれかか確認します。複数ファイルの同時ドロップは拒否されるので1枚ずつにします。ブラウザーがクリップボードをブロックしてコピーできないときは、表示された値を選択して手動でコピーしてください。

大きな写真はキャンバスが縮小表示されるため、記憶している色と違って見えることがあります。ツールはクリック位置を実際のピクセル位置へ換算するので拡大は不要ですが、ごく小さなディテールのクリックは避けましょう。

Pixel selected in an image

HEX and RGB values

キャンバスでは透明なピクセルが黒として読まれます。透ける部分で黒が出るのはピッカーの不具合ではなく、画像側の制約です。