Adobe Photoshopなんかでお馴染みの機能がブラウザでも使えますよ！その中でも、クリック1発でHEXカラーコードをクリップボードにコピーできてしまう”Slick color picker”というChrome拡張機能をご紹介します！（中級以上向け）
カラーピッカーとは
「色を（color）選ぶ（pick）やつ（er）」なので、カラーピッカーとよく呼ばれますが、Adobe Photoshopの「スポイトツール」を使ったことありませんか？あれです、あれ。画面上のどこからでも、いま見えている色の情報を取得できる機能のことで、画像処理系のアプリにはよく標準で装備されています。
Chrome拡張機能でWeb上の色を取り込もう
Webの世界では色を16進数（HEX）で表したくなる
まずはじめに、注意です。本稿で紹介するカラーピッカーは、上の見出し（Webの世界では…）を読んでふむふむ、と思える人のための機能です。よく意味が分からない人は、あまり本稿の内容をお楽しみ頂けないかもしれません。
良いカラーピッカーとは
カラーピッカーに多くの機能は求めませんが、
- 軽快に動作することと、
- クリップボードにHEXのカラーコードがコピーされるまでの手順が短いこと
上記2点は絶対条件として挙げられるかと思います。今回カラーピッカーの拡張機能を5つぐらい試したのですが、どれもこれもクリックする回数が多すぎてこの2番目の条件をクリアできません。多くの拡張機能は、だいたいこんな感じで面倒なんです：
- まず拡張機能のボタンをクリック
- カラーピッカーをクリック
- お目当ての色をクリック
- コピーボタンをクリック
- 拡張機能を閉じるボタンをクリック
「あほかー！」と本気で叫びそうになるのをこらえて、そっとアンインストールをすること3〜4回、ついに見つけましたぜ、旦那。
“Slick color picker”の紹介
いいChrome拡張機能を見つけましたよ。もちろん無料です。
（2023.03.22追記）Live color pickerはウェブ検索を怪しいサイトにリダイレクトするマルウェアになってしまいました。Googleに報告しましたが、すぐにブラウザから削除することをおすすめします。削除する時にも怪しいサイトにリダイレクトしようとするので、不安な方は下記のツイートでご紹介している手順を踏むようにしてください。
代わりになる便利なChrome拡張機能は調べていませんが、とりあえずChromeストアでフィーチャーされているSmart Color Pickerにリンクを張っておきますね。100万ユーザーもいるので大丈夫かとは思いますが、筆者は未検証です。
Smart Color Picker – Chrome Web Store
（2022.12.19追記）Slick color pickerはChromeストアから消えてしまいました。代わりにLive color pickerをおすすめしておきます。：
Live color picker – Chrome Web Store
Slick color picker – Chrome Web Store
クリックした瞬間に色情報をコピーできる
たった1回だけクリックすればカラーコードがコピーできるものは、筆者が探した限りではこのSlick Color Pickerだけでした。では、具体的な使い方を紹介します。
Slick color pickerの使い方
pinしなくて大丈夫
Chrome拡張機能はたいてい、ブラウザの右上にアイコンを常駐させておいてマウスクリックで起動すると思いますが、拡張機能が増えてくるとアイコンの列が邪魔になってくるんですよね。使いたい機能がどこにあるか探すようになってきたら、もうそれは非効率です。しかしこの拡張機能ではキーボードショートカットが使えるので、その必要もありません。見た目もスッキリ、操作も軽快、家内安全、商売繁盛。
キーボードショートカットの設定
今回ご紹介のSlick Color Pickerではデフォルトで「Alt + P」（MacはOption + P）でカラーピッカーを起動できるようですが、下記のURLをブラウザの新規タブに貼り付けて送信すると、任意のキーボードショートカットを設定することができます。
chrome://extensions/shortcutsそして設定画面がこちら。↓
たくさん拡張機能をインストールしている人は、この画面内のどこかにSlick color pickerの設定項目があるはずです。上図の2つ目のフォーム「Select color」というところで鉛筆アイコンをクリックするとキーボードショートカット入力モードになります。まず灰色のフォームをクリックしてから、任意のショートカットを入力しましょう。
筆者の設定はCtrl + Shift + Cです。（記号で書くと^⇧Cとなります。この記号も慣れれば読めるようになってきます。ひたすら回数をこなせばすぐ覚えますよ）Chromeでウェブを閲覧中に気になる色があったら、Ctrl + Shift + Cと押せばすぐにカラーピッカーを起動できる、ということです。
いざ、カラーコードを取得！
Chrome拡張機能は、Chromeの設定画面やChrome Web Storeでは機能しません。まずは普通のウェブサイト（このブログ記事でも大丈夫です）を表示してから、キーボードショートカットを使ってみましょう。設定が上手くいっていれば、マウスポインターの下に、色を表示する小さな窓が表示されたはずです。それがカラーピッカーが起動した状態です。
その状態で、ブラウザ画面内の色情報を取得したい箇所をクリックします。それだけでHEXカラーコードがコピーされているので、どこかに貼り付けてみましょう。上図の青色であれば「2457b7」か、それに近い数値が取得できていれば成功です。
まとめ
クリック1発でHEXカラーコードをコピーできる”Slick color picker”というChrome拡張機能をご紹介しました。ポイントは、
- キーボードショートカットだけでカラーピッカーを起動できること
- 色をクリックした瞬間にクリップボードにHEXコードがコピーされること
でした。これでますます作業が速くなっちゃいますね！
コメント