画像はサーバーにアップロードされますか?

いいえ。ファイル選択 / ドロップ時点で FileReader で読み込まれ、HTMLCanvasElement に描画したあと `getImageData` で各ピクセルの RGBA を取得します。ネットワーク通信は一切発生しません。

HEX / RGB / HSL のうち、どの形式をコピーすべきですか?

用途によります。CSS や Tailwind の任意色なら HEX (`#RRGGBB`) または RGB が一般的、Figma / Sketch / Procreate などのカラーピッカーに直接貼り付けるなら HEX が一番互換性が高いです。彩度や明度を微調整する基準色を取りたいなら HSL が便利です。

PNG / WebP の透過部分の色はどうなりますか?

透過 (アルファ < 255) のピクセルは、見た目どおりの色を取得するために白背景の上に合成した値を返しています。完全透過 (アルファ 0) の場合は HEX が `#FFFFFF` (白) として表示されます。

ルーペで拡大される倍率は固定ですか?

現バージョンでは固定 (1 ピクセル当たり数 px) のルーペを表示します。中央の四角が実際にピックされるピクセルです。倍率調整はロードマップに入れていません (シンプルさを優先)。

対応している画像形式は?

ブラウザがネイティブにデコードできる JPEG / PNG / WebP に対応しています。HEIC (iPhone 写真) を扱いたい場合は、先に HEIC → JPEG ツールで変換してから本ツールに通してください。

巨大な画像でも動作しますか?

原寸での描画ではなく、表示用には canvas を縮小して描画し、色の取得は内部にもう一枚の原寸 canvas を持って `getImageData` を行うため、4K / 8K 程度の画像でもメモリ範囲内で動作します。極端に巨大な画像 (10000×10000 など) ではブラウザのメモリ制限に当たることがあります。

画像へ戻る

画像カラーピッカー — HEX / RGB / HSL 取得

JPEG / PNG / WebP をアップロードし、画像内の任意の位置をクリックするとそのピクセルの色を HEX / RGB / HSL で取得できます。ホバー中はルーペで拡大表示し、ピックした色は履歴として一覧表示。各値はワンクリックでコピー可能です。画像は外部に送信されず、すべての処理はブラウザ内で完結します。

画像色

使い方

画像をドロップまたはファイル選択でアップロードします。画像内にカーソルを合わせるとルーペでそのピクセル周辺を拡大表示し、HEX / RGB / HSL の色値がリアルタイムに表示されます。クリックすると色が履歴に追加され、各値の右端の「コピー」ボタンでクリップボードにコピーできます。履歴は何度でも追加でき、不要になった行は個別に削除、または「履歴を消去」でまとめてクリアできます。アップロードした画像は外部に送信されず、すべてブラウザ内の Canvas で読み取られます。

よくある質問

画像はサーバーにアップロードされますか?: いいえ。ファイル選択 / ドロップ時点で FileReader で読み込まれ、HTMLCanvasElement に描画したあと `getImageData` で各ピクセルの RGBA を取得します。ネットワーク通信は一切発生しません。
HEX / RGB / HSL のうち、どの形式をコピーすべきですか?: 用途によります。CSS や Tailwind の任意色なら HEX (`#RRGGBB`) または RGB が一般的、Figma / Sketch / Procreate などのカラーピッカーに直接貼り付けるなら HEX が一番互換性が高いです。彩度や明度を微調整する基準色を取りたいなら HSL が便利です。
PNG / WebP の透過部分の色はどうなりますか?: 透過 (アルファ < 255) のピクセルは、見た目どおりの色を取得するために白背景の上に合成した値を返しています。完全透過 (アルファ 0) の場合は HEX が `#FFFFFF` (白) として表示されます。
ルーペで拡大される倍率は固定ですか?: 現バージョンでは固定 (1 ピクセル当たり数 px) のルーペを表示します。中央の四角が実際にピックされるピクセルです。倍率調整はロードマップに入れていません (シンプルさを優先)。
対応している画像形式は?: ブラウザがネイティブにデコードできる JPEG / PNG / WebP に対応しています。HEIC (iPhone 写真) を扱いたい場合は、先に HEIC → JPEG ツールで変換してから本ツールに通してください。
巨大な画像でも動作しますか?: 原寸での描画ではなく、表示用には canvas を縮小して描画し、色の取得は内部にもう一枚の原寸 canvas を持って `getImageData` を行うため、4K / 8K 程度の画像でもメモリ範囲内で動作します。極端に巨大な画像 (10000×10000 など) ではブラウザのメモリ制限に当たることがあります。

類似のツール

画像カラーパレット抽出 (主要色・配色を取得)

画像をドロップすると、median cut 量子化で主要な色を抽出し、各色の HEX / RGB 値と占有率を一覧表示します。色数 (4〜16) を選べ、占有率バーで配色バランスも確認可能。各色クリックで HEX をコピー、パレット全体を HEX 一覧 / CSS 変数 / JSON でコピーできます。画像はブラウザ内でだけ解析され、外部に送信されません。

画像色

コントラスト比チェッカー — WCAG AA / AAA 判定

前景色 (文字色) と背景色を選ぶだけで、WCAG 2.x のコントラスト比を計算し、通常の文字・大きな文字・UI 部品それぞれで AA / AAA を満たすかをその場で判定します。HEX と rgb() 入力、カラーピッカー、ライブプレビュー付き。すべてブラウザ内で処理され、色情報は外部に送信されません。

開発色

画像 → ASCII アート変換 — 文字で再描画

JPEG / PNG / WebP の画像をブラウザ内で読み込み、各ピクセルの輝度を文字に置換して ASCII アートに変換します。出力幅 (列数)、文字セット (詳細 / 標準 / シンプル / ブロック)、明暗反転を切り替えながらリアルタイムにプレビュー可能。完成した結果はコピー、または .txt ファイルとしてダウンロードできます。画像は外部に送信されず、すべての処理はブラウザ内で完結します。

画像変換テキスト

画像モノクロ化 — グレースケール 5 方式 (輝度・チャンネル別)

JPEG / PNG / WebP をブラウザ内でグレースケール化します。変換方式は平均 / 輝度 (BT.601) / 赤 / 緑 / 青チャンネル単独の 5 種類から選択可能。出力形式 (PNG / JPEG / WebP) と JPEG / WebP の品質も調整できます。アップロードした画像は外部に送信されず、すべて Canvas でブラウザ内処理されます。

画像色