Web

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

投稿日:

1. はじめに

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

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

この丸いのがスポイトツールです。

2. ブックマークレット

以下のリンクをブックマークに登録して利用します。

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

※ このリンクをクリックすることでも、Color Picker が実行されます。

このリンクでは、以下の JavaScript コードが記述されています。

(new Promise(function(resolve){
  resolve((new EyeDropper()).open())
})).then(function(result){
  window.open('https://hslpicker.com/' + result.sRGBHex, '_blank', 'noreferrer')
})

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

  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

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

Web

cron-job.org を利用して特定のURLに定期的にアクセスさせる

cron-job.org というサービスの利用手順について説明します。

Web

Service Worker を使ってオフラインでも閲覧できるウェブページを作る方法

Service Worker を使ってオフラインでも閲覧できるウェブページを作る方法について説明します。

Web

.htaccess ファイルにはWebアクセスできないようになっている

.htaccess ファイルにはWebアクセスできないようになっているという話です。

Web

閲覧しているウェブページで利用されている HTTP のバージョンを確認する方法

ウェブブラウザで ウェブサイトを閲覧している際、HTTP のどのバージョンが使われているのか確かめる方法を紹介します。 目次Chrome の場合FirefoxEdge Chrome の場合 (1) ウ …

HTML

HTML におけるコメントの書き方

HTML におけるコメントの書き方について説明します。 目次1. コメントとは?2. HTML におけるコメントの記述テキストの制限3. 仕様書 1. コメントとは? まず、「コメント」というのは、「 …