MUTools

カラーピッカー

カラーピッカーツールは、画像から色（カラーコード）を抽出するツールです。アップロードした画像や画像 URL を読み込み、表示されるルーペで拡大しながら、クリックでピクセル単位の色を取り出せます。

画像をここにドラッグ

または

PNG / JPG / WebP / GIF / BMP / SVG に対応（最大 20MB）。.png,.jpg,.jpeg,.webp,.gif,.bmp,.svg

抽出した色0 件

画像のピクセルをクリックすると、色がここに追加されます。

カラーピッカーツールとは？

カラーピッカーツールは、画像から色（カラーコード）を抽出するツールです。アップロードした画像や画像 URL を読み込み、表示されるルーペで拡大しながら、クリックでピクセル単位の色を取り出せます。

取得した色は HEX（#RRGGBB）・RGB・HSL の 3 形式で切り替えて表示できます。ルーペの拡大率は 5x / 10x / 20x の 3 段階。複数の色を取り出してパレットを作り、JSON や CSS 変数の形式でクリップボードにコピーすれば、デザインカンプ・スタイルガイド・コードに直接貼り付けられます。

Chrome 系ブラウザでは「画面から色を取得」（EyeDropper API）も利用でき、画像に限らずデスクトップ画面全体から色を吸い取れます。読み込んだ画像はすべて利用者のブラウザ内で処理され、外部サーバーには送信されません。ブラウザだけで完結します。

使い方

  1. 画像ファイルをアップロードするか、画像 URL を貼り付けて読み込みます。
  2. 画像上にカーソルを合わせるとルーペが表示されます。ルーペの拡大率（5x / 10x / 20x）を選びます。
  3. ピクセル単位で確認したい場所をクリックすると、その点の色がパレットに追加されます。
  4. 色の表示形式を HEX / RGB / HSL から切り替えて確認します。
  5. 対応ブラウザでは「画面から色を取得」ボタンで、デスクトップ画面の任意の位置から色を取り出すこともできます。
  6. 「JSON をコピー」「CSS 変数をコピー」で抽出したパレットをまとめて書き出せます。

利用シーン

  • デザインカンプから配色を取り出し、Web サイトの CSS 変数として実装したい Web デザイナー・フロントエンドエンジニア。
  • 競合サイトや参考デザインのスクリーンショットから配色を分析したい UI デザイナー。
  • ブランドカラーを写真や素材から拾い出して、配色ガイドを作りたいブランディング担当者。
  • イラスト・写真の特定の部分の色を厳密に取りたいイラストレーター・カメラマン。
  • 資料やプレゼンに使う図表の色を、参考画像から揃えたいビジネスユーザー。

注意点

  • 「画面から色を取得」（EyeDropper）は Chrome 系の一部ブラウザでのみ利用可能です。Firefox / Safari など非対応のブラウザでは表示されません。
  • 画像 URL から読み込む場合、対象の画像サーバーが CORS（Cross-Origin Resource Sharing）を許可していないと、色の取得（getImageData）が失敗することがあります。
  • 色は sRGB 色空間で取得されます。広色域（Display P3 など）の画像は sRGB に変換された値が表示されます。
  • ルーペで表示される色と、画像全体で見たときの色が違って見えることがあります（隣接ピクセルの影響）。
  • 本ツールはピクセル単位の色を取得します。AI による「画像全体の代表色抽出」とは目的が異なります。

よくある質問

画像はサーバーにアップロードされますか？
アップロードされません。色抽出処理はすべてお使いのブラウザ内で完結します。社内向けのデザイン素材や個人の写真でも安心して利用できます。
画像 URL を入れても色が取れません。
画像のホスト側で CORS（クロスオリジンアクセス）が許可されていない場合、ブラウザの仕様で色の取得ができません。対策としては、画像をローカルにダウンロードしてアップロードからお試しください。
HEX / RGB / HSL の違いは？
HEX は #RRGGBB の 16 進数表記、RGB は赤・緑・青の輝度を 0〜255 で表す形式、HSL は色相・彩度・明度の 3 要素で表す形式です。CSS では HEX と RGB が広く使われ、HSL は色相を中心に微調整する設計時に便利です。本ツールでは同じ色をワンクリックで 3 形式間で切り替えられます。
「画面から色を取得」が表示されません。
EyeDropper API に対応した Chrome 系ブラウザ（Google Chrome / Microsoft Edge / Brave など）でのみ表示されます。Firefox や Safari では非対応のため、画像をアップロードする方法をご利用ください。
取得した色を Figma / Sketch / Photoshop に持っていけますか？
HEX をそのままコピーすればほとんどのデザインツールにペーストできます。一括で複数色を持ち込みたい場合は「JSON をコピー」「CSS 変数をコピー」で書き出した文字列を、対応するプラグインやインポート機能で取り込んでください。