無料画像カラーピッカー
画像の一点をクリックして、その画素を大文字 HEX と rgb(r, g, b) で読み取ります。例：rgb(200, 100, 50) は #C86432。
画像はブラウザー内で分析されます。
またはこのページのどこにでも画像を1つドロップ
カラーピッカーとパレット抽出
知っておきたいこと
読み込んだ画像のどこかをクリックすると、ツールはちょうど 1 画素を読み取ります。クリック位置はプレビューから実際の解像度の画像座標に換算されるため、幅 4000px の写真が 800px で表示されていても、周囲の平均ではなくポインターの下にある画素そのものの値が返ります。結果は大文字の HEX コードと rgb(r, g, b) の文字列で表示され、それぞれにコピーボタンが付きます。
変換は単純な 16 進数です。rgb(200, 100, 50) では、赤 200 は C8、緑 100 は 64、青 50 は 32 なので #C86432 になります。逆に #C86432 は 200、100、50 と読めます。各チャンネルは 0～255 の整数なので、コードは常に 16 進数 6 桁で、#0A0B0C のように先頭の 0 も保持されます。
何を指しているかに注意してください。写真にはノイズや JPG のブロックがあり、空を 1 回クリックした値が隣の点と数段階ずれることがあるので、3～4 回クリックして真ん中の値を採用してください。文字やロゴのアンチエイリアスされた縁は 2 色が混ざっているため、文字や図形の塗りつぶされた内側を選んでください。PNG の透明な画素はアルファなしの下地の色として読み取られるので、プレビューの背景も確認してください。
このページは一点ずつ読み取ります。主要な色をざっと確認したい場合は、兄弟ページのパレット抽出が画像全体を 8 つの色に要約しますが、その値はグループ化されているため、ここでクリックした値とわずかに異なることがあります。
作業別ツール 12
関連ツール 13
無料画像カラーピッカーの使い方
- 紫のボタンがある PNG など、スクリーンショットやロゴファイルを読み込みます。
- 縁やグラデーションを避け、塗りつぶされた領域の中央をクリックします。
- HEX と rgb の行を読み取ります。例：#C86432 と rgb(200, 100, 50)。
- CSS やデザインツールが必要とする形式の横のコピーボタンを押します。
よくある質問
取得される色は平均ですか、それとも正確な 1 画素ですか。
プレビューが縮小されていても、画像の実際の解像度での正確な 1 画素です。平均は取られません。
rgb(200, 100, 50) の HEX コードは何ですか。
#C86432 です。16 進数で赤 200 は C8、緑 100 は 64、青 50 は 32 です。
同じ空を 2 回クリックするとコードが少し違うのはなぜですか。
センサーのノイズや JPG の圧縮が画素ごとに異なるためです。数か所をサンプリングして真ん中の値を使ってください。
縁の画素がくすんだ色になるのはなぜですか。
アンチエイリアスが 2 色の境界を混ぜているためです。図形の塗りつぶされた内側をクリックしてください。