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

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

関連記事

CSS

CSS の基礎

目次1. CSS とは?2. CSS のバージョン(分類)Cascading Style Sheets, level 1Cascading Style Sheets, level 2 (CSS2)Ca …

Web

Webフォントを使う場合に font-display 記述子を使ってすぐにテキストを表示させる

目次1. Webフォントの読み込みと font-display 記述子(概要)2. font-display 記述子を使ってテキストをすぐに表示させる方法3. font-display 記述子の詳しい …

Web

Screen Wake Lock API を使って、ディスプレイをスリープさせないWebページを作る

Screen Wake Lock API を使ったサンプルページを作りました。

Chrome

Chrome のローカルオーバーライド機能を使ってWebサイトのファイルをローカルのファイルに置き換える

目次1. Chrome のローカルオーバーライド機能とは?2. 使い方1. この機能で使用するローカル側のフォルダーを指定します2. 置き換えるファイルを指定します3. ファイルを編集します3. Ov …

Chrome

Chrome で拡張機能を使わずにスクリーンショットを撮る方法

Chrome で拡張機能を使わずにスクリーンショットを撮る方法について説明します。