手元にあるのはスクリーンショットだけ、ということがよくあります。サイトのCSSは開けない、アプリは調べられない、デザインファイルもない——でも画面の色は見えていて、スクリーンショットはそれを、採取できる画像に凍りつかせます。ここでは、そこから正確な色コードを引き出す方法を紹介します。
スクリーンショットが正直な情報源である理由
レンダリングされたページやアプリのスクリーンショットを撮ると、色を実際に見えるとおりに——すべてのグラデーション、オーバーレイ、不透明度が適用されたあとで——捉えます。それはしばしば元の値より真実に近いものです。グレー背景の上で不透明度90%の#000000として定義されたカードは、画面上では黒ではありません。特定の暗いグレーです。コードを調べればレシピが得られ、スクリーンショットを採取すればユーザーが実際に見る色が得られます。その見た目に合わせるとき、読み取りたいのはスクリーンショットです。
3ステップで色を採取する
- スクリーンショットを撮って読み込む。 画面（または気になる領域）を撮り、その画像をピッカーに放り込む。
- ピクセルにホバーする。 カーソルを追う拡大ルーペがその下の領域を拡大するので、細い枠や小さなアイコンの上でも正確に狙えます。
- クリックで保存、そしてコピー。 クリックのたびに色がHEX、RGB、HSL付きの見本として残り、それぞれにコピーボタンがあります。必要な形式をコピーして、スタイルシートやデザインツールに貼り付けます。
スクリーンショット特有の注意点
スクリーンショットには色の採取を狂わせうる癖があり、知ってしまえば避けるのは簡単です。
- JPEGではなくPNGで保存する。 JPEG圧縮は、特に縁の近くやフラットな領域で色をわずかににじませるので、採取した値が本当の値からずれることがあります。PNGは劣化なしで各ピクセルを正確に保ちます。ほとんどのOSのスクリーンショット機能はすでに既定でPNGです。
- ズームレベルに注意する。 ブラウザやOSのズームが100%以外で撮ったスクリーンショットは拡大縮小されていて、拡大縮小は隣り合うピクセルを混ぜます。最もきれいに採取するには、100%で撮りましょう。
- 縁と文字を避ける。 アンチエイリアスのせいで、どんな縁沿いのピクセルも混色であって本当の色ではありません。無地の領域の真ん中から採取しましょう。ルーペがぼやけた境界から離れていることを確かめる助けになります。
- サブピクセルの文字色に注意する。 レンダリングされた文字を拡大すると、文字の本当の値ではない色の縁取りが見えます。文字の線からではなく、塗りと背景から色を採取しましょう。
HEX、RGB、HSLの読み方
どの見本も3つの形式を同時に表示します。
- HEX（
#3A7BD5） — CSSやデザインツールの既定。 - RGB（
rgb(58, 123, 213)） — チャンネル値。rgbaの透明度が必要なときに便利。 - HSL（
hsl(215, 65%, 53%)） — 色相、彩度、明度。そのままコピーするより色を微調整したいときに最適。
切り替えるのに採取し直す必要はありません。同じ色がすでに3つすべてに入っています。
一度に配色まるごとを採取する
1枚のスクリーンショットから、配色まるごとを再構築できます。ヘッダーの色、ボタン、リンク、背景、控えめな文字をクリックしていきます。それぞれがリストに積み上がるので、一度のセッションで一式を引き出し、順にコピーできます。
一方、画像の全体的なパレット——支配的なひと握りの色調——をまとめてほしいなら、それは別の仕事で、img.diyのパレットツールが自動で抽出します。このピッカーはスクリーンショット内の特定のピクセルを指し示すためのもの、パレットツールは画像全体を特徴づけるためのものです。
何もあなたのマシンから出ない
スクリーンショットには、アップロードしたくないものが写っていることがよくあります。社内ダッシュボード、非公開の下書き、クライアントの未発表UIなど。ここでは画像がブラウザ内のキャンバスからローカルに読み取られます。どこにも送られず、アカウントもなく、初回読み込み後はオフラインで動きます。スクリーンショットが端末から一度も出ないまま、色が手に入ります。
スクリーンショットを撮り、ピクセルにホバーし、クリックして、コピー。