ツール

カラーピッカー

カラー抽出

画像を選択またはドラッグ&ドロップ

PNG, JPG, WebP, SVG (最大20MB)

画像カラーピッカー&パレット抽出ツール:HEX・RGB・HSL色コード取得

ImageProBoxの画像カラーピッカー(Image Color Picker)を使えば、あらゆる画像から正確なカラーコードを抽出し、調和のとれたカラーパレットを自動生成できます。Web制作者、グラフィックデザイナー、UI設計者向けに、1ピクセル単位で色を確認できる拡大鏡(ルーペ)機能を搭載しています。

HEX、RGB、HSL、HSV、CMYK形式のカラー値を瞬時に表示し、ワンクリックでコピー可能。さらに画像内の主要カラーパレットを自動抽出し、CSS変数やJSONとして出力できます。

主なメリット

  • 高精度ピクセル拡大鏡: カーソル位置を拡大表示し、狙った1ピクセルの色を正確に取得。
  • 豊富なカラーコード形式: HEX、RGB、HSL、HSV/HSB、CMYKへリアルタイム変換。
  • 主要カラーパレット自動抽出: アップロードされた画像から代表的な最大8色を自動抽出。
  • ワンクリック出力: 個別の色コードだけでなく、CSS変数(--color-1)やJSON配列も即コピー。
  • 100%ブラウザ内ローカル処理: 画像の解析はすべて端末内のブラウザで行われ、サーバーには送信されません。

使い方

  1. 画像をアップロード: 写真、ロゴ、UIデザイン画像をカラーピッカーに読み込みます。
  2. ピクセルを選択: 拡大鏡で色を確認しながら、画像上の任意の場所をクリックまたはタップします。
  3. カラーコードをコピー: HEX、RGB、HSL、HSV、CMYKのボックスをクリックして値をコピーします。
  4. パレットを出力: 自動抽出されたドミナントカラーをCSS変数またはJSON形式でコピーします。

よくある質問

画像から特定の色のHEXコードを調べるにはどうすればよいですか?

画像をアップロードして調べたい箇所をクリックまたはタップするだけで、HEX、RGB、HSLなどのカラーコードが即座に表示され、クリップボードにコピーされます。

色を抽出するために画像が外部サーバーに送信されますか?

いいえ。ピクセルの読み取りとパレット抽出はすべてお使いのブラウザのメモリ内でローカルに処理されます。

ブラウザ内ローカル画像処理

このツールはお使いのブラウザのメモリ内でHTML5 CanvasまたはWebAssemblyを使用してローカルに画像を処理します。画像処理のためにImageProBoxサーバーへアップロードされることはありません。