画像があり、そこから1つの数字が必要。特定の色のHEXコードです。ブランド仕様がとうに消えたロゴ、合わせたい青のサイトのスクリーンショット、再利用したい色合いのある写真かもしれません。色がこうだと思うものを打ち込んでもうまくいきません。目は画面から#3A7BD5を読めず、正しく見える色はたいてい数桁ずれています。実際の値をピクセルから直接読み取る方法を紹介します。
なぜ推測は決してうまくいかないのか
画面上の1つの「青」は、実はほぼ同一の青の広がりで、モニターの明るさと調整がさらにずらします。目で選ぶと、近いが間違ったところに着地します。ずれが煩わしいのに明らかではないほど近いので、なぜボタンがヘッダーに合わないのか10分燃やします。直し方は、推測をやめてピクセルが実際に保存する数字を読むことです。
3ステップでコードを取得
信頼できる方法は、カラーピッカーで直接ピクセルをサンプリングすることです。
- 画像を読み込む。 取り出す元のロゴ、スクリーンショット、写真を放り込みます。
- 正確なピクセルにホバーする。 ルーペがカーソルを追い、下の領域を拡大するので、硬い縁でも、どのピクセルが平らなブランドカラーで、どれが2色のアンチエイリアスの混色かが見えます。
- クリックで保存し、コピーする。 各クリックが色を、HEX・RGB・HSLを示す見本として保持し、それぞれに自分のコピーボタンが付きます。HEXをクリックすればクリップボードに入ります。
正しいピクセルに着地する
ルーペは聞こえる以上に大事です。色が別の色と出会うところ、背景に対する文字、アイコンの縁では、間のピクセルがアンチエイリアスされています。2色の滑らかな混色で、どちらでもありません。そこをサンプリングすると、何にも合わない濁った値が得られます。形の内側に数ピクセル入った平らな部分、色が単色のところを狙いましょう。拡大表示が、クリック前にそこにいると確認させてくれます。
きれいなロゴやフラットなUIではこれは簡単です。色が広い領域で均一だからです。写真では、粒子と圧縮のせいで隣り合うピクセルが本当に違うので、より注意が要ります。落ち着いた均一に照らされた領域から選び、いくつかサンプルを取って一致を確かめましょう。
HEX、RGB、HSL — 合うものを取る
各見本は3つすべてを一度にくれるので、行き先が望む方をコピーできます。
- HEX（
#3A7BD5）— ウェブの既定。CSS、Figma、Canva、ブランド資料。理由がない限りこれをコピーしましょう。 - RGB（
rgb(58, 123, 213)）— チャンネルの値。ツールがそれを求めるとき、あるいはrgbaで透過が必要なときに便利です。 - HSL（
hsl(215, 65%, 53%)）— 色相、彩度、明度。色を調整したいときに最適です。ホバー状態のために明るくする、バリエーションのためにくすませる、そこからスケールを組む。
どの見本も3つすべてを運ぶので、形式を切り替えるためだけに再サンプリングすることは決してありません。
複数の色を一度に取る
ロゴが1色であることはめったにありません。主要色、アクセント、文字の色を1回で通してクリックしましょう。それぞれがリストに積み上がるので、画像を3回別々に読み込む代わりに、比較して次々にコピーできます。
特定のピクセルではなく画像全体の色の要約、つまり写真が組み立てられた全体のパレットが欲しいなら、それは別の仕事で、img.diyの別のパレットツールが支配的な色を自動抽出します。欲しい正確な位置が分かっているときはこのピッカーを、画像を特徴づけてほしいときはパレットツールを使いましょう。
端末に留まります
画像はキャンバスからブラウザ内でローカルに読まれます。何もアップロードされず、登録もなく、初回の読み込みのあとオフラインで動きます。ですから未公開のモックアップやクライアントの非公開素材が、そこから1つのHEXコードが必要だっただけで端末から出ることはありません。
画像を読み込み、ピクセルにホバーし、クリックし、コードをコピーしましょう。