画像の中の色を正確に取り出す

スクリーンショット・ロゴ・写真をクリックして、そのピクセルのHEX・RGB値を取得します。

このガイドで使う道具

サイトのブランドカラーや写真の色など、「この色」を目測ではなく実値で取ります。クリック位置のピクセルをファイルの解像度そのままで読みます。

PNG・JPG・WebPをドロップまたは選択し、知りたい位置をクリックします。取得した色・HEX・RGB・位置が履歴として残り、HEXはワンクリックでコピーできます。HSLやCSS形式が要るなら色コード変換ツールへ渡します。

クライアントから現行サイトのスクリーンショットが届いたら、読み込んでヘッダーの面をクリック。#1f6f9c が取れたら、そのままCSSへ、または文字色とのコントラストチェックへ渡します。

値はファイルに記録されたsRGBピクセルです。プロファイル付きやHDR素材は表示と記録値がずれることがあります。アンチエイリアスやJPEGノイズの縁は混色なので、べた塗りの内側をクリックしてください。写真では隣ピクセルと常に違うので、数点取って中央値寄りを採用します。