画像の色取得 — 設定と品質

画像の色取得 — 設定と品質 に使う画像を選びます。 ピクセルをクリックするか、抽出されたパレットから色を選びます。 正確な HEX または RGB 値をコピーします。

画像はブラウザー内で分析されます。

またはこのページのどこにでも画像を1つドロップ

画像を選択してください。

カラーピッカーとパレット抽出

入力と出力の例

選ぶのはクリック位置とコピーする形式だけです。デザインツールとCSSにはHEX、チャンネル別ならrgbを使います。

HEXは常に大文字6桁で、たとえば#6D28D9はrgb(109, 40, 217)と同じ色です。CSSのカスタムプロパティやデザインツールに貼るならHEX、後でrgbaとして透明度を足すならRGBの文字列をコピーします。値ごとにコピーボタンがあり、コピーできると約1秒間チェックマークが出ます。

箱の写真に合わせてラベルの色を決めるパッケージデザイナーなら、同じ色の領域で3〜5か所をクリックして比べましょう。PNGでチャンネルごとに1〜2程度の差は正常で、10以上違うならグラデーションか、強く圧縮されたJPGです。

よくある失敗は、影やハイライトの部分を1回クリックしただけでブランドカラーと決めてしまうことです。平坦な領域の中間調を選び、グラデーションなら平均を1つ出すのではなく、始点と終点の色を別々に記録します。

トレードオフとして、大きな画像はクリック位置を細かく決められ、可逆圧縮のPNGは毎回同じ数値を返します。小さなJPGは容量を節約できますが数値が数単位ぶれます。重要な承認では、権利者から正式なHEXをもらい、ピッカーは確認用に使いましょう。

Pixel selected in an image

HEX and RGB values

このツールが示すのは見た目の色ではなくピクセルの正確な値なので、照明やモニターの調整は表示される数値に影響しません。

作業別ツール 12

画像の色取得 — 設定と品質では何ができますか？

画像の色取得 — 設定と品質：選ぶのはクリック位置とコピーする形式だけです。デザインツールとCSSにはHEX、チャンネル別ならrgbを使います。

画像の色取得 — 設定と品質はどのように使いますか？

画像の色取得 — 設定と品質に使う画像を選びます。ピクセルをクリックするか、抽出されたパレットから色を選びます。正確な HEX または RGB 値をコピーします。

画像の色取得 — 設定と品質の結果はどのように受け取れますか？

選択した色と抽出パレットは HEX・RGB でそのままコピーできます。

編集した画像を公開する前に何を確認しますか？

書き出したファイルを開き、使用時のサイズで画素数・容量・小さな文字・輪郭・透明部分を確認してください。サイズ変更は画素数、圧縮は容量を調整します。拡大しても失われた細部の復元は保証されません。設定を変えて再出力できるよう原本を保管してください。