メインコンテンツへスキップ
カラーピッカー

画像から色を取得する(カラーピッカー)

画像の好きなピクセルの色をルーペで正確に調べたり、主要な色のパレットを取り出したり。HEX・RGB・HSLで表示します。

表示形式

ここに画像をドラッグ&ドロップ

または ファイルを選択

または画像を貼り付け(Ctrl+V)

JPG・PNG・WebP・GIF・BMP · 1ファイル最大50MB

パレット

画像から色を選んでください

くわしく知る

画像から色を取る:基本のポイント

画像から色を取りたい場面

画像でしか手元にないロゴからブランドカラーを合わせたいとき、写真の色合いをスライドやホームページに使いたいとき、デザイナーがモックアップで使ったグレーを確かめたいとき、商品写真からパレットを作りたいときなど。ルーペでカーソルの下のピクセルが見えるので、まわりと混ざった色ではなく、狙ったピクセルの色をそのまま取れます。

選んだ色と主要な色のパレット

クリックするたびに色がリストに追加され、HEX・RGB・HSLで1色ずつでもパレットまるごとでもコピーできます。自動パレットは似たピクセルをまとめていちばん多い色を残すので、配色を考える出発点にぴったりです。色は読み込んだ画像から取得するため、強く圧縮されたJPEGでは、輪郭の近くで値が少しずれることがあります。JPG・PNG・WebP・GIF・BMPで50MBまで対応しています。

パレットの自動抽出

画像全体から約1万個のピクセルを抜き出し、減色(カラー量子化)で似た色をグループにまとめます。そのうち大きいグループを最大8つ選び、それぞれのピクセルの平均の色を、多い順に返します。

写真から配色を作ったり、ブランドのデザインを考えたり、デザインの中で画像に合う背景色を探したりするのに便利です。

使い方

画像カラーピッカーは3ステップ

  1. 画像を追加する

    画像をドラッグ&ドロップするか、クリックして選びます。JPG・PNG・WebP・GIF・BMPに対応しています。

  2. 色を選ぶ

    画像の上にカーソルを合わせると拡大表示が出ます。クリックすると、その位置の色を取得できます。取得した色はパレットに追加されます。

  3. パレットを書き出す

    1色ずつ、またはパレット全体をコピーします。表示形式の切り替えで、HEX・RGB・HSLを選べます。

活用ガイド

色の抽出を使いこなすコツ

しくみ

画像はブラウザ内のキャンバスに描かれます。カーソルを合わせるとその下のピクセルを読み取って拡大表示し、クリックするとその値を保存します。

主要な色のパレットは、ピクセルを抜き出して似た色ごとにまとめ、多いグループから順に並べて作ります。

かんたん・すばやい

プライバシーと安全性

このツールは、HTMLのCanvas APIを使って画像をすべてブラウザ内で処理します。画像がサーバーにアップロード・保存・送信されることはないので、プライベートな画像や機密性の高い画像にも安心して使えます。

モックアップや未発表のデザインも端末から出ません。色はお使いのブラウザの中で読み取られます。

ブラウザ内で完結
よくある質問

画像カラーピッカーのよくある質問

画像カラーピッカーについて知っておきたいこと