スポイト カラーピッカー

使い方

1. 画面から取得 をクリック。カーソルが拡大鏡に変わるので、任意のピクセルをクリックしてサンプリングします。
2. あるいは ネイティブピッカー ボタンでブラウザ組み込みのカラーダイアログを利用できます（全ブラウザで動作）。
3. HEX、RGB、HSL フィールドは同期して更新されます。いずれかのフィールドを編集すると他の 2 つが再計算されます。
4. 各フォーマットの横にある コピー をクリックするとクリップボードに送られます。
5. 直近 8 件のサンプルカラーは 最近のカラー ストリップに残ります — スウォッチをクリックすると再ロードできます。

60 秒でわかる EyeDropper API

EyeDropper はブラウザネイティブの Web API で、ページがユーザー画面上の任意の場所からピクセルをサンプリングできます。ページが new EyeDropper().open() を呼ぶと、ブラウザはシステムレベルの拡大鏡を開き、クリック時に Promise が、選択した色を保持する sRGBHex プロパティを持つオブジェクトで resolve します。

この API はプライバシー安全です：ページはピクセルデータを取得できず、選択された 1 色だけが返されます。サンプリングは必ずユーザーのクリックで開始する必要があり、ヘッドレスやスクリプトによる取得はできません。

どのモードを使うか

• 画面から取得 — カラーが別のアプリ、スクリーンショット、動画フレームにある場合。
• ネイティブピッカー — 新しいカラーを作成したり、おなじみの HSV ホイールを使いたい場合。
• フィールドに入力 — 正確な値（デザイン仕様など）があり、別フォーマットへ変換したい場合。