画像カラーピッカー

画像カラーピッカーとは？

画像カラーピッカーは、画像内のピクセルの正確な色を読み取り、HEX コード、RGB トリプレット、またはその両方として報告するツールです。デザイナー、開発者、アーティストが写真、スクリーンショット、モックアップ、その他のラスター画像から色を取り込み、コード、デザインソフト、ブランドガイドラインで同じ色調を再利用するために使います。ピッカーダイアログで目視で推測する代わりに、欲しいピクセルをクリックするだけで、正確で再現可能な値が得られます。

裏側では、ブラウザが画像をキャンバスにデコードし、getImageData API がカーソル下の正確なピクセルの赤・緑・青・アルファ値を返します。これらの数値は CSS の rgb() 文字列として整形され、#RRGGBB の HEX コードに変換されます。読み取りはブラウザ内のキャンバスで行われるため、ピクセルデータがデバイスから離れることはなく、操作は完全にローカルでプライベートです。

このツールができること

画像カラーピッカーは任意の PNG、JPG、WebP、GIF、BMP、HEIC ファイルをブラウザに読み込み、キャンバスに描画し、任意の場所をクリックして 1 ピクセルをサンプリングできます。クリックごとに次を報告します：

• HEX コード。HTML、CSS、デザインツールにそのまま貼り付けられる 6 桁の #RRGGBB 表現。
• RGB トリプレット。CSS の rgb(r, g, b) 形式。各チャネルは 0〜255。
• ピクセル位置。サンプリングしたピクセルの x、y 座標。色の出所を追跡するのに便利。
• ライブプレビュー。大きなスウォッチが現在選択中の色を表示し、クリック前にホバーインジケーターがカーソルに追従。
• 履歴。直近 10 色のサンプリング色が下にリスト表示され、各色をクリックで再選択でき、それぞれにコピーボタン付き。

ダウンロードボタンはありません — このツールはサンプリング用で、書き出し用ではありません。出力はクリップボードにコピーした HEX または RGB 文字列で、CSS、デザインファイル、ブランドブック、バグ報告に貼り付けられます。

画像カラーピッカーを使う場面

既存の画像から色を一致させたり複製したりする必要がある場合（ゼロから作るのではなく）に、カラー抽出が役立ちます。一般的なシナリオ：

• ブランドの一貫性。ロゴ、ヘッダー、マーケティング画像から正確なブランドカラーを取り出し、新しいデザインを一致させます。
• デザインの引き継ぎ。モックアップのスクリーンショットから色を読み取り、開発者向けの CSS 変数に変換。
• 写真のレタッチ。肌色、空の色、影の色をサンプリングしてブラシや調整レイヤーで再利用。
• アクセシビリティ監査。スクリーンショットから前景色と背景色を読み取り、コントラスト比を計算。
• UI の再現。スクリーンショットをサンプリングして、既存ウェブサイトのボタンやリンク色を一致させます。
• アートと工芸。参考写真から色を拾い、絵の具を混ぜたり、毛糸を選んだり、生地を選んだり。

ピッカーは真のピクセル値を読み取るため、画面上の小さなスウォッチから推測するより信頼性が高いです。特に高 DPI ディスプレイでは、1 つの視覚的点が複数ピクセルを覆うことがあるためです。

画像から色を抽出する手順

このツールの使用は数秒で、すべてブラウザ内で完結します。以下の 4 ステップに従ってください：

1. 画像をアップロード。上のアップロードエリアをクリックするか、PNG、JPG、WebP、GIF、BMP、HEIC ファイルをドラッグ＆ドロップします。
2. ホバーでプレビュー。レンダリングされた画像上でカーソルを動かすと、小さなインジケーターがポインタに追従し、決定前に正確に狙えます。
3. クリックしてサンプリング。欲しいピクセルをクリック。HEX コード、RGB トリプレット、ピクセル位置が結果パネルに表示され、色が履歴に追加されます。
4. 値をコピー。「HEX をコピー」または「RGB をコピー」をクリックして値をクリップボードに入れ、CSS、デザインファイル、メモに貼り付けます。

すべてのステップは Canvas API によりブラウザ内で実行されます。画像がサーバーへアップロードされることはないため、抽出は完全にプライベートで、機密や個人の写真にも安全に使用できます。

HEX と RGB と HSL の違い

色は複数の形式で記述でき、それぞれに長所があります。HEX（例：#0EA5E9）はコンパクトで、HTML、CSS、ほとんどのデザインツールのデフォルトです — # の後の 2 文字ごとが 1 チャネルを 16 進バイトとしてエンコードします。RGB（例：rgb(14, 165, 233)）はチャネルごとに 0〜255 の 10 進数を使い、読み上げや計算がしやすいため、プログラミングやデバッグで一般的です。HSL（例：hsl(199, 89%, 48%)）は色相、彩度、輝度を記述し、色の色合いを調整したり、色相を回してパレットを作る際に好まれます。

本ピッカーは HEX と RGB を報告します。これらは最も汎用的に貼り付け可能な形式だからです。HSL が必要な場合は、簡単な変換 — または私たちのカラーツール — で HEX や RGB を HSL に変換できます。重要なのは、3 つすべてが同じ画面上の色を記述しているという点で、コピーする形式はどこに貼り付けるかによります。