ETEAO
画像

    ツール名・説明・キーワードで検索。↑↓で移動、Enterで開く、Escで閉じる。

    カラーピッカー

    画像上でクリックしたピクセルのHEX・RGB・HSL値を抽出

    画像をドラッグ&ドロップ、またはクリックしてアップロード

    🔒 画像はブラウザ内でのみ処理され、サーバーには送信されません。

    カラーピッカーについて

    画像を読み込むとキャンバスに描画し、クリックした座標のピクセル値をHEX・RGB・HSLで表示します。6倍のルーペで狙ったピクセルに合わせられ、直近に選んだ8色が履歴に残ります。

    スポイトは単純に見えますが、写真やスクリーンショットから「その色」を正確に取り出すには落とし穴があります。同じ場所なのに値が揺れる理由と、画面全体から色を取れるブラウザ機能（EyeDropper API）の現状をまとめます。

    同じ場所でも値が少しずつ違う理由

    JPEGは8×8ブロック単位で圧縮し、色差情報を縦横半分の解像度で保存するのが一般的です。単色のロゴでも1ピクセル動くと#2F6FD1が#3070D2になるように値が揺れ、文字の輪郭のような境界付近には元のデザインにない中間色が生まれます。境界から数ピクセル離れた平らな内側を2〜3か所クリックし、最も多く出る値を使ってください。

    このツールは長辺が1,600ピクセルを超える画像を画面上では1,600ピクセルに縮小して表示しますが、色はクリック位置を元の座標に換算し、元解像度のピクセルから読みます。そのため4Kスクリーンショットの1ピクセル線も周囲と混ざらない値になります。ただ縮小表示では細い線を正確にクリックしにくいので、ルーペを見ながら選ぶか、その部分だけ切り抜いて読み込んでください。

    カラープロファイルと「画面で見た色」

    iPhoneの写真やMacのスクリーンショットにはDisplay P3プロファイルが付いていることが多くあります。ブラウザはキャンバスへ描画するときにキャンバスの色空間（既定はsRGB）へ変換するので、ここで得られる値はsRGB基準です。P3にしかない鮮やかな赤や緑はsRGBの端に切り詰められます。通常のCSSに貼るならこのsRGB値が正しい値です。

    透過PNGではアルファ値も読み取りrgba()で表示します。ただしHEXはアルファなしの6桁なので、半透明ピクセルのHEXをそのまま使うと見た目より濃い色になります。

    画面のどこからでも取れるEyeDropper API

    Chrome・Edge（バージョン95以降）にはEyeDropper APIがあり、ボタンのクリックに応じてブラウザの外の画面からもピクセルを選べます。HTTPSのページで、ユーザーが直接操作したときだけ動作し、カーソルがルーペに変わるので、ページが気づかれずに画面を読むことはできません。MDNではFirefoxとSafariが未対応のため実験的機能とされています。

    このツールはEyeDropperに対応したブラウザで「画面から色を取る」ボタンを表示し、画像の外や他のアプリの画面からも色を取れます。非対応のブラウザ（Firefox・Safari）ではボタンが出ないので、スクリーンショットを撮って読み込んでください。WindowsでHDRを有効にしているとスクリーンショットが白っぽく保存され、取れる色もずれることがあります。

    例

    クリック座標が配列のどこを読むか

    入力
    幅100pxの画像で (x=10, y=5) をクリック
    結果
    data[2040]〜data[2043] = R, G, B, A

    キャンバスのピクセルは1行ずつRGBA 4バイトで並ぶため、インデックスは (5×100+10)×4 = 2040 です。

    取った色をHSLに

    入力
    #3366CC (R51, G102, B204)
    結果
    hsl(220, 60%, 50%)

    0.2, 0.4, 0.8の最大0.8と最小0.2の平均が明度0.5、差0.6を(1−|2×0.5−1|)で割って彩度0.6。青が最大なので色相は((0.2−0.4)/0.6+4)×60 = 220°です。

    半透明ピクセル

    入力
    R0, G0, B0, A128
    結果
    rgba(0, 0, 0, 0.5) / HEX #000000

    128/255=0.502を小数第2位で丸めて0.5。HEXだけを使うと50%の黒が完全な黒になります。

    使い方

    1. 画像をドラッグ＆ドロップするか選択します。
    2. ルーペで位置を合わせ、目的のピクセルをクリックします。
    3. HEX・RGB・HSLから必要な値をコピーします。履歴から以前の色を呼び出せます。

    よくある質問

    デザインデータの色と1〜2ずれます。

    多くはJPEG圧縮かカラープロファイル変換が原因です。1,600pxを超える画像も色は元のピクセルから読むので、縮小表示は原因になりません。元のPNGを使うと差が減ります。

    Webサイト上の色を直接取れませんか？

    Chrome・Edgeでは「画面から色を取る」ボタンで、Webサイトを含む画面のどこからでも取れます。Firefox・Safariではボタンが出ないので、開発者ツールのスポイトかスクリーンショットを使ってください。

    取った色が文字色として十分濃いか知りたい。

    HEXをカラーコントラストチェッカーに入れると、背景とのWCAGコントラスト比を確認できます。

    関連ガイド

    出典

    基準日:

    プライバシーとデータの扱い

    関連ツール

    画像