画像から色を取得

ローカル画像から正確なピクセル色を取得し、一般的なカラー形式で確認できます。ブラウザ上でパレットの作成、比較、コピー、書き出しが可能です。

画像を選択

ローカルの画像ファイルを選ぶか、ここにドロップするか、クリップボードから貼り付けてください。

画像をここにドロップ 25 MB、2,400 万画素までの PNG、JPEG、WebP、GIF、BMP、AVIF。

色を取得

画像をクリックまたはタップしてピクセルを選択します。選択後は矢印キーで元画像の 1 ピクセル、Shift と矢印キーで 10 ピクセル移動できます。

画像を選択、ドロップ、または貼り付けて開始してください。

画像の主要色

表示されている画像ピクセルの範囲を限定したサンプルから、コンパクトなパレットを抽出します。

画像パレットはまだ抽出されていません。

保存済みパレット

この画像を確認している間も、別の画像を読み込んだ後も、保存した色を利用できます。

選択、抽出、または関連色を保存してパレットを作成してください。

このツールの機能

画像カラーピッカーは、端末から選択、ページにドロップ、またはクリップボードから貼り付けたラスター画像の任意の元ピクセルから RGBA 値を読み取ります。

選択した色を HEX、RGB、HSL、HSV、HWB、CMYK で表示し、保存色、主要色、関連色、配色の各パレットを作成できます。

使い方

  1. 25 MB、2,400 万画素以内の PNG、JPEG、WebP、GIF、BMP、AVIF 画像を選択、ドロップ、または貼り付けます。
  2. 画像内の点をクリックまたはタップし、元画像のピクセルを正確に選ぶ場合は拡大鏡や矢印キーを使用します。
  3. カラー形式とアルファ値を確認してコピーするか、色をパレットに保存します。
  4. 必要に応じて主要色の抽出、関連色の生成、2 色の比較、保存済みパレットのコピーや書き出しを行います。

実用例

  • 元のカラーコードがない場合に、ロゴからブランドカラーを読み取る。
  • スクリーンショットからインターフェースの色を取得し、近い 2 つの値を比較する。
  • 写真、イラスト、商品画像、グラデーションの細部から色を収集する。
  • デザインメモ、CSS 変数、その他の文書用に再利用可能なカラー値リストを用意する。

注意事項と制限

  • 画像のデコード、ピクセル解析、パレット生成はブラウザ内で行われます。画像自体はブラウザのストレージに保存されず、保存済みパレットのカラー値だけが保存されます。
  • 入力ファイルは 25 MB、デコード後の画像は 2,400 万画素までです。形式への対応は、ブラウザが画像をデコードできるかどうかにも依存します。
  • 最も近い色名、主要色パレット、CMYK 変換は計算による近似値であり、CMYK 値はプリンターや ICC プロファイルを使用しません。正確なピクセル値が必要な場合は、デコードした RGBA 値を使用してください。
  • コントラストと Delta E は RGB 成分を不透明として扱い、アルファ値は別に表示します。半透明色の見え方は背景によって変わります。

よくある質問

画像はアップロードまたは保存されますか？

いいえ。このツールは選択した画像をブラウザ内で処理し、保存済みパレットの RGBA 値だけをブラウザのストレージに保存します。

画像内のとても小さい部分を選択するには？

近くの点を選んでから、ピクセル拡大鏡のセルを選択するか、矢印キーで選択位置を移動します。Shift と矢印キーを押すと、元画像上で一度に 10 ピクセル移動できます。

透明度は保持されますか？

はい。選択したピクセルにはアルファ値が含まれ、完全一致の重複判定では RGBA 値全体を比較します。

主要色は画像内のすべてのピクセルを正確に集計したものですか？

いいえ。主要色パレットは表示ピクセルの範囲を限定したサンプルを要約したもので、すべての異なるピクセル値を並べた一覧ではありません。

別の画像を読み込んでも色を残せますか？

はい。パレット保持オプションを有効のままにするか、次の画像を空のパレットで始める場合は無効にしてください。

色のその他のツール

色のすべてのツールを見る