カラーピッカーは、Webページ上のあらゆる要素（テキスト、背景、画像、gradientなど、あらゆる表示pixelを含む）から色を取得できるpixel精度のeyedropperツールです。HEX・RGB・HSLの3形式でカラー値を同時に取得でき、拡大pixelプレビューで正確なターゲット指定が可能です。過去に取得した色はヒストリーストリップに保存され、すぐに再参照できます。
Webページから正確なカラー値を取得することは、ブランドカラーの照合やデザインの参照、競合サイトで使われている色調の確認など、よくある作業です。ブラウザのDevToolsはStylesパネルに色を表示しますが、明示的なCSS colorプロパティを持つ要素のみが対象で、画像・gradient・継承された色は対象外です。カラーピッカーのeyedropperはpixelレベルで動作し、その色がどのように設定されたかに関わらず、カーソル下のpixelの実際の描画色を読み取ります。ヒーロー画像の青空、gradientの中間点、半透明オーバーレイをクリックすれば、合成後の正確なカラー値が得られます。拡大プレビュー円は周囲のpixelを拡大表示し、狙ったpixelを正確に指定できます。HEX・RGB・HSLの3形式が同時に表示され、いずれかをクリックするとコピーできます。直近のピック履歴はカラーヒストリーストリップに保存されるため、以前に取得した色に簡単に戻ることができます。
カーソル周辺のpixelを拡大した円形プレビューを表示し、クロスヘアで正確なpixelを指定できます。テキスト、背景、画像、gradient、SVG、ページ上のあらゆる表示pixelから色を取得できます。
取得した色はHEX（#7c3aed）、RGB（rgb(124, 58, 237)）、HSL（hsl(262, 83%, 58%)）の3形式で同時に表示されます。切り替えや変換は不要で、すべての形式がすぐに利用できます。
HEX・RGB・HSLいずれかの行をクリックすると、その値をクリップボードに即座にコピーできます。「Copied!」というアニメーションで操作が確認できます。CSSやデザインツール、カラー仕様書にそのまま貼り付けられます。
最近取得した色がcolor swatchのビジュアルヒストリーストリップに保存されます。swatchをクリックすると、その色が再選択されて値が再表示されます。ヒストリーはセッション中に保持されるため、複数ページにわたって色を取得できます。
取得した色は形式値の上に大きなswatchとして表示され、色の確認が容易です。swatchは小さなサイズでは同一に見えるような微妙な色調の違いも識別できるほど十分な大きさです。
あらゆる表示pixelから色を取得できます：CSS color、CSS gradient、画像（PNG・JPG・SVG）、canvas要素、動画フレーム、半透明オーバーレイ（合成後の色を取得）、iframeにも対応。見えるものはすべて取得可能です。
企業のWebサイトから正確なブランドカラーを取得し、デザインやコンテンツが正しい色調を使用していることを確認します。目測やブランドガイドラインの検索に頼らず、正確なHEX値を取得できます。
ヒーロー画像、商品写真、イラストから直接色を取得できます。写真のドミナントカラーを抽出して、デザインの補完的な背景色として活用できます。
デザイン仕様ではボタンが#7c3aedであるべきとします。実装済みのボタンから色を取得して一致を確認します。裸眼では見えないわずかな色の違いも検出できます。
デザインインスピレーションサイトを閲覧して気になる色を取得します。ヒストリーストリップにセッション中に取得した色のパレットが蓄積されていき、自分のカラースキームの出発点として活用できます。
CSS gradientに沿った異なる位置で色を取得し、各位置の正確な色を確認します。gradientの再現やgradientのstopがどのようにブレンドされるかの把握に役立ちます。
DevSuite Proのフローティングドックを開き、カラーピッカーアイコンをクリックします。カーソルが拡大プレビュー円付きのeyedropperに変わります。
ページ上でカーソルを動かします。拡大プレビューにカーソル周辺のpixelが拡大表示され、クロスヘアで正確なターゲットpixelが示されます。
ページ上の任意の場所をクリックして、そのpixelの色を取得します。color swatch・HEX・RGB・HSLの各値が即座に更新されます。
HEX・RGB・HSLいずれかの行をクリックして、その値をクリップボードにコピーします。「Copied!」の確認表示が一瞬表示されます。
引き続きクリックして色を取得します。取得した色はヒストリーストリップに追加されます。ヒストリーのswatchをクリックするとその色を再表示できます。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。
