シンプルカラーピッカー

Chrome用の無料カラーピッカー

どのページからでも色を拾って、#E8553Dを取得

シンプルカラーピッカーは、Chrome用の無料のスポイトです。ボタンまたはAlt+Pを押し、拡大ルーペで好きなピクセルに狙いを定めてクリックすると、HEX・RGB・HSLのコードがすでにクリップボードに入っています。直近50色はポップアップに残ります。

Chromeに追加 — 無料

Chrome Web Storeのユーザー 453 人

Edge、Brave、Operaなど、ほかのChromium系ブラウザーでも動作します。

Webページ上のポスターに重なる四角い拡大ルーペが1ピクセルを囲み、そのHEX・RGB・HSLを表示。隣にはシンプルカラーピッカーのポップアップが #E8553D と色の履歴を表示している

ひと目でわかる概要

機能
カラーピッカー（スポイト）：拡大ルーペでWebページ上の任意のピクセルに狙いを定めてクリックすると、そのHEX・RGB・HSLのコードがコピーされます。
対象
ブラウザーで開いた実サイト、モックアップ、スクリーンショットから色を合わせるWeb開発者やデザイナー、色コードが必要なすべての人。
料金
無料。アカウント不要、有料版なし。
データ
履歴と既定の形式は、お使いのデバイスにある拡張機能のローカルストレージに保存されます。分析なし、ネットワーク通信なし。
対応環境
Chrome Web Storeからインストールできる、Chromeなどのパソコン用Chromium系ブラウザー。新しいタブページ、設定、Chrome Web Storeなどのブラウザーページでは使えません。
制限
開始時に取得したスナップショットを使い、タブの表示範囲から色を拾います。CMYK、Pantone、コントラストチェックには非対応で、ブラウザーの外では拾えません。
バージョン
2.7.0、2026年10月23日 更新

3ステップ、1クリック

  1. 1

    ピッカーを起動

    ツールバーのアイコンをクリックして「色を選択」を押すか、どのページでもAlt+Pを押します。

  2. 2

    ルーペで狙う

    四角いルーペがカーソルの周囲を拡大し、正確な1ピクセルを囲みます。その下のチップにHEX・RGB・HSLがリアルタイムで表示されます。

  3. 3

    クリックして貼り付け

    コードが既定の形式でコピーされ、短い通知でお知らせします。CSS、Figma、メッセージにそのまま貼り付けられます。

こんな方に

CSS

フロントエンド開発

DevToolsを開かずに、実サイトから正確な値を取り出して、CSS、SCSS、Tailwindの設定に使えます。

HEX

デザインとブランドの確認

UIやモックアップ、参考画像からパレットを拾い、ページが正しいブランドカラーを使っているか確認できます。

HSL

色の調整

明度と彩度を手で調整するならHSL、数値が必要なコードにはRGBを使えます。

機能

  • ピクセルを囲む

    ルーペはカーソル周囲の11 × 11ピクセルを拡大し、照準が拾う1ピクセルを囲みます。1ピクセルの罫線も、グラデーションの1段階も狙えます。

  • 形式

    HEXは#2A6FDB、RGBはrgb(42, 111, 219)、HSLはhsl(217, 71%, 51%)のような形式です。既定の形式はポップアップで一度選ぶだけです。

  • 履歴の色数

    拾った色は、重複なしで直近50色のグリッドの先頭に入ります。スウォッチをクリックすると3つのコードを確認してコピーできます。

  • Alt+Pショートカット

    ポップアップを開かずに色の取得を開始できます。別のキーにしたい場合は、ポップアップのキーアイコンからChromeのショートカット設定を開けます。

  • ネットワーク通信

    すべてブラウザー内で動作します。アカウント不要、分析なし、テレメトリなし。

  • ライトとダーク

    ポップアップとルーペはシステムのテーマに従い、判断する色に色味が付かないニュートラルなグレーを使っています。

Webページ上のあらゆる色のコードを取得する方法

Chrome標準のスポイトはDevToolsの中にあります。「スタイル」パネルを開き、色のプロパティを探し、そのスウォッチをクリックしてからスポイトを選びます。使えますが、奥まった場所にあり、拾った値はクリップボードではなく、ページのCSSのそのプロパティを置き換えてしまいます。

シンプルカラーピッカーは、スポイトを1クリックまたは1ショートカットの距離に置きます。開始するとタブの表示範囲のスナップショットを取得し、その上に四角いルーペを開くので、平均ではなく正確な1ピクセルが見えます。1クリックでコードをコピーし、ポップアップは直近50色とともに3つの形式すべてで保存します。

開始する前に、必要な部分までページをスクロールしてください。ルーペはそのスナップショットから読み取ります。新しいタブページ、設定、Chrome Web Storeなどのブラウザーページは、すべての拡張機能に対して閉じられています。

設計段階からプライベート

  • ネットワーク通信なし

    拡張機能はサーバーと一切通信しません。分析もテレメトリもありません。

  • デバイスの中だけ

    履歴と既定の形式は、拡張機能のローカルストレージに保存されます。

  • 4つの権限

    現在のタブ（色の取得を開始したときだけ）でスナップショットを取得、scriptingでルーペを表示、storageで履歴と形式を保存、クリップボード書き込みでコードをコピーします。

DevToolsのスポイトとシンプルカラーピッカーの比較

DevToolsのスポイトとシンプルカラーピッカーの比較DevToolsのスポイトシンプルカラーピッカー
開始方法DevToolsを開き、「スタイル」で色を探し、スウォッチをクリックしてスポイトを選ぶツールバーのボタンまたはAlt+P
結果の行き先開いたCSSプロパティ。コピーは自分で行うクリックでクリップボードへ
色の形式HEX、RGB、HSLなどHEX、RGB、HSL
以前に拾った色保存されない直近50色。いつでももう一度コピー可能
料金Chromeに内蔵無料

よくある質問

Webサイトから色コードを取得するには？

シンプルカラーピッカーをインストールし、ページでAlt+Pを押し、ルーペを色に合わせてクリックします。HEXコード（RGBやHSLも選べます）がクリップボードにコピーされます。

Webページ上の画像から色を拾うには？

同じ方法です。ピッカーを起動し、画像内の拾いたいピクセルをクリックします。ルーペで拡大されるので、正確な1ピクセルを拾えます。

HEXではなくHSLやRGBをコピーできますか？

できます。ポップアップで既定の形式（HEX、RGB、HSL）を選びます。ポップアップには履歴の各色の3つの形式も表示され、それぞれにコピーボタンがあります。

以前に拾った色はどこで見られますか？

ポップアップを開くと、直近50色が新しい順にスウォッチで並んでいます。クリックするとコードを確認してコピーできます。履歴を消去することもできます。

Alt+Pのショートカットを変更するには？

ポップアップのショートカットキーアイコンをクリックします。Chromeのキーボードショートカットのページが開き、別のキーを設定できます。

一部のページで動かないのはなぜですか？

Chromeは、新しいタブページ、設定、Chrome Web Storeなどの自社ページを、すべての拡張機能に対して閉じています。また、ピッカーはタブの表示範囲だけを読み取るため、先に色の位置までスクロールしてください。

ブラウザーの外の色も拾えますか？

いいえ。現在のブラウザータブからのみ拾えます。CMYKやPantoneへの変換、コントラストのチェックにも対応していません。

無料ですか？ データは収集されますか？

無料で、ネットワーク通信は行いません。履歴と既定の形式はお使いのデバイスに残ります。

PYROCTALのその他の無料拡張機能

狙って、クリックして、貼り付け。

Chromeに追加 — 無料