画像のカラーピッカー

画像からカラーコードを調べる手順

1. 画像を追加するJPG、PNG、WebP、AVIF、GIF、BMPのファイルを選ぶか、ドロップまたは貼り付けます。画像はすぐに開き、端末の外には出ません。
2. 取得したい色をクリックする画像をクリック（タップ）します。ポインターの周りの画素が拡大鏡に表示され、ドラッグするとなぞった位置の色を続けて確認できます。矢印キーなら1画素ずつ動かせます。
3. コードをコピーするHEX、RGB、HSLの横にあるコピーボタンを押します。取得した色は直近の10色が下に残り、まとめてコピーすることもできます。

画像のカラーピッカー（スポイト）とは

カラーピッカーは、画像の1つの画素の色を読み取り、デザインやCSSで使えるカラーコードとして表示する道具です。画像編集ソフトのスポイトツールと同じ働きをします。使い方は、画像を開き、調べたい位置をクリックして、HEXコード（例：#F2BE22）をコピーするだけです。

このツールは縮小したプレビューではなく、元のファイルの画素を直接読み取ります。横幅6000画素の写真でも、ポインターの下にある本当の1画素の色が分かります。8倍の拡大鏡に画素の格子を重ねて表示するので、境界線や細かい部分でも狙った1画素を選べます。

色の表記にはいくつかの種類があります。HEXはWebデザインで使う6桁のコードです。RGBは赤、緑、青の量を0から255で表します。HSLは色相、彩度、明度で表すので、手で微調整しやすい形式です。CMYKは印刷向けの目安として表示します。

色はどのくらい正確ですか

値は、選んだ画素そのものの色をWebの標準であるsRGBで読み取ったものです。Display P3など別の色プロファイルを持つ写真は、同じ画素でもデスクトップのアプリが示す値と1から2ほどずれることがあります。アプリごとにプロファイルの変換方法が違うためです。

JPGは圧縮されているため、隣り合う画素にわずかな色のばらつきがあります。壁や服、空のような色を知りたいときは、平らな部分を何か所かクリックして見比べるか、多くの画素をまとめて扱うパレット抽出を使ってください。

• 透明な画素は透明と表示されます。このとき、アルファ値と、6桁と8桁の両方のHEXコードが出ます。
• スマートフォンで縦向きに撮った写真は正しい向きで表示され、色の取得も同じ向きで行われます。
• 大きな写真でも問題ありません。読み取るのはポインターの下の画素だけで、画像全体は読み込みません。

画像からカラーパレットを作る

「パレットを抽出」を押すと、画像の主な色が、画像に占める割合の大きい順にパーセント付きで表示されます。色数は5、6、8、10色から選べます。少ない色数では大きくまとまった色、多い色数ではアクセントになる色まで拾えます。

色見本をクリックするとHEXコードがコピーされ、パレット全体をCSS変数、JSON、HEX一覧の形でコピーすることもできます。パレットは縮小したコピーから作るので、大きな写真でも素早く表示され、ほとんど透明な画素は無視されます。

画面上のどこからでも色を取得する

ChromeやEdgeなど、EyeDropper機能に対応したブラウザでは「画面から取得」ボタンが表示されます。読み込んだ画像だけでなく、ほかのウィンドウの色もクリックで取得できます。対応していないブラウザではボタンは表示されず、画像からの取得は同じように使えます。

よくある質問