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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Firefox

Firefox の 強化型トラッキング防止機能

目次1. Firefox の強化型トラッキング防止機能2. 用語トラッカー (Trackers)ソーシャルメディアトラッカートラッキングコンテンツサードパーティのクッキー クロスサイトのトラッキングク …

Web Components

たくさんの Web Components を利用するページを改善する

たくさんの Web Components を利用するページを改善する方法について説明します。

Google

Google マップの地図をウェブページに埋め込む手順

Google マップの地図を、ウェブページに埋め込む手順について説明します。 手順自体は簡単なのですが、Google マップの仕様が時々変わり、操作手順もその影響を受けることがあるため、現時点(201 …

Web

Amazon, Alc, Weblio などを開いたら検索フィールドがフォーカスされるようにする

Amazon, Alc, Weblio などを開いたら検索フィールドがフォーカスされるようにする方法を紹介します。

Web

Webページの見出しレベルが分かりづらいときないですか?

Webページの見出しレベルが分かりづらい問題を解決します。