画像カラーピッカーとは？
画像の色抽出ツールは、写真に含まれる色の正確なコードを教えてくれるオンラインのスポイトツールです。ロゴやWebサイトのスクリーンショットからブランドカラーを拾ったり、お気に入りの写真の色合いでデザイン用のパレットを作ったりするときに便利です。ルーペでピクセル単位まで正確に選べ、スマホでは指で押したまま動かすと指の上にルーペが表示されるので、指で隠れません。
画像はブラウザの中だけで処理され、サーバーに送信されません。
使い方
- 上の枠に画像をドラッグ＆ドロップするか、タップして選択します。スクリーンショットはCtrl+Vでそのまま貼り付けられます。
- 画像の好きな位置をタップします。ルーペで位置を確認しながら選べます。
- HEX、RGB、HSLコードの横のコピーを押して、デザインツールやCSSに貼り付けます。
- 下の代表色パレットで画像全体の主な色とその割合を確認できます。色をタップするとすぐにコピーされます。
カラーコードの読み方
| 形式 | 例 | 説明 |
|---|---|---|
| HEX | #4F46E5 | 赤・緑・青を16進数2桁ずつ（Web、Figma） |
| RGB | rgb(79, 70, 229) | 赤・緑・青を0〜255で（Photoshop、PowerPoint） |
| HSL | hsl(243, 75%, 59%) | 色相・彩度・明度（CSSで色を変化させるとき） |
代表色パレットの作り方
画像を小さく縮小してから似た色同士をまとめるk平均法（k-means）で、最も広い面積を占める色を最大8色見つけます。各色の下の数字は、その色のグループが画像に占める割合です。同じ画像からは常に同じパレットが作られます。
JPGの写真は圧縮の影響で、同じ色の面でもピクセルごとに値が少しずつ異なることがあります。ロゴの色を正確に拾いたいときは、PNGの元画像を使うか、ルーペで面の中央を選んでください。
よくある質問
画面に見える色とコードが少し違います。
モニターの色設定、ダークモード、画像に埋め込まれたカラープロファイルによって、見える色が少し違うことがあります。抽出したコードは、画像ファイルに保存されたピクセル値そのものです。
Webサイトの色を調べたいです。
調べたい画面をスクリーンショット（WindowsはWin+Shift+S、MacはCmd+Shift+4）してから、このページでCtrl+Vで貼り付け、好きな位置をタップしてください。
最近選んだ色はどこに保存されますか？
最近選んだ12色はこのブラウザだけに保存され、次に訪れたときも確認できます。画像は保存されません。
透明な部分はどうなりますか？
パレットは透明なピクセルを除いて計算します。透明な位置をタップすると色の情報がないため、黒（#000000）と表示されることがあります。