画像カラーピッカー — あらゆる画像から色を抽出
あらゆる画像から色を抽出。HEX、RGB、HSLを取得。配色を作成。
Drop your image here
Click anywhere on the image to pick a color
画像から色を抽出することは、デザインや開発において最も一般的な作業の一つです。ヒーローショットからブランドパレットを構築する場合でも、CSS のためのグラデーションをサンプリングする場合でも、見たものの正確な色味が単に気になる場合でも、本ツールはあらゆるピクセルの HEX、RGB、HSL の値を提供します — アップロード不要、アカウント不要、制限なしです。
使い方
画像をドロップする
PNG、JPG、WebP ファイルをドロップゾーンにドラッグします。画像はローカルで読み取られ、デバイスから一切外部に送信されません。
クリックして色を抽出する
画像プレビュー上の任意の点をクリックします。そのピクセルの色が即座に取得され、HEX、RGB、HSL の値として表示されます。
配色を作成する
クリックを続けて色を追加できます。プレビュー下で配色を確認し、不要なスウォッチを削除したり、配色全体を JSON としてエクスポートしたりできます。
よくある質問
画像はどこかにアップロードされますか？
いいえ、すべての処理は HTML5 Canvas API によってブラウザ内で行われます。画像がサーバーに送信されることはありません。
どのカラーフォーマットに対応していますか？
各抽出で3つの形式を返します：HEX（例 #3B82F6）、RGB（例 59, 130, 246）、HSL（例 217°, 91%, 60%）。
個々のカラー値をコピーできますか？
はい、現在の選択は HEX 値の隣にコピーボタンを表示します。それをクリックすると、その色がクリップボードにコピーされます。
「Export JSON」は何をしますか？
配色全体を JSON 配列としてクリップボードにコピーします — 各エントリには hex、rgb、hsl のキーが含まれます。任意のエディタやデザインツールに貼り付けできます。
カラーピッカーの精度はどのくらいですか？
CanvasRenderingContext2D.getImageData() を介してソース画像の正確なピクセル値を読み取ります。補間や近似は一切ありません。
制限事項
- ズーム・パン機能なし画像プレビューは利用可能な幅に合わせてスケーリングされます。ズームコントロールはありません；細部から色を抽出するには、より大きなソース画像を使用する必要がある場合があります。
- ピクセル単位の精度のみ色は正確に1ピクセルからのみサンプリングされます。領域平均や範囲サンプリングモードはありません。
- スウォッチファイルとしてのエクスポート不可クリップボードへの JSON エクスポートのみ対応します。v1 では ASE、ACO、GPL のスウォッチファイルはサポートされていません。
プラットフォーム別の注意点
- macOS
- もちろん動作します。デジタルカラーメーターです。
- Windows
- Edge、Chrome、Firefox で動作します。アップロードなし、肥大化なし — ドラッグして抽出するだけです。
- Linux
- CLI の代替：ImageMagick の `convert input.png -crop 1x1+<x>+<y> txt:-` で単一ピクセルを抽出できますが、HSL はそのままでは提供されません。
- Web
- 完全にクライアントサイドで動作します。ファイルがアップロードされることはありません。任意のモダンブラウザで開けば、すぐに色の抽出を開始できます。