カラーピッカーの使い方
- アドレスを入力して「サイトを開く」を押します。ページの読み込みが完了したら戻って「タブをキャプチャ」を押すか、「自動キャプチャ」でサーバーに撮影させます。
- スクリーンショットの上でマウスを動かすと、ルーペにそのピクセルとHEX・RGB・HSLの値が表示されます。
- クリックすると色がパレットに保存され、各コードはワンクリックでコピーできます。
- スクリーンショットやデザインファイルがすでにある場合は、「画像」タブにドロップしてください。ファイルはアップロードされず、ブラウザ内だけで処理されます。
なぜスクリーンショットから色を取得するのですか？
ブラウザのセキュリティ上、あるサイトが別のサイトのピクセルを読み取ることはできません。そのため通常のスポイトでは、リンクしかわからないページの色を取得できません。ページを画像としてキャプチャすれば、グラデーションや写真、ボタンまで、すべてのピクセルの色を読み取れます。
HEX・RGB・HSLの違い
- HEX
- #3B82F6のような6桁のコードで、CSSやほとんどのデザインツールで使われます。
- RGB
- 赤・緑・青をそれぞれ0〜255の数値で表します。例：rgb(59, 130, 246)
- HSL
- 色相（0〜360°）、彩度、明度をパーセントで表します。明るい色や暗い色を作るときに便利です。
よくある質問
無料ですか？
はい。完全無料で、アカウント登録も不要です。
キャプチャできないページがあります。
自動キャプチャでは、ログインが必要なページや自動ブラウザをブロックするページは開けません。その場合は「タブをキャプチャ」をご利用ください。ご自身のブラウザに表示されているとおりにキャプチャされます。
画像はアップロードされますか？
いいえ。「画像」タブで開いたファイルは、すべてブラウザ内で処理されます。
色がCSSの値と少し違うのはなぜですか？
アンチエイリアス、影、画像の圧縮により、境界部分のピクセルの値がわずかに変わることがあります。単色部分の中央を選ぶと最も正確です。