画像カラーピッカー オンライン

画像をドロップし、ホバーで任意のピクセルをプレビューし、クリックしてその HEX・RGB・HSL を取得できます。すべてブラウザ内で動作し、画像は端末から外に出ません。

画像カラーピッカーは、あなたの画像を canvas にデコードし、ピクセルを完全にブラウザ内でサンプリングします。ドロップした画像と選んだ色は端末から外に出ることはなく、ArrayKit にアップロードされることもありません。

CSS カラー変換ツールを開く

画像カラーピッカー について

画像カラーピッカーは、任意の画像をカラーサンプラーに変えます。写真・ロゴ・スクリーンショット・デザインモックアップをドロップまたは選択し、カーソルをその上で動かして十字カーソルの下のピクセルをプレビューし、クリックしてその正確な色を固定します。各サンプルはライブのスウォッチの隣に HEX・RGB・HSL として表示されるので、CSS・デザイントークン・塗りつぶしにそのまま落とし込めます。最近の色のストリップが直前の選択を手元に残すのでパレット作りに役立ち、各値には専用のコピーボタンがあります。透過ピクセルはアルファを保つので、PNG のオーバーレイは rgba と #rrggbbaa として読み戻せます。デザイナー、フロントエンド開発者、画像からブランドカラーを合わせる誰のためにも作られています。画像は canvas にデコードされて端末上でサンプリングされ、アップロードされることはありません。

機能

画像カラーピッカー の使い方

  1. ドロップゾーンをクリックするか、画像ファイルをその上にドラッグする
  2. カーソルを画像の上で動かして、ピクセルの色をプレビューする
  3. ある地点をクリックしてその色を固定し、HEX・RGB・HSL を表示する
  4. 必要な表記をコピーするか、最近の色から以前の選択を再度開く

例

入力

Sampled pixel: R 37, G 99, B 235 (opaque)

出力

HEX #2563eb
RGB rgb(37, 99, 235)
HSL hsl(221, 83%, 53%)

青いボタンを 1 回クリックすると、ピクセルが貼り付けられる CSS カラー値になります。

よくあるエラーとトラブルシューティング

よくある質問

画像から色を選ぶには？
画像をドロップまたは選択し、その上にホバーしてピクセルの色をプレビューし、狙う正確な地点をクリックしてください。ピッカーはそのピクセルの HEX・RGB・HSL をスウォッチとともに即座に表示し、各値にコピーボタンがあります。
スクリーンショット内の色の HEX コードを取得できますか？
はい。スクリーンショットを他の画像と同じように読み込み、欲しい色合いを見つけるためにホバーし、それをクリックしてください。HEX コードが RGB と HSL の値の隣に表示されるので、CSS やデザインツールにコピーできます。
カラーピッカーは PNG 画像の透過を保ちますか？
保ちます。サンプリングしたピクセルが完全に不透明でないとき、アルファが引き継がれます：RGB は rgba(...) として表示され、HEX は 8 桁目のアルファのペア（#rrggbbaa）を得るので、ピクセルの実際の描画と一致します。
どの画像形式から色を選べますか？
ブラウザが canvas にデコードできるもの — PNG・JPEG・WebP・SVG・GIF・AVIF・BMP・ICO です。正確なブランドカラーにはロスレスな PNG を優先してください。JPEG と WebP は平坦な塗りつぶしを少し色合いをずらすことがあります。
1 枚の画像から複数の色を保存できますか？
はい。クリックするたびに色が最近の色のストリップに追加され、十数個まで残ります。そこの任意のスウォッチをクリックして再度開き、その HEX・RGB・HSL をコピーして画像からパレットを組み立ててください。
画像から色を選ぶとき、私の画像はアップロードされますか？
いいえ。画像カラーピッカーは、あなたの画像を canvas に描画し、ピクセルを完全に端末上で読みます。画像が ArrayKit やいかなるサーバーにも送られることはないので、非公開のモックアップや写真もローカルに留まります。

関連ツール

すべての ArrayKit ツール