写真・スクショの色からカラーコード（HEX）を調べる方法

まずは元の画像を用意する

コードを正確に取りたいなら、できるだけ元のファイルを使います。WebサイトやアプリのスクリーンショットはiPhoneが描画したピクセルをそのまま記録しているので、いちばん確実な素材です。一方、LINEやX、Instagram、メールを経由した画像は送信時に再圧縮されることが多く、JPEGの圧縮で色が周囲ににじみます。元画像で#3A7BD5だった部分が、転送後は#3C7AD2になる、といったずれが起こります。

ほかのアプリの共有メニューからColor Identifierに画像を送ることもできますが、その場合アプリは画像をJPEGとして保存し直すため、ピクセルの値がわずかに変わることがあります。スクリーンショットのコードを正確に取りたいときは、アプリの中から写真ライブラリを開いて選んでください。

狙うのは1ピクセル、輪郭は外す

ピッカーが読むのは指先の下のピクセル1点だけです。置く場所は、色が均一に広がっている面の中央にします。文字・アイコン・罫線の輪郭は、なめらかに見せるために前景色と背景色を混ぜた中間色のピクセルでできているため、そこを拾うとどちらでもないコードになります。

アプリには拡大鏡やズーム機能がありません。小さなボタンや細い線の色を取りたいときは、先に写真アプリの編集でその部分だけを切り取ってから開くと、目的の色が画面いっぱいに表示されて狙いやすくなります。写真なら、ハイライトや影、布目や木目のような質感のある場所も外しましょう。空や照明の当たった壁のようなグラデーションは場所ごとにコードが違うので、どの部分の色が欲しいのかを先に決めておきます。

コピーしたコードを各ツールで使う

「16進数をコピー」を押すと、#付きのコードがクリップボードに入ります。CSSなら color: #3A7BD5; のようにそのまま書けますし、Figmaの塗りの欄やCanvaのカラー選択画面、Keynoteの色設定など、16進数を受け付ける入力欄にも貼り付けられます。

R・G・Bを別々に入力するソフト向けには「RGBをコピー」が便利で、R: 58, G: 123, B: 213 の形でコピーされます。PowerPointやWordの色の設定画面に数値を入れるときや、CSSで rgb(58, 123, 213) と書くときに使えます。各値の行にも個別のコピーボタンがあるので、HSBやCMYKだけが必要な場合も打ち直す必要はありません。

読み取るたびに数字が少し違うのはなぜ？

同じ色を何度か読み取ると、末尾の文字が少し違うことがあります。圧縮やリサイズで個々のピクセルが変わるほか、iPhoneで撮った写真は広色域のDisplay P3で保存されることが多く、sRGBを前提とするWebツールに持っていく際に数値が少し動くためです。1つのチャンネルで数ポイント程度の差なら、見た目ではほぼ区別できません。

大きく変わったときは、輪郭や影、反射など別の部分を拾っている可能性が高いです。ブランドカラーやスタイルシートに使う値を確定する前に、ピッカーを少しずらして読み直し、値がそろうことを確かめてください。

カメラで撮った写真から取ったコードの意味

物を撮影した写真では、ホワイトバランスや露出、フィルターによって、ピクセルの色はすでにカメラ側で調整されています。取り出したコードは「その写真に写っている色」としては正しく、写真に合わせたバナーやスライドを作るときにはそのまま使えます。ただし、別の光の下で見たときの物の色と一致するとは限りません。

取り出した色は保存しておけば、コードを付けたまま後から見返したり、並べて比べたりできます。メモアプリにコードを書き写すより、色として保存してパレットにまとめ、色名とHEXの一覧として共有するほうが管理しやすくなります。保存できるパレットは無料版で2つまで、Proでは制限がありません。

よくある質問

関連する色の質問