ColorPick EyedropperとJust Color Pickerの使い方

ブログとかやってると、たまーにこんな時があります。

「この色を使いたいんだけど、CSSでどう指定すればいいの?」

こうなると気になって夜も眠れない。そんなときに手助けしてくれるのがカラーピッカーです。今回は、

  1. 素人には必要十分な機能がある
  2. 誰にでも簡単に使える

といった条件で、僕が「これはオススメできる」と感じたカラーピッカーを2つご紹介したいと思います。

Webブラウザで使うなら「ColorPick Eyedropper」、ダウンロードソフトをお探しなら「Just Color Picker」をご覧ください。

スポンサーリンク

ColorPick Eyedropper

まずは「ColorPick Eyedropper」。Google ChromeやFirefoxで使える拡張機能です。Webページのカラーコードを取得したい場合、ブラウザから簡単に起動できるのでオススメ。

Chrome版はこちらからダウンロードできます。

ColorPick Eyedropper
A zoomed eyedropper & color chooser tool that allows you to select color values from webpages and more.

Firefox版はこちら。

Colorpick Eyedropper – 🦊 Firefox (ja) 向け拡張機能を入手
Firefox 向け Colorpick Eyedropper をダウンロード。A simple eye-dropper & color-picker tool allowing you to select color values from webpages. You will need to enable...

今回はChromeを使って、その使用感をお伝えしていきます。

基本的な使い方

インストールを完了すると、拡張機能アイコンが現れます。

使い方はいたって簡単。このアイコンをクリックしましょう。すると、

カラーを抽出するウインドウが表示されました。そのままマウスを移動してみます。

マウスカーソルが十字に変形し、その中心のカラーがウインドウに表示されます。

カラーを取得したい場所でクリックしてみると、

こんな風にカラーコードが選択された状態のテキストが出てきます。これをそのままコピペすればOK。非常に簡単。終了するにはEscを押すだけです。

設定項目

次に設定を見ていきます。拡張機能アイコンを右クリック→「オプション」でオプション画面を開きましょう。

日本語がカタコトですが、今回見ていくのは枠が付いている3つの設定項目です。

①の設定

①のチェックボックスではhex、RGB、HSLのどれを表示するかを選択できます。デフォルトではhexのみにチェックが入っていますが、これを全て選択しているとどうなるか見てみましょう。

先ほどと同じように拡張機能アイコンをクリックしてみると、

デフォルトではこのウインドウにはhexのみが表示されていましたが、今回はその下にRGBとHSLが表示されています。

ちなみに

  • hexは16進数という意味。Red,Green,Blueをそれぞれ2桁の16進数で表したもの(CSSで指定する際の記述)
  • RGBはhexを10進法で表したもの
  • HSLは色を色相(Hue)、彩度(Saturation)、輝度(Lightness)で表したもの

②の設定

続いて②です。ここにはデフォルトでチェックが付いています。チェックが付いていると、実際にカラーを取得する際、hexだけでなくRGBやHSLの値も表示します。

表示する項目は①で設定したものがそのまま選択されます。

③の設定

最後に③です。「Attempt to auto copy value to clipboard」とあります。ほぼ直訳ですが、「取得したカラーコードをクリップボードに自動的にコピーする(ことを試みる)」となります。

例えばhexadecimalにすれば、カラーを調べたい場所でクリックしたと同時に、hexの値がクリップボードに自動的にコピーされます。これによってカラーコード取得の流れは、

  1. 機能拡張アイコンをクリックして起動
  2. 取得したいカラーの場所でクリック
  3. 取得したカラーコードをどこかにペースト

といった3ステップで完了します。コピーする手間すら無いので、非常に操作がシンプルです。

Just Color Picker

こちらは通常のソフトウェア。インストールは不要でWindows/Mac両方に対応しています。こちらのページからダウンロード。

Just Color Picker 5.4 - best free colour tool for Windows and macOS
Free portable colour picker and colour editor for webmasters, photographers, graphic designers and digital artists. Works on Mac and Windows PC, 32 and 64 bit.

ページ内の「Download」をクリックするか下にスクロールすると、このような画面になります。

Windows用は3種類あります。インストール不要なソフトなので正直どれを選んでも大差ありませんが、OSのビット数に合わせてダウンロードしましょう。通常は64bitでOKです。

exeファイルの場合はそのまま、zipファイルの場合は解凍してからexeファイルをダブルクリックして起動します。

基本的な使い方

起動直後の画面がこちら。

まずは「ホットキー: Alt+X」を確認しましょう。このホットキーを押すことで、選択中のカラーコードを取得できます。クリックではないので注意です。

それでは、試しにデスクトップのカラーを取得してみます。アプリが起動した状態でマウスを動かすと、

こんな感じでアプリウインドウに情報が表示されます。カラーコードを取得したい場所で、先ほど確認したホットキーAlt+Xを押しましょう。

するとマウスで選択中のカラーコードが、アプリウインドウ右上に保存されます。その値をコピーするのであれば「値をコピー」ボタンを押しましょう。

基本的な操作方法の流れはこんな感じです。

  1. アプリを起動する
  2. マウスを動かして、カラーコードを取得したい場所へ移動
  3. ホットキーを押してカラーを保存
  4. 値をクリップボードにコピー

こちらも基本操作はシンプルです。

Just Color Pickerの便利な機能

① 取得するカラーコードのモードを切り替える

それではこのアプリの他の機能を見ていきましょう。

アプリウインドウ左には「HTML」と表示されたプルダウンメニューがあります。ここをクリックすると、

取得するカラーコードが切り替えられます。しかし多い…CMYKにも対応しているのは使う人にとっては嬉しいポイントですが、個人的にはこんなに使いません(笑)

htmlやCSSで使用するのであれば一番上の「HTML」でOKです。この中にある「HEX」は先ほどの「hex」とはまた別。16進数の数値が得られるモードになるので、混同しないように気を付けましょう。

② スライドバーで色調整

次はウインドウ真ん中の部分に注目してみます。

まずは1ヶ所カラーコードを取得しましょう。そうすると、

取得したカラーがこちらにも表示され、さらにスライドバーで調節することができます。

ここで自分好みに調整したカラーは左上の小窓にも反映されるので、

小窓にカーソルを合わせてホットキーを押すと、そのカラーを右上に保存することが可能です。

③グラデーションとカラースキーム・ジェネレータ

最後にウインドウ下部を見ていきます。

帯状のカラーが2本並んでいます。上が「グラデーション」、下が「カラースキーム・ジェネレータ」です。まずグラデーションから見ていきましょう。

といっても非常に簡単です。ここに表示されているのは、

  • 右端に前回取得したカラー
  • 左端に新しく取得したカラー

が配置されたグラデーションになっています。

もちろんこの帯にカーソルを持っていけばカラーを取得できるので、「2色の中間の色が欲しい」などの場面で非常に便利に使える機能です。

そして一番下の帯、カラースキーム・ジェネレータですが、まずカラースキームとは何でしょう?

色彩計画。色のもつ心理的・生理的・物理的な性質を利用して、まとまりのある雰囲気を作るなど、目的に合った配色を行うための設計。建築・インテリアやウェブデザインなどでいう。

(コトバンクより引用)

つまりすごく簡単に言えば、その色に合う色がここに表示されるわけです。

新しく取得したカラーには印が付けられています。

これを基準に、例えば「自分のサイトのベースカラーに合う別系統のカラー」を探し出すなど、色々と活用できるはず。実際僕もこのソフトを使って色々とサイトの配色を試しています。ぜひお試しあれ。

タイトルとURLをコピーしました