画像の色取得 — 入力準備
画像の色取得 — 入力準備：正確なピクセルの色を得るには、スクリーンショットではなく元の画像ファイルを使い、縁やグラデーションではなく色が均一な平坦な部分をクリックします。
画像はブラウザー内で分析されます。
またはこのページのどこにでも画像を1つドロップ
カラーピッカーとパレット抽出
入力と出力の例
正確なピクセルの色を得るには、スクリーンショットではなく元の画像ファイルを使い、縁やグラデーションではなく色が均一な平坦な部分をクリックします。
Chatcumentが読み取るのは、ちょうど1ピクセルだけです。画像をクリックするとポインター下のピクセルを画像本来の解像度で読み、大文字のHEXコードとrgb(r, g, b)で表示します。周辺を平均しないため、そのピクセルに混ざったノイズやアンチエイリアスがそのまま数値に出ます。
ウェブデザイナーがクライアントから届いたPNGロゴからブランドの青を取る場面を考えてください。文字の縁は背景と混ざった色になるので、最も大きな文字や図形の中央の塗りつぶし部分をクリックするのが安全です。
よくある失敗は、夜間モードや色フィルター、別のモニタープロファイルで撮ったスクリーンショットから色を取ることです。すでにすべての色が変わっています。完全に透明な部分をクリックするのも失敗のもとで、その位置ではキャンバスがrgb(0, 0, 0)を返しますが、求めている色ではありません。見えている不透明なピクセルを選んでください。
始める前に3点を確認します。元の書き出しファイルであること、強く圧縮されたJPGではなくPNG・WebPか高品質JPGであること、狙う領域が隣の色に触れずにクリックできる大きさであることです。その上で、同じ平坦な領域の2か所をクリックして同じHEXになるか確かめましょう。
入力
Pixel selected in an image
出力
HEX and RGB values
値はブラウザーが復号した画像から読むため、特殊なカラープロファイルが埋め込まれたファイルでは、デザインツールと少し異なることがあります。
作業別ツール 12
関連ツール 13
画像の色取得 — 入力準備の使い方
- 画像の色取得 — 入力準備 に使う画像を選びます。
- ピクセルをクリックするか、抽出されたパレットから色を選びます。
- 正確な HEX または RGB 値をコピーします。
よくある質問
画像の色取得 — 入力準備 では何ができますか？
画像の色取得 — 入力準備：正確なピクセルの色を得るには、スクリーンショットではなく元の画像ファイルを使い、縁やグラデーションではなく色が均一な平坦な部分をクリックします。
画像の色取得 — 入力準備 はどのように使いますか？
画像の色取得 — 入力準備 に使う画像を選びます。 ピクセルをクリックするか、抽出されたパレットから色を選びます。 正確な HEX または RGB 値をコピーします。
画像の色取得 — 入力準備 の結果はどのように受け取れますか？
選択した色と抽出パレットは HEX・RGB でそのままコピーできます。
編集した画像を公開する前に何を確認しますか？
書き出したファイルを開き、使用時のサイズで画素数・容量・小さな文字・輪郭・透明部分を確認してください。サイズ変更は画素数、圧縮は容量を調整します。拡大しても失われた細部の復元は保証されません。設定を変えて再出力できるよう原本を保管してください。