Chrome Canaryのデベロッパーツールに直感的にCSSの色を変更して確認できるカラーピッカーが搭載されてた

CSS3のbox-shadowやtext-shadow、backgroundにグラデーションを指定した際など、一回では思ったような色がつかず、
微調整を行うことがあります。

これまでは、FirebugのプラグインであるFirepickerというツールを利用して、色を調整していたのですが、同様のものがCataryでも標準搭載されたようなので、紹介しておきます。

Google Chrome Canaryとは、Firefoxで言うNightly、ベータ版、開発版
よりも更に早い段階で新しい機能が試せるバージョンです。
→Chrome Release Channels

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

使い方

目的のページを開いて右クリック→要素の検証
またはメニューより表示→開発/管理→デベロッパーツール
を選択することでパネルが開きます。

Stylesに適応されているCSSが記載されています。
色を変更するとElementsタブで選択されている要素のCSSがリアルタイムで変更されます。
この時に値の左側にある色のプレビュー部分をクリックします。

おおお!!
カラーピッカーが表示されました!!
alphaのスライダをいじってを変更することでrgbaの値がセットされます。

これでこういった某サイトのソーシャルボタンの下地も

こんなダークな感じに変えるといった作業がささっと済むようになりますね。

他にもこれまでは入力候補が一覧で表示されるようになっていたり、 Chromeだけでできることがどんどん増えていますね。
今回の機能はCanary版での機能でしたが、安定版に実装されるのもそう遠くないのではないかと思います。