写真やスクリーンショット、ロゴの中に完璧な青を見つけて、その色をそのまま自分のデザインに使いたい——このためにPhotoshopは要りません。ブラウザの画像カラーピッカーは画素を直接読み取り、どこにでも貼れるコードを渡してくれます。
正解を事前に知っていたテスト。 実測ラボのフラットイラストはスクリプトで描いたもので、6 つの色はソースに書かれています:
#fdf3e3 #f4a261 #2a9d8f #264653 #e76f51 #e9c46a。カラーピッカーに通すと、6/6 すべてを正確に抽出しました。余分に 2 つの値 ——#fcedda #f6ba88—— が現れますが、これは誤りではなく、円の縁のアンチエイリアス混色、ファイル内に実在するピクセルです。同じ画像をダウンロードして、どちらの主張もご自身で確認できます。
HEX と RGB は同じ色の二通りの書き方
画面上のどの画素も赤・緑・青の混合で、各色は 0〜255 です。ピッカーはこの値を二つのよくある書き方で示します:
- RGB——
rgb(59, 130, 246)——三つのチャンネルを10進数の数字で。 - HEX——
#3B82F6——同じ三つの数を16進数にし、各2桁で(3B=59、82=130、F6=246)。
両者は交換可能で、HEX は CSS やデザインツールでより簡潔なだけです。HSL など他の形式が必要なら、コードを色変換ツールに通しましょう。
一画素を取る vs. パレットを取る
これは二つの目的で、方法も異なります:
- 正確な一画素——気になる位置をクリック。「あのボタンは何の青?」に最適です。
- 全体の配色——抽出された主要なパレットを使います。画像全体をサンプリングし、近い色をまとめ、最も多い色を並べます。スクリーンショットからブランドの主色を一発で抜き出せます。
このパレット機能は「正解が既知」の状態で照合できます。これは珍しいことです。実測ラボのフラットイラストはスクリプトで描いたもので、6 つの色はソースに書かれています:#fdf3e3 #f4a261 #2a9d8f #264653 #e76f51 #e9c46a。私たちのカラーピッカーはその 6/6 すべてを正確に抽出しました。
パレット抽出は作るのは簡単で検証は難しいので、私たちは「答えが既知」のテストを課しました。テストコーパスのイラストはスクリプトが描いたもので、6 色があらかじめ書き留められています:#fdf3e3 #f4a261 #2a9d8f #264653 #e76f51 #e9c46a。その PNG を私たちの画像カラーピッカーに渡すと #fdf3e3 #f4a261 #2a9d8f #264653 #e9c46a #e76f51 #fcedda #f6ba88 が返り、既知の色との一致は 6/6。ほかに 2 つの色見本(#fcedda、#f6ba88)が出ますが、これは誤りではなくアンチエイリアスの縁のピクセルです。これは主張ではなく反証可能なテストです。抽出器が劣化すればこのページが誤りになり、同じファイルを落として証明できます。
なぜ一画素で驚くことがあるのか
画像が圧縮された JPGなら、単色に見える領域も、実はフォーマットが持ち込んだ細かなばらつきで満ちています。隣り合う二画素を取ると、数値が数ポイント違うことがあります。安定した「これがこの色」が欲しいなら、領域を平均するパレットのほうが一クリックより信頼できます。PNG やベクター書き出しは非可逆ではないため、この問題は起きません。
意外な部分は不具合ではなく、学びになります。6 色に加えてピッカーは #fcedda #f6ba88 も返しました。円の縁のアンチエイリアス混色です。これはファイル内に実在するピクセルで、曲線の縁を拡大すれば、そこの色は隣り合う 2 色のどちらでもありません。1 ピクセルの取得はそこに当たることがあり、だからこそ「パレットを取る」ほうが「1 クリックを信じる」より安全なのです。
その 2 つの余分な色見本は、「1 ピクセル取ったのにデザインにない色が返るのはなぜか」の答えでもあります。アンチエイリアスは 1〜2 ピクセル幅の境界で図形の色と背景を混ぜるので、#f6ba88 は誰も選んでいないのに確かにそのファイルに存在します。平坦な領域の中央から取るか、パレット全体を取って出現頻度に並べさせてください。
すべては手元のデバイスに留まる
ブラウザのピッカーは <canvas> でローカルに画像を読み込みます——何もアップロードしません。つまりオフラインでも動き、画像は決してあなたのマシンから出ません。
関連ツール
- 色変換ツールでコードを HSL にしたり、コントラストを確認したり。
- CSS ジェネレーターで取った色をグラデーションや影に。
一色から一組のパレットへ
取得した一色は出発点であって、配色そのものではありません。使えるセットを作るには、まず主要な色を取り、HSL の明度(L)だけを変えて明るい兄弟色・暗い兄弟色を作ります——こうすると色の系統が調和します。実用的な構成は、基準色1・明るいトーン2・暗いトーン2・画像の別の場所からのアクセント1です。
1 ピクセルをパレットに変えるのは出現頻度です。私たちのピッカーが返した既知 6 色の順序はファイル内の順序と異なります —— #fdf3e3 #f4a261 #2a9d8f #264653 #e9c46a #e76f51 #fcedda #f6ba88 —— 各色が画像をどれだけ覆っているかで並べており、出現位置では並べていないからです。この順序が有用な部分です。先頭 2 つはほぼ必ず背景と主要な図形で、ページのテーマ配色に欲しいのはまさにその 2 つです。
よくある間違い
- **アンチエイリアスの縁を取ってしまう。**2色が接する画素は混色で半透明のため、濁った中間の値になります。ベタ塗り領域の内側をクリックしましょう。
- **スクリーンショットの色を鵜呑みにする。**OS のスクショはディスプレイのカラープロファイルを含むことがあり、メッセージアプリが再圧縮する場合もあります——元ファイルから値がわずかにずれることがあります。
- **グラデーションから1画素だけ取る。**その一点しか得られず、変化は反映されません。グラデーションは両端を取りましょう。
よくある質問
画像を拡大すると取得値は変わりますか? 変わりません。canvas ベースのピッカーは画面の拡大率に関係なく元の画素データを読むため、拡大しても縮小してもコードは同じです。
パレットの色数はいくつが適切? 多くのデザインでは、使える色が4〜6で十分です——主色1〜2、補助色いくつか、アクセント1つ。
アップロードした画像だけでなく、画面のどこからでも色を取れますか? ブラウザツールは読み込んだ画像が対象です。任意のウィンドウの画素を取るには、いまはたいていの OS に標準のスポイトが備わっています(EyeDropper API を提供するブラウザもあります)。
コードを得たら、HEX・RGB・HSL の解説で変換・調整し、CSS ジェネレーターで効果を作りましょう。