カラー情報を取得するフリーツール

sponsored link

Web上で「この色いいなー」と思った時に、簡単にその色のコードを取得できるツールです。

これがあれば、わざわざ「スクリーンショットを取って画像編集ソフトのスポイトツールで色を取得して・・・」などとめんどうなことはする必要はありません。

フリーソフトと、ブラウザのアドオン2種類を紹介します。

フリーソフト【ColorClip】

古いソフトですがWin7でも問題なく使えます。

インストール

カラー情報取得プログラム「ColorClip」

Vectorはサイトが込み入っててわかり難いのですが、下のほうの緑の「ダウンロードページへ」からダウンロードできます。

インストールは簡単で、ダウンロード後にフォルダを解凍、中のexeファイルをクリックするだけですぐに起動できます。

フォルダは普段プログラムをインストールしている任意の場所に置き、exeファイルのショートカットを作るなり、タスクバーに表示させておくなりしておくのがよいと思います。

使い方

color_clip_1

ソフトを起動するとスポイトが出てくるので、それをマウスで取得したい色がある場所に持って行くだけで色を取得できます。

カラーテーブルを閉じてしまった時は、スポイトをダブルクリックするか、右クリックでメニューが出ますので、そこから出すことができます。

アプリを終了する時も右クリックのメニューから終了できます。

color_clip_2

カラー情報は5つまで保存でき、MAXになってしまった場合は項目をダブルクリックで消せます。

後は、取得した色を「コピー」でコピーできますので、CSSなど色情報が必要なところへ貼り付けて使用します。

補足

このソフトは取得した色「背景」だけでなく、パレットに表示される文字色がそれに対する補色となり、その「文字色」も取得することができるの点が便利です。

サイト作成で色の組み合わせに迷うことがありますが、色を引き立たせる補色をそのまま利用することができます。

また、Web以外にデスクトップにある画像などの色もスポイトで選択して色を取得できます。

後述するアドオンの方が高機能なのですが、こちらのフリーソフトは「意外」な使い方ができます。

アドオン【ColorZilla】

「FireFox」と「Google Chrome」のアドオンです。

インストール

ColorZilla firefox
ColorZilla chrome

上記のサイトからそれぞれ使用しているブラウザのアドオンをインストールします。

使い方

FireFoxでの説明になります。

coziila_1

インストール後、ブラウザのナビゲーションツールバーからColorZillaが使えるようになっています。

ナビゲーションツールバーが表示されていない場合は、ブラウザのタブがある横のほうで右クリック⇒【ナビゲーションバー】にチェックを入れます。

coziila_2

ブラウザの画面右クリックで表示されるメニューにもColorZillaが追加されているので、ここからでも使えます。

スポイト

coziila_3

ColorZillaのメニューから【スポイト】を選択し、調べたい色のところをまでマウスを持っていくと、該当箇所の色情報を取得することができます。

そのまま左クリックをすると、コードをコピーできます。クリックだけでコピーできるのですが、慣れるまでは逆にあっさりしすぎに感じるかもしれません。

終了したい時はカラーバー右の方にある「×」で閉じることができます。

WebPage DOM Color Analyzer

coziila_4

ColorZillaメニュに【WebPage DOM Color Analyzer】という項目があります。

これは、クリックするとその表示しているページ内で使われている色を一覧で表示してくれます。さらに、色をクリックするとその色を使用している箇所を枠線で囲んで教えてくれます。

あとがき

どちらもスポイトツールのほかに、基本的なカラーパレッドなども付属しています。

FirefoxかChromeを使っているのなら、アドオンのほうがわざわざソフトを起動することなく使えるので便利かもしれません。こちらのほうが本格的です。

余計なアドオンは入れたくない場合や、他のブラウザを使用している場合はフリーソフトのほうもシンプルで非常に使い勝手がよいです。

sponsored link

コメントを残す

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