画像カラーピッカーとパレット抽出
画像を読み込んで好きな場所をクリックすると、その位置の色を正確に取得し、HEX、RGB、HSLの値をコピーできます。主な色のパレットも自動で作成します。画像はブラウザ上のキャンバスから直接読み取られ、どこにも送信されません。
画像をここにドラッグ&ドロップするか、クリックしてファイルを選択
JPG、PNG、WebP、GIFに対応しています。ファイルはお使いの端末から出ません。
画像をクリックして色を選びます。クリック前にカーソルを動かすとプレビューできます。
選択した色
パレット
色は、ブラウザがCanvas APIを使って画像のピクセルから直接読み取ります。画像そのものがサーバーにアップロードされることはありません。
画像から正確な色を取得
ロゴの青、スクリーンショットの背景、写真のアクセントカラーなど、デザイナーや開発者はピクセル単位の正確な色を必要とする場面が多くあります。この画像カラーピッカーは、画像をクリックできるキャンバスに変え、カーソル位置の色を3つの一般的な形式で表示し、ワンクリックでコピーできます。ピッカーに加えて、画像全体を解析して最も多く使われている色のパレットも作成するので、参考画像から配色をそのまま取り出せます。
ブランドカラーの確認、スクリーンショットからのテーマの再現、写真からデザイン用の色の抽出、アートワークからの配色の取得などにお使いください。
色の選び方
- 画像を開く。画像をドロップするか選択すると、キャンバスに表示されます。
- ピクセルをクリック。画像の好きな場所をクリックすると、その位置の色を取得します。
- コードをコピー。HEX、RGB、HSLの値をコピーするか、パレットの色見本をクリックしてそのHEXをコピーします。
3つのカラー形式
選んだ色は、CSSやデザインツール向けのHEX、コード向けのRGB、色相・彩度・明度の調整に便利なHSLで表示されます。用途に合わせてコピーできます。
自動パレット
画像をサンプリングして似た色をまとめ、主要な色を抽出します。統一感のあるデザインにすぐ使えるパレットが手に入ります。
ブラウザ内でピクセルを読み取り
画像はブラウザ上のキャンバスに描画され、色はそこから読み取られます。アップロードは一切ないため、非公開のモックアップやスクリーンショットも端末の外に出ません。
便利なポイント
- ワンクリックでコピー:HEX、RGB、HSLをすぐに取得。
- 数秒でパレット作成:どんな画像でも主な色をすぐに再利用できます。
- アップロード不要:ピクセルはブラウザ内で読み取られ、外部に送られません。
- 完全無料:アカウント不要、透かしも入りません。
- どの端末でも:パソコンではクリック、スマートフォンではタップで使えます。
カラーピッカーのよくある使い方
このツールが最もよく使われるのは、写真やスクリーンショットに見えている色のカラーコードを調べたいときです。ロゴを読み込んでマーク部分をクリックすればブランドカラーを正確に取得でき、スクリーンショットの背景をクリックすれば、手元の画像にウェブサイトの色を合わせられます。選んだ色は3つの形式で同時に表示されます。CSSやデザインアプリに貼り付けられる #1A73E8 のようなHEXコード、コード向けの rgb(26, 115, 232) のようなRGB、色相・彩度・明度を調整するためのHSLです。それぞれの横にコピーボタンがあるので、1ピクセルのRGB値を調べるのもクリックしてコピーするだけです。
画像からパレットを作る用途にも便利です。画像を読み込むとピクセルを解析し、最も多く使われている色を最大8色まで色見本として一覧表示し、その下にHEXコードを表示します。色見本をクリックするとその色がメインの表示に反映され、コードをクリックするとクリップボードにコピーされます。アートワークや写真、ムードボードから配色を取り出したり、参考画像から合う色を迷わず集めたりするのに役立ちます。