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