画像カラーピッカーとは?
画像カラーピッカーは、どんな画像からでも正確な色を「スポイト」で抜き取れるツールです。画像をアップロードして一点をクリックすると、その画素の HEX と RGB のコードが表示され、さらに画像の主要なパレットも自動抽出します。すべてブラウザ内で処理し、画像はアップロードされません。
使い方
- アップロード欄に画像をドラッグ、またはクリックしてファイルを選択します。
- 画像上の取りたい位置をクリックすると、右に HEX と RGB が表示されます。
- 下のパレットに画像の主要な色が並びます。色見本かボタンをクリックしてコードをコピーできます。
活用シーン
- スクリーンショット・ロゴ・写真からブランドカラーを抜き出してデザインに。
- 参考画像の配色を自分のサイトやスライドに合わせる。
- コードを取ったら、色変換ツールで HSL にしたり、CSS ジェネレーターでグラデーションを作ったり。
吸い取った色が「見た目」と違うのはなぜ?
写真から画素の色を吸い取り、そのコードをデザインに貼ると、なんだか少し違って見える——たいていツールが読み違えたのではなく、見落としがちな要因がいくつか働いています。まず JPG は非可逆圧縮で、輪郭やグラデーション付近に目では気づきにくいノイズが乗ります。単一画素の RGB はそのノイズを拾うことがあり、隣の点をいくつか取ると値が揺れているのがわかります。「この領域の代表色」を取りたいなら、下に自動抽出される主要なパレットのほうが、一点を突くより安定します。領域全体を平均しているからです。次に、画面のカラープロファイル(sRGB か P3 か)とデザインアプリの設定が違えば、同じ RGB でも表示は変わります。スポイトは正確な数値の出発点を得るのに最適で、細部はそこから微調整するのがよいでしょう。HEX / RGB を得たら、色変換ツールで HSL にしたり、CSS ジェネレーターでグラデーションを作ったりできます。
色の抽出が正確かどう確かめる?
答えが既知の画像を使います。テストコーパスのイラストはスクリプトが描いたもので、6 色があらかじめ書き留められています:#fdf3e3 #f4a261 #2a9d8f #264653 #e76f51 #e9c46a。このページに渡すと #fdf3e3 #f4a261 #2a9d8f #264653 #e9c46a #e76f51 #fcedda #f6ba88 が返り、既知の色との一致は 6/6。ほかに 2 つ出ますが、これは誤りではなくアンチエイリアスの縁のピクセルです。「1 ピクセル取ったのにデザインにない色が返る」のはなぜかも、これで説明できます。縁では図形の色と背景が混ざっているからです。