クリック1発でHEXカラーコードをコピーできる”Slick color picker”が凄いぞ

クリック1発でカラーコードを取得!Click Color Picker#ほぼ週刊ググレカス
このブログ記事は以下のサポーターの皆様にご支援を頂いて書かれています:
Amiさん、Cocoさん、ゴンタ=ミチさん、ナゾの冒険家さん、禰豆子さん、ヒロパンマンさん、ミニヤンさん、わおんさん、ありがとうございます!🎉

Adobe Photoshopなんかでお馴染みの機能がブラウザでも使えますよ!その中でも、クリック1発でHEXカラーコードをクリップボードにコピーできてしまう”Slick color picker”というChrome拡張機能をご紹介します!(中級以上向け)

カラーピッカーとは

Dropper, Medicine, Dose, Drop, Science

「色を(color)選ぶ(pick)やつ(er)」なので、カラーピッカーとよく呼ばれますが、Adobe Photoshopの「スポイトツール」を使ったことありませんか?あれです、あれ。画面上のどこからでも、いま見えている色の情報を取得できる機能のことで、画像処理系のアプリにはよく標準で装備されています。

Chrome拡張機能でWeb上の色を取り込もう

Webの世界では色を16進数(HEX)で表したくなる

まずはじめに、注意です。本稿で紹介するカラーピッカーは、上の見出し(Webの世界では…)を読んでふむふむ、と思える人のための機能です。よく意味が分からない人は、あまり本稿の内容をお楽しみ頂けないかもしれません。

良いカラーピッカーとは

カラーピッカーに多くの機能は求めませんが、

  • 軽快に動作することと、
  • クリップボードにHEXのカラーコードがコピーされるまでの手順が短いこと

上記2点は絶対条件として挙げられるかと思います。今回カラーピッカーの拡張機能を5つぐらい試したのですが、どれもこれもクリックする回数が多すぎてこの2番目の条件をクリアできません。多くの拡張機能は、だいたいこんな感じで面倒なんです:

  1. まず拡張機能のボタンをクリック
  2. カラーピッカーをクリック
  3. お目当ての色をクリック
  4. コピーボタンをクリック
  5. 拡張機能を閉じるボタンをクリック

「あほかー!」と本気で叫びそうになるのをこらえて、そっとアンインストールをすること3〜4回、ついに見つけましたぜ、旦那。

“Slick color picker”の紹介

いいChrome拡張機能を見つけましたよ。もちろん無料です。

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コードがコピーされること

でした。これでますます作業が速くなっちゃいますね!

らいけんを応援する!

筆者のらいけんと申します。もしこの記事を気に入って頂けたら、コーヒーなんかをおごってくださると本当に励みになります! >>らいけんにアマゾンギフト券で投げ銭する(受取人Eメールは laiken.blademan+ggrks@gmail.com です)

らいけんの欲しい物リストをアマゾンで見る

Patreonという仕組みで寄付をすると、らいけんの活動をあなたが直接、応援することができます🎉🎉🎉 あなたのご支援によって、らいけんがもっとスキルアップして新たな知見をブログで還元できるようになります。ありがとうございます!

🔔 ブログ新着記事のお知らせを受け取る

スパムは送りません!
プライバシーポリシー

#ほぼ週刊ググレカスchrome extensions
Sponsored link
laikenをフォローする
ほぼ週刊ググレカス

コメント

Copied title and URL