ブックマークレットで画面上の色を取得する（Eye Dropper APIを利用）

1. はじめに

画面上の特定部分の色情報を取得するブックマークレットを用意しました。

スポイトツールで画面上の特定の色を取得し、その色情報を持った状態で色情報サービスサイト を開きます。

2. ブックマークレット

新たにブックマークを追加し、URLとして以下のコードを登録して利用します。

※ 今のところ、ブラウザは Chrome 限定です。

※ ココナラブログの制限もあり、画像を貼っています。

このコード部分を、見やすくすると以下になります。

以下の処理を実行しています。

(1) Eye Dropper API を利用して、スポイトツールを表示します。

(2) ユーザーが画面上の特定部分を選択したら、その部分の色番号が取得されます。

(3) その色を URL のパスに指定して、HSL Color Picker というサイトを開きます。

3. 利用方法

(1) 予め先程のリンクをブックマークに登録しておきます。

(2) 登録したブックマークを選択します。

(3) スポイトツールが表示されます。

(4) 画面上の「色を知りたい部分」をクリックします。

(5) 取得した色番号をURLのパスに指定して、HSL Color Picker サイトを開こうとします（自動的に）。

ここで、ポップアップがブロックされた場合は、まずアドレスバー上の「ポップアップがブロックされました」の部分をクリックします。

次に、上部にあるリンクをクリックします。

(6) HSL Color Picker サイトが開きます。

指定した部分の色情報が表示されているはずです。

3. おわりに

Chrome 95で Eye Dropper API が使えるようになったため、スポイトツール専用アプリケーションなどを使う必要がなくなりました。

今回は、 HSL Color Picker サイトを利用しましたが、別の色情報サービスサイトを利用することもできます。

---

ラボラジアンでは、Webに関するサービスを出品しております。こちらもよろしくお願い致します。