画像の色取得 — 納品手順

Q: 画像の色取得 — 納品手順 はどのように使いますか？

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

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

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

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

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

入力と出力の例

色を他の人へ渡すときは、用途、HEX、RGBの文字列、元画像をセットで記録します。数値の出どころを誰も推測しなくて済みます。

簡単な表で十分です。用途(メインボタン)、HEX(#6D28D9)、RGB(109, 40, 217)、出典(logo-v3.png、大きな図形の中央)といった形です。このツールはピクセル座標を表示しないので、位置は言葉で説明するか、画像のコピーに印を付けます。開発者はHEXを--brand-primary: #6D28D9;のようなCSSカスタムプロパティにそのまま貼り、サイト全体で定義を1か所にまとめられます。

クライアントのムード写真からサイトを作る小さな制作会社なら、背景・文字・アクセントの3行を、それぞれの元ファイルとともに開発者へ送ります。ロゴが変わったら新しいファイルで同じクリックを繰り返し、変わった行だけ更新すれば、版同士を比較しやすくなります。

よくある失敗は、名前のないままスクリーンショットやチャットで色を回してしまうことです。誰かが取り直すたびに色味がずれていきます。共有のスタイルシートやデザイントークンのファイルに値を保存し、合意した名前を付けましょう。

元画像を表と一緒に保管し、画面の値は印刷の値ではないことも書き添えます。印刷する色なら、HEXがそのまま変換できると決めつけず、同じ色見本を印刷会社へ渡して色校正を依頼してください。

入力

Pixel selected in an image

出力

HEX and RGB values

引き渡すHEXとRGBは1枚の画像内のピクセルを表すもので、公式のブランドガイドの代わりにはなりません。

作業別ツール 12

よくある質問

画像の色取得 — 納品手順では何ができますか？

画像の色取得 — 納品手順：色を他の人へ渡すときは、用途、HEX、RGBの文字列、元画像をセットで記録します。数値の出どころを誰も推測しなくて済みます。

画像の色取得 — 納品手順はどのように使いますか？

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

画像の色取得 — 納品手順の結果はどのように受け取れますか？

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

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

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