メインコンテンツへスキップ
Toolars
探索
バグを報告

画像 · ローカルユーティリティ

画像カラーピッカー

Image Color Picker

座標入力またはプレビューのクリックで、ブラウザがデコードした画像の Canvas ピクセルを 1 点だけ読み取ります。HEX をコピーするか、rgba() を含む値をダウンロードできます。

タスクの道筋 / 入力から結果へ

画像を選択する

ローカルで実行 · アップロードなし

画像カラーピッカーの使い方、プライバシー、関連ツール

タスクの道筋 / 入力から結果へ

正確なピクセルから色を拾う方法

  1. 01

    画像を選択する

    「ファイルを選択」を選び、12 MiB までの PNG、JPEG、WebP を開きます。片側 8,192 ピクセル、合計 24,000,000 ピクセルまでです。画像はこのタブ内で開かれるだけで、アップロードはされません。

  2. 02

    座標を設定する

    「ピクセル X」と「ピクセル Y」に整数のピクセル値を入力します。左端と上端は 0 始まりです。ワークスペースのヒントにあるとおり、ソースプレビューをクリックすれば両方の座標を一度に設定できます。

  3. 03

    ピクセルを読み取る

    「ピクセルを選択」を押します。デコード後の画像の指定座標を 1 × 1 の Canvas に描き、RGBA を読み取ります。周囲の座標は平均しません。ブラウザのデコードや Canvas の色・アルファ処理により、元ファイルの符号化された値と異なることがあります。範囲外の座標は描画前に拒否されます。

  4. 04

    色をコピーする

    結果にはサンプルした Canvas ピクセルの HEX、rgb()、rgba() が表示されます。スウォッチを押してコピーされるのは透明度を含まない HEX のみです。rgba() とほかの値を残すにはテキスト欄を使うか、小さなテキストファイルをダウンロードしてください。

ツールの概要

処理
ブラウザー内で完結
入力の外部送信
なし
保存
一切保存しません
価格
無料

入力はブラウザに留まります。

画像カラーピッカー は検証済みのローカル実行パスを使用し、隠れた入力・出力履歴を作成しません。

ローカル実行

現在のブラウザタブ内で実行されます。

隠れた処理なし

使用中のツールデータが Toolars のドキュメントレコードになることはありません。

アカウント不要

プロフィールを作成せずにコアワークフローを使えます。お気に入りはログイン後にアカウントへ同期されます。

即時リセット

タブを閉じれば、作業中のデータは消えます。

画像カラーピッカー が実際に行うこと

スクリーンショットの中にしかない色合いにボタンを合わせる、レポート用にグラフの背景の正確な値を拾う、2 つのブランドブルーが本当に一段階しか違わないか確認する。ピクセル単位の問いにはピクセル単位の答えが必要です。画像カラーピッカーは座標をローカルで読み取るため、社内ダッシュボードや未公開ページのスクリーンショットがデバイスの外に出ることはありません。

よくある質問

座標の原点はどこですか?
ピクセル (0, 0) は左上で、X は右へ、Y は下へ増えます。デコード後の画像の幅と高さより小さい非負の整数を入力してください。無効な座標や範囲外の座標は Canvas で読み取る前に拒否されます。エラーは原因を示しますが、数値の上限を必ず表示するわけではありません。
平均化された領域をサンプリングしますか?
近くのピクセルを平均せず、ブラウザがデコードして向きを正規化した画像の 1 座標をサンプルします。表示されるピクセル格子での座標は正確ですが、RGBA のバイトが元ファイルと同じという保証はありません。画像全体の色には平均色ツールを使います。
rgba() 値のアルファは何を示しますか?
alpha はその Canvas ピクセルの不透明度で、rgba() では小数第 3 位まで表示されます。ブラウザのデコードと描画後の値は元ファイルの生のチャンネル値と異なる場合があります。HEX と rgb() には alpha が含まれません。透明度が大切なら rgba() を見て、使用先の背景で確認してください。
プレビューのサイズは読み取るピクセルに影響しますか?
いいえ。プレビューのクリックは座標入力のショートカットにすぎません。クリック位置はソース画像自体のピクセルにマッピングされ、読み取りはその正確なソース座標で行われます。プレビューが大きくても小さくても、報告される RGBA 値は同じソースピクセルです。
画像はどこかにアップロードされますか?
いいえ。レンダリングとピクセル読み取りは現在のブラウザタブ内だけで実行され、アカウントは不要です。ワークスペースをリセットすると、画像と拾った値は破棄されます。

あわせて読む

画像スタジオを続ける

行き止まりではなく、関連タスクへ。

完全な索引に戻らずに、別のフォーカスされたワークスペースへ移動できます。

画像トリミング

Image Cropper

PNG・JPEG・WebP を正確なピクセル座標で、自由または固定のアスペクト比付きで切り抜き、PNG・JPEG・WebP として書き出す。

編集

画像フィルター

Image Filters

明るさ・コントラスト・彩度・グレースケール・セピア・ぼかしを 6 つのスライダーで調整し、元サイズの PNG でダウンロード。

編集

画像リサイズ

Image Resizer

画像をアスペクト比ロック付きの正確なピクセル寸法にリサイズ。1 枚ずつ、または最大 12 枚のバッチを ZIP でダウンロード。

編集

画像の平均色を抽出

Image Average Color Finder

画像の平均色を alpha 加重で測定し HEX・rgb()・rgba() でコピー。透明ピクセルは平均に混ざらず無視される。

確認