画像カラーピッカー

近い色ではなく、正確な色が必要なとき

ブランドを作り直していて、唯一の参照が古いロゴだけ。気に入ったサイトのスクリーンショットにボタンを合わせている。写真の中に見つけた色合いを自分のデザインに使いたい。どのケースでも問題は同じです——目は画面からHEXコードを読み取れません。「あのティール」は本当は少しずつ違う十数種のティールで、モニターがそれをさらにずらします。ピクセルが実際に持っている数字が必要なのです。

このツールがするのはそれです。画像を読み込み、その上を動かすと、拡大鏡のルーペがカーソルを追い、下のピクセルを拡大して見せるので、欲しい正確な一つに着地できます。クリックすると、その色がスウォッチとして保存されます。各スウォッチはHEX、RGB、HSLの値を、それぞれの隣にコピーボタン付きで一覧するので、画像の中のピクセルからクリップボードの中のコードへ直行できます。

画像はマシンを一切離れません。ピクセルはキャンバスからブラウザ内でローカルに読まれます——何もアップロードされず、アカウントもなく、ページが読み込まれればネットワークを切っても動き続けます。「画像」が未発表のモックアップ、クライアントのブランド素材、どこかのウェブツールに渡すべきでない社内スクリーンショットであるとき、それが要点です。

実際の使い方

• ルーペは精度のため。 ロゴやUIには、色が単一ピクセルで変わる硬い縁があります——アンチエイリアスのせいで、隣のピクセルは濁った混色です。拡大表示は、確定する前に自分がどのピクセルの上にいるかを正確に見せるので、縁ではなく平らなブランドカラーを選べます。
• どのクリックもスウォッチを残す。 採取は一度きりで消えるのではありません。画像のあちこちをクリックすると各色がリストに積み上がるので、ロゴの主色、アクセント、文字色を一回で引き出し、並べて比較できます。
• 3つの形式、一回の採取。 各スウォッチはHEX、RGB、HSLを一度に表示します。形式を変えるのに採取し直す必要はありません——同じ色がすでに3つとも、それぞれのコピーボタン付きでそこにあります。

HEX、RGB、HSL——どれをコピーするか

これらは同じ色を書く3つの方法で、正しいものはそれがどこへ行くかによります。

• HEX(#3A7BD5)はウェブの既定です——CSS、大半のデザインツール、ブランド資料。コンパクトでどこにでも貼れます。そうしない理由がなければ、これをコピーしてください。
• RGB(rgb(58, 123, 213))は赤、緑、青のチャンネルを綴ります。ツールがチャンネル値を求めるとき、アルファ(rgba)が必要なとき、色がどう混ざるかを考えるときに役立ちます。
• HSL(hsl(215, 65%, 53%))は色相、彩度、明度を記述します。色をただ再利用するのではなく調整したいときに手を伸ばすものです——ホバー状態のために明度をずらす、控えめな変種のために彩度を落とす、色相を保ってスケールを組む。

一つの正直な制約、そして姉妹ツール

これは点のサンプラーです——各クリックは単一のピクセルを読みます。きれいなロゴや平らなUIでは、それがまさに欲しいものです。ノイズの多い写真——粒状、グラデーション、JPEGのアーティファクト——では、隣り合う2つのピクセルが違いうるので、平らな領域から選び、ルーペを使って外れ値に着地しないようにしてください。ここに領域の平均を取るブラシはありません。

そしてまったく手で選びたくないなら、img.diy には画像全体を走査してその支配色を自動で渡す別のパレットツールがあります。この二つは異なる問いに答えます。パレットツールはこの画像が何色でできているかを教え、カラーピッカーは一つの特定のピクセル——ロゴのこの正確な一点、あの一つのボタン——を指してその値を取らせます。画像を要約するにはパレットツールを、狙う点がすでに分かっているときはこちらを手に取ってください。

画像を読み込み、ホバーしてピクセルを見つけ、クリックして残し、必要な形式をコピーしてください。