Chrome・Edge・Firefox用のスポイト拡張機能
ウェブページのどこからでも色を取得したり、カラーコードを貼り付けたりして、HEX・RGB・HSL・OKLCHとしてワンクリックでコピーできます。サイト全体の配色パレットを抽出し、CSS、Tailwind、デザイントークンとして書き出せます。
無料、アカウント不要、オフラインでも動作。
できること
- スポイト
- ページ上の好きなピクセルの色を取得し、選んだ形式ですぐにコピーします。
- どんな色も読み取り
- HEX、rgb()、hsl()、oklch()、sky-500のようなTailwindクラス、SwiftやFlutterのコード、「紺色」のような色名を貼り付けられます。
- すべての形式で出力
- HEX、RGB、HSL、OKLCHを並べて表示し、それぞれワンクリックでコピー。選んだ形式が既定になります。
- サイトの配色パレット
- 開いているページの色とCSS変数を集め、ほぼ同じ色をまとめ、よく使われている色から並べます。
- 書き出し
- ページのパレットをCSS変数、Tailwindの@themeブロック、SCSS、JSON、デザイントークン、SVGとしてコピーします。
- 履歴
- 最近の色は拡張機能のウィンドウに表示されます。保存先はこのブラウザだけです。
権限
この拡張機能が求める権限は4つだけで、すべてのサイトへのアクセスは求めません。どの権限も役割はひとつです。
activeTab- 開いているタブへのアクセス。拡張機能のアイコンをクリックするか、ショートカットを押したときだけです。
scripting- パレットを求めたときや色を取得するときに、そのページの色を読み取る小さなスクリプトを実行します。
storage- 最近の色と好みの形式をこのブラウザに保存します。
clipboardWrite- 求めた色やコードをコピーします。
求めない権限
すべてのサイトへのアクセス · 閲覧履歴やタブの一覧 · アクセス解析、広告、トラッキング · インターネットから読み込むコード
キーボードショートカット
どのページでもAlt+Shift+Pを押せば、ウィンドウを開かずに色を取得できます。ショートカットはブラウザの拡張機能の設定で変更できます。
よくある質問
PickShade拡張機能は無料ですか?
はい。スポイト、すべての形式、ページのパレット、書き出し、履歴はすべて無料で、アカウントも広告もありません。
読み取れないページがあるのはなぜですか?
ブラウザは、設定画面や新しいタブ、拡張機能ストアなど自身のページをどの拡張機能にも読ませません。こうしたページでも貼り付けた色の変換はでき、ChromeとEdgeではスポイトも使えます。
拡張機能は色をどこかに送信しますか?
いいえ。色はpickshade.comと同じCSS Color 4の計算式で拡張機能の中で求めます。サーバーには何も送られず、履歴はブラウザ内に残ります。
Firefoxではスポイトはどう動きますか?
Firefoxには拡張機能用の組み込みスポイトがないため、PickShadeは表示中の部分を撮影し、ルーペを表示します。ピクセルをクリックするか、矢印キーでルーペを動かしてEnterを押してください。