Web上のカラーコードが一瞬で調べられる拡張機能ColorPick Eyedropperが超おすすめ


ColorPick Eyedropper使い方

 
「お!この色いいカンジだな~。コードはなんだろ?」

「私のブログのメイン色のカラーコードって何だっけ?」

「この会社HPの配色いいなぁ。私のブログもこんな雰囲気にしたい。」

ご自分のブログをお持ちの方で

こんな事を思ったことある方いませんか?

 

私、しょっちゅう思います。

 

とくにブログ立ち上げて間もないころに

コンテンツを足すときや

ちょっとこの部分にラインを一本入れたい、なんて時に。

 

何も考えずに適当に配色してしまうと

ブログ全体がまとまりのない雰囲気になってしまいますので

素人ながら色の組み合わせや発信するメッセージとの相性などを

考えながら作っています。

 

で、

そんなときに超!が付くほど役立っているのが

『ColorPick Eyedropper』

というGoogle chromeの拡張機能(アドオン)です。

 

気になる色の上にマウスを乗せると

そのカラーコードが表示されるというもの。

 

・HTMLコード

・RGB

・HSL

この3つの値が一瞬で分かります。

 

この拡張機能を知るまでは

自分のブログのカラーコードはメモに書いていましたし

気になる配色を見つけても「素敵だな~♪」と憧れるだけでしたので

本当にめちゃめちゃ助かってます。

 
 

ColorPick Eyedropperのインストールの仕方

 
インストールはこちらからどうぞ。

 

Google chromeをお持ちでない方は

まずはGoogle chromeをインストールしてから

拡張機能を付けてくださいね。

 
 

ColorPick Eyedropperの使い方

 
使い方と言っても

本当に簡単なので特に説明することもないのですが

使ったことのない方のために

イメージをお伝えできればと思います。

 

ColorPick Eyedropperをインストールすると

ブラウザのURL欄の右横に下の赤枠内のマークが出ます。

これをクリックします。

ColorPickEyedropper00

 

知りたい色の上にマウスを乗せます。

ColorPickEyedropper01

マウスが写ってなくて恐縮なのですが

(スクリーンショットするとマウスカーソルが消えてしまう)

Yahoo!トップページの『検索』ボタンの青色のところ(矢印の箇所)

にカーソルを合わせています。

 

この時点で

・HTMLカラーコード

・RGB

・HSL

がそれぞれ表示されています。

 

ここで合わせたカーソルをクリックするとこのようになります。

ColorPickEyedropper02

HTMLカラーコードだけが表示され

しかもコードを既に選んだ状態になっていますので

Ctrl+Cを押すだけでコピーできるわけです。

 

細かいようですが

この「コードを既に選んだ状態」というのがとっても有り難いのです。

コードの文字列を選びにいくというちょっとした手間が

結構面倒だったりするので。

 

ちなみに

この部分はHTMLコードだけでなく

RGBやHSLも表示させることが設定可能です。

もちろん選んだ状態で出てきてくれます。

ColorPickEyedropper03

 
 

設定方法

 
ColorPickEyedropper04

URL欄の右横のマークをクリックし

一番下の設定マークを押します。

 

 

 

 

 

 

 

  

ColorPickEyedropper05

『Show RGB』と『Show HSL』にチェックを入れると

カーソルを乗せた時点で

RGBとHSLの値も表示させます。

(HTMLコードは必ず表示されます。)

 

『Show RGB and HSL on page』にチェックを入れると

カーソルを乗せてクリックした際に

RGB、HSLともに選んだ状態で表示させることができます。

(HTMLコードは必ず表示されます。)

 

最後に『Save Options』を押して完了です。

 

 

  

以上が

Web上のカラーコードが一瞬で調べられる拡張機能

ColorPick Eyedropper

のご紹介でした。

 


コメントを残す

サブコンテンツ

プライバシーポリシー

クレジットカード盗難

このページの先頭へ