カラーピッカーは、Webページ上のあらゆる要素（テキスト、背景、画像、gradientなど、あらゆる表示pixelを含む）から色を取得できるpixel精度のeyedropperツールです。HEX・RGB・HSLの3形式でカラー値を同時に取得でき、拡大pixelプレビューで正確なターゲット指定が可能です。過去に取得した色はヒストリーストリップに保存され、すぐに再参照できます。
ウェブページから正確な色の値を抽出することはよくある作業です。ブランドカラーに合わせる、デザインを参考にする、競合サイトで使われている色味を確認するといった場面です。ブラウザの DevTools は Styles パネルで色を表示しますが、それは CSS の color プロパティが明示的に指定された要素に限られ、画像やグラデーション、継承された色には対応していません。
Color Picker のスポイト機能はピクセル単位で動作します。その色がどのように生成されたかにかかわらず、カーソルの下にあるピクセルの実際にレンダリングされた色を読み取ります。ヒーロー画像内の青空、グラデーションの中間色、半透明のオーバーレイなどをクリックすれば、正確に合成された色の値を取得できます。HEX、RGB、HSL の3つの形式がすべて同時に表示され、どの形式をクリックしてもコピーできます。直近に取得した色は画面下部のカラー履歴に保存されます。
アルファ(透明度)の情報も出力に保持されます。半透明のオーバーレイを選択すると、スクリーンショットツールで得られるような平坦化された RGB 値ではなく、正しいアルファチャンネルを含む rgba() や hsla() の値が得られます。macOS と Windows では、利用可能な場合はブラウザ標準のスポイト機能を使用でき、ブラウザウィンドウの外を含め、画面上のどこからでも色をサンプリングできます。これは、別のアプリケーションで開いたデザインファイルの色に合わせたいときに便利です。
カーソル周辺の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をクリックするとその色を再表示できます。
