画像カラーピッカー
画像を追加すると、キャンバス上のピクセルを選んで HEX、RGB、HSL、HSV、CMYK の値を確認できます。最近の色を比べ、主要な色をパレットとして抽出し、PNG で保存できます。
クリックまたはドラッグ＆ドロップ
選択した画像はブラウザ内で読み込まれます。キャンバスに表示されたら、マウスまたはタッチで調べたいピクセルを選んでください。
最大 10MB · ブラウザ対応画像キャンバスプレビュー
選択した色
最近の色
パレット
すぐ使える形で。
- すぐ分かる画面入力位置と結果位置をはっきり分けます。
- 結果を先に大事な結果を前に出し、手順は必要な分だけ見せます。
- 余計な要求を減らす登録や不要な入力なしで使える状態にします。
画像の色は、1ピクセルの値と全体のパレットを分けて見ると扱いやすい
画像カラーピッカーは、写真、スクリーンショット、ロゴ、イラストの気になる場所を選び、そのピクセルの色を HEX、RGB、HSL、HSV、CMYK で確認するためのツールです。キャンバスをクリックすると各コード欄が同時に更新され、選んだ色は最近の色にも残ります。
ロゴの一部を正確に拾う作業と、写真全体の雰囲気をパレットにする作業では見る基準が違います。この画面では、ピクセル選択、最近の色の比較、主要色の抽出、PNG ダウンロードまでを同じ流れで扱えます。
画像を追加して最初の色を選ぶ
- 画像を追加ボタンまたはアップロード領域から、JPG、PNG、GIF、WebP などブラウザが読める画像を選びます。
- 画像がキャンバスに表示されたら、ポインターまたはタッチで調べたい場所に合わせます。
- クリックまたはタップすると色が固定され、すべてのコード欄が更新されます。
ルーペで数ピクセルの差を見る
- ロゴの端、影、グラデーションは、数ピクセル動くだけで値が変わります。
- 9×9 ルーペを見ながら、ベタ面、にじんだ境界、透明部分を分けて確認します。
- 透明 PNG や小さなアイコンでは、座標とアルファ値も判断材料になります。
次に使う形式でコードを選ぶ
- HEX は CSS、デザイントークン、共有メモに使いやすい形式です。
- RGB は canvas やスクリプト、画像処理のメモで値をそのまま扱いやすくなります。
- HSL/HSV は色相や彩度の調整方向を説明しやすく、CMYK は印刷の会話における目安として扱います。
最近の色で候補を比べる
- 選んだ色は最近の色として追加されます。
- 背景、ボタン、アクセント候補を同じ画像から複数拾い、カードを並べて比べます。
- 画像やデザイン方針が変わったら、クリアして新しい候補だけを残します。
パレット抽出で主要色を絞る
- パレットは画像のピクセルをサンプリングし、近い色をまとめて目立つ色から表示します。
- 5色は全体像の確認、8色は Web やサムネイルの雰囲気づくり、10〜12色は色数の多い写真に向いています。
- 抽出したパレットは最終的なブランド指定ではなく、候補を絞るための出発点です。
PNG の色見本をメモに貼る
- ダウンロードは、抽出済みのパレットまたは最後に選んだ色を PNG の色見本として保存します。
- 色チップとコードが一緒に残るため、フィードバックや下書き、資料に貼りやすくなります。
- 複数の色を1枚に残したい場合は、先にパレットを抽出してからダウンロードします。
ブラウザ内処理の意味
- 選択した画像は現在のブラウザで読み込まれ、キャンバスに描画されます。
- 色の値はそのキャンバス上のピクセルから読み取られ、このツールは色を読むために画像をサーバーへアップロードしません。
- タブを閉じたり、リセットしたり、別の画像を選ぶと、現在の作業状態も変わります。
同じ色が違って見える理由
- 大きな画像は、操作を軽くするためにプレビューキャンバスのサイズへ描き直される場合があります。
- 画面の明るさ、カラープロファイル、透明度、ブラウザの画像デコードによって、同じ値でも見え方が変わることがあります。
- 印刷確認や元ピクセルの厳密な検証では、元ファイルと色管理されたワークフローも併用してください。
UI に使う前にコントラストを見る
- 色見本としてきれいでも、本文やボタンの文字色にすると読みにくい場合があります。
- 明るい背景と暗い背景の両方で、見出し、本文、ボタンの文字が十分に分かれるか確認します。
- アクセシビリティが重要な画面では、公開前に専用のコントラストチェックも行います。
よくある使い方
- スクリーンショットの背景色を拾い、HEX を CSS 変数に貼り付けます。
- 商品写真から8色のパレットを抽出し、サムネイルやバナーの方向性を決めます。
- イラストのアクセント候補を複数選び、最近の色から一番扱いやすい色を残します。
よくある質問
画像はサーバーにアップロードされますか？
いいえ。選択した画像は現在のブラウザで読み込まれ、キャンバスに描画されます。このツールは色の値を読むために画像をサーバーへアップロードしません。
どの画像ファイルを使えますか？
JPG、PNG、GIF、WebP など、使用中のブラウザがデコードできる画像ファイルを使えます。実際に表示できるかどうかはブラウザの対応状況によります。
大きな画像でも元のピクセルをそのまま読みますか？
常にそうとは限りません。画面の反応を保つため、大きな画像はプレビューキャンバスのサイズへ描き直され、そのキャンバス上のピクセルから色を読み取る場合があります。
抽出したパレットを正式なブランド色として使えますか？
パレットは画像からサンプリングした色の候補です。正式なブランド色や印刷用の色が必要な場合は、元のガイド、元ファイル、色管理されたツールも確認してください。
ダウンロードされる PNG には何が入りますか？
パレットを抽出済みの場合は、色チップと HEX コードが保存されます。まだパレットを作っていない場合は、最後に選んだ色だけが小さな色見本として保存されます。