画像カラーピッカー
画像カラーピッカーは、アップロードした画像から主要カラーを自動抽出し、使用割合とともにパレット化できる無料ツールです。スポイト機能を使えば画像内の任意の位置の色も取得できます。入力した画像はサーバーに送信されず、ブラウザ内で処理が完結します。
画像をドラッグ＆ドロップ
またはクリックして選択
またはクリックして選択
画像内をクリックすると、その位置の色を取得できます
スポイトで取得した色
画像から抽出した主要カラー
一括コピー形式
※アップロードした画像はサーバーに送信されません。ブラウザ内で完結して処理されます。
画像カラーピッカーとは？
画像カラーピッカーは、アップロードした画像（写真・スクリーンショット・サムネイルなど）から使われている色を自動的に分析し、主な配色をパレットとして抽出できる無料のWebツールです。各色の使用割合（%）も表示されるため、Webサイトやデザインのベースカラーを把握したいときに役立ちます。さらにスポイト機能を使えば、画像内の特定の位置の色をピンポイントで取得することもでき、デザイナー・コーダーの両方に役立つ多目的なカラー抽出ツールです。
各機能の説明
-
主要カラーの自動抽出画像内の色を解析し、よく使われている上位6色までを自動でパレット化します。
-
使用割合の表示抽出した各色が画像内でどのくらいの割合を占めているかをパーセントで確認できます。
-
スポイト機能画像内の任意の位置をクリックすると、その地点の色をピンポイントで取得できます。
-
拡大ルーペ表示クリック前にカーソル周辺を拡大表示し、ピクセル単位で正確に色を選べます。
-
複数フォーマットでの確認取得した色をHEX・RGB・HSL・HSV・CMYK・CSS変数の各形式で同時に確認できます。
-
パレットの一括コピー抽出したパレット全体を、選んだ形式でまとめてコピーできます。
使い方の手順
- 解析したい画像をドラッグ＆ドロップ、またはクリックして選択します。
- 画像から主要カラーが自動的にパレット化され、使用割合とともに表示されます。
- 画像内をクリックすると、その位置の色がスポイトでピンポイントに取得されます。
- HEX・RGB・HSL・CSS変数など、必要な形式でコピーして利用します。
こんなときに使う
-
Webサイトの配色を分析したいとき競合サイトやデザイン参考のスクリーンショットから、使用されている色を把握できます。
-
デザインカンプから色を抽出したいとき完成イメージ画像から主要カラーをそのままパレット化して取り出せます。
-
ロゴ・素材の色を確認したいとき画像内の特定パーツの色を、スポイトでピンポイントに取得できます。
-
CSS変数を画像から起こしたいとき抽出したパレットをそのまま「:root」のCSS変数として書き出せます。
-
サムネイルの配色チェックサムネイル画像の色のバランスを、使用割合とともに確認できます。
よくある質問
-
抽出できる色の数に上限はありますか？
自動抽出では、画像内の主要カラーを最大6色までパレットとして表示します。スポイト機能には回数の制限がなく、画像内のどの位置でも何度でも色を取得できます。
-
アップロードした画像はサーバーに送信されますか？
いいえ、送信されません。画像の読み込みからパレット抽出、スポイトでの色取得まで、すべての処理はブラウザ内のJavaScriptで完結し、外部に送信されることはありません。
-
パレットの使用割合（%）はどのように算出していますか？
表示中の画像の各ピクセルの色を集計し、近い色同士をグループ化したうえで、それぞれのグループが画像全体に占める割合を計算して表示しています。
-
スポイトで取得した色が画像編集ソフトと少し違うのはなぜですか？
画像を表示用に縮小してから解析しているため、リサイズ時の補完処理によって元画像と色がわずかに変わる場合があります。厳密な色確認には画像編集ソフトの併用をおすすめします。
-
対応している画像形式は何ですか？
JPEG・PNG・WebP・GIFなど、ブラウザで表示できる主要な画像形式に対応しています。透明部分を含む画像の場合、透明なピクセルは抽出・集計の対象から除外されます。